@gvol-org/geovis-mapbox-sdk NPM

快速上手

通过CDN引入

html 部分

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>geovis-mapbox-sdk</title>
  <link rel="stylesheet" href="https://unpkg.com/mapbox-gl@v3.3.0/dist/mapbox-gl.css">
  <script src="https://unpkg.com/mapbox-gl@v3.3.0/dist/mapbox-gl.js"></script>
  <script src="https://unpkg.com/@gvol-org/geovis-mapbox-sdk@2.0.2/index.js"></script>
</head>
<style>
  #app{
    position: absolute;
    width: 100vw;
    height: 100vh;
  }
</style>
<body>
  <div id="app"></div>
</body>

js 部分

<script type="module">
   //导入矢量瓦片处理文件
   //mapboxgl-v2.x版本使用
  // import { geovisWorker } from "https://unpkg.com/@gvol-org/geovis-mapbox-sdk@2.0.2/geovis-worker.js";//mapboxgl-v2.x版本使用

   //mapboxgl-v3.x版本使用
  import { geovisWorker } from "https://unpkg.com/@gvol-org/geovis-mapbox-sdk@2.0.2/geovis-worker-v3.js";//mapboxgl-v3.x版本使用
  console.log(geovis)

  //星图地球sdk初始化(获得星图地球矢量瓦片加载能力及accessToken设置)
  geovis.initGeovisEarth(mapboxgl, geovisWorker,'<mapboxgl accessToken>');

  const map = new mapboxgl.Map({
    container: 'app',
     style:geovis.getGeovisInitStyle(),//获取初始化样式
    center: [-73.935242, 40.730610],
    zoom: 2,
    projection: 'globe'
  });

//map对象加载事件处理
map.on('load', () => {
  //创建影像图层
  geovis.addGeovisImageLayer({ token: '<GeovisDataCloud Token>', map })
 //创建矢量图层
 geovis.addGeovisMapLayer({ token: '<GeovisDataCloud Token>', map })
 //创建地形晕渲
 geovis.addGeovisTerrainShadingLayer({ token: '<GeovisDataCloud Token>', map })
//创建地形注记
 geovis.addGeovisImageNoteLayer({ token: '<GeovisDataCloud Token>', map })
  //添加地形
 geovis.addGeovisTerrainLayer({ token: '<GeovisDataCloud Token>', map })
  //创建矢量瓦片影像+标记图层
 geovis.addGeovisVectorTilesLayer({ token: '<GeovisDataCloud Token>', map})
   //创建矢量瓦片标记地图
 geovis.addGeovisVectorTilesNoteLayer({ token: '<GeovisDataCloud Token>', map})

 //通过sourceId删除source和layer
 geovis.removeLayersBySource({ token: '<GeovisDataCloud Token>', map },'sourceId');

//移除矢量瓦片底图图层
 geovis.removeGeovisVectorTilesLayer({ token: '<GeovisDataCloud Token>', map });

//移除矢量注记图层
 geovis.removeGeovisVectorTilesNoteLayer({ token: '<GeovisDataCloud Token>', map });

//通过sourceId设置图层显隐
 geovis.setLayersVisibilityBySource({ token: '<GeovisDataCloud Token>', map },'sourceId',false);

//添加地铁图层
geovis.addGeovisSubwayLayer({ token: '<GeovisDataCloud Token>', id: 'zkxt-vector-tile-subway', map });

//添加白模图层,默认为矢量瓦片格式加载。当type参数为3dtiles_ter时，使用3dtiles格式有地形加载;当type参数为3dtiles时，使用3dtiles格式无地形加载。
geovis.addGeovisWhiteModelLayer({ token: '<GeovisDataCloud Token>', type:'3dtiles_ter', map:map });

//添加水系图层
geovis.addGeovisRiversLayer({ token: '<GeovisDataCloud Token>', map });

//添加湖泊图层
geovis.addGeovisLakesLayer({ token: '<GeovisDataCloud Token>', map });

//通过样式对象添加图层
geovis.addLayerByStyle({ map },'YOUR StyleObject');

//添加经纬网图层
var graticules=geovis.addGeovisGraticulesLayer({map:map});

//移除经纬网图层
geovis.removeGeovisGraticulesLayer(graticules);

//添加3dtiles图层
geovis.addGeovis3dTilesLayer({id:'图层id',url:'<3dtiles地址，tileset.json文件路径>'});

//在线地图
   //添加天地图矢量图层,默认图层Id:TianDiTuVector
    geovis.addTianDiTuVectorLayer({ token: '<天地图 Token>',  map });
   //添加天地图矢量注记图层,默认图层Id:TianDiTuVectorNote
    geovis.addTianDiTuVectorNoteLayer({ token: '<天地图 Token>',  map });
    //添加天地图影像图层,默认图层Id:TianDiTuImage
    geovis.addTianDiTuImageLayer({ token: '<天地图 Token>',  map });
   //添加天地图影像注记图层,默认图层Id:TianDiTuImageNote
    geovis.addTianDiTuImageNoteLayer({ token: '<天地图 Token>',  map });

     //添加高德矢量图层,默认图层Id:GaodeVector
     geovis.addGaodeVectorLayer({map:map });
     //添加高德影像图层,默认图层Id:GaodeImage
     geovis.addGaodeImageLayer({map:map });
     //添加高德注记图层,默认图层Id:GaodeNote
     geovis.addGaodeNoteLayer({map:map });


     //添加ArcGIS online图层,默认图层Id:ArcGISOnline
      geovis.addArcGISOnlineLayer({map:map });

      //添加OSM图层,默认图层Id:OSM
      geovis.addOSMLayer({map:map });

      //移除在线底图
      geovis.removeOnlineLayer({map:map },'图层Id');

       //添加ImageSourceLayer,传入map及图片路径,返回图层id。默认图层Id:imageSource
      const id = geovis.addImageSourceLayer({ map }, '图片路径');

       //更新ImageSourceLayer,传入map、图层id及图片路径
       geovis.updateImageSourceLayer({ map, id },'图片路径');


       //添加气象图层(如气温图、降水图等)

          //图层参数对象
          const options = {
            map: map,//地图对象
            images: images,//气象格点图片集合
            configs: configs,//配置(包括最大值、最小值等)
            colors: colors,//颜色集合(着色方案)
            colorStartValue: -50,//颜色的起始值,低于这个值的渲染为此颜色
            colorValueInterval: 100,//颜色的数字跨度,比如气温-50度到50度，就是100
            visibleValue: 20,//显示当前颜色及以上的值，如20度，表示显示20度以上的值
            currentTime: 0,//当前播放进度
            duration:10,//images播放总时长，单位为秒
           };

         geovis.addGeovisWeatherLayer(options);

})


</script>

通过 npm 安装

npm i mapbox-gl @gvol-org/geovis-mapbox-sdk

    import "mapbox-gl/dist/mapbox-gl.css";
    import mapboxgl from "mapbox-gl";
    import {
    initGeovisEarth,
    addGeovisImageLayer,addGeovisTerrainByToken,
    addGeoviVectorTiles,addGeoviVectorTilesNote ,
    addGeovisTerrainLayer,addGeovisVectorTilesLayer,
    addGeovisVectorTilesNoteLayer,getGeovisInitStyle,setLayersVisibilityBySource,removeLayersBySource,removeGeovisVectorTilesLayer,removeGeovisVectorTilesNoteLayer,addGeovisSubwayLayer,addGeovisWhiteModelLayer,addGeovisGraticulesLayer,removeGeovisGraticulesLayer,addGeovis3dTilesLayer, addTianDiTuImageNoteLayer,addTianDiTuImageLayer,addTianDiTuVectorNoteLayer,addTianDiTuVectorLayer, addArcGISOnlineLayer,
    addOSMLayer,addGaodeNoteLayer, addGaodeImageLayer,addGaodeVectorLayer,removeOnlineLayer,addImageSourceLayer,
    updateImageSourceLayer,addGeovisLakesLayer,
  addGeovisRiversLayer,addLayerByStyle,addGeovisWeatherLayer} from '@gvol-org/geovis-mapbox-sdk'
     //导入矢量瓦片处理文件
    //mapboxgl-v2.x版本使用
    //import { geovisWorker } from "@gvol-org/geovis-mapbox-sdk/geovis-worker.js";//mapboxgl-v2.x版本使用

     //mapboxgl-v3.x版本使用
    import { geovisWorker } from "@gvol-org/geovis-mapbox-sdk/geovis-worker-v3.js";//mapboxgl-v3.x版本使用

    //星图地球sdk初始化(获得星图地球矢量瓦片加载能力及accessToken设置)
    initGeovisEarth(mapboxgl,geovisWorker,'<mapboxgl accessToken>');
    // 初始化地球
    const map = new mapboxgl.Map({
    container: 'app',
    style:getGeovisInitStyle(),//获取初始化样式
    center: [-73.935242, 40.730610],
    zoom: 2,
    projection: 'globe'
  });


//map对象加载事件处理
map.on('load', () => {
  //创建影像图层
  addGeovisImageLayer({ token: '<GeovisDataCloud Token>', map })
  //创建矢量图层
  addGeovisMapLayer({ token: '<GeovisDataCloud Token>', map })
  //创建地形晕渲
  addGeovisTerrainShadingLayer({ token: '<GeovisDataCloud Token>', map })
  //创建地形注记
  addGeovisImageNoteLayer({ token: '<GeovisDataCloud Token>', map })
  //添加地形
  addGeovisTerrainLayer({ token: '<GeovisDataCloud Token>', map })
  //创建矢量瓦片影像+标记图层
  addGeovisVectorTilesLayer({ token: '<GeovisDataCloud Token>', map })
  //创建矢量瓦片标记地图
  addGeovisVectorTilesNoteLayer({ token: '<GeovisDataCloud Token>', map })

  //通过sourceId删除source和layer
  removeLayersBySource({ token: '<GeovisDataCloud Token>', map }, 'sourceId');

  //移除矢量瓦片底图图层
  removeGeovisVectorTilesLayer({ token: '<GeovisDataCloud Token>', map });

  //移除矢量注记图层
  removeGeovisVectorTilesNoteLayer({ token: '<GeovisDataCloud Token>', map });
  //通过sourceId设置图层显隐
  setLayersVisibilityBySource({ token: '<GeovisDataCloud Token>', map }, 'sourceId', false);

  //添加地铁图层
  addGeovisSubwayLayer({ token: '<GeovisDataCloud Token>', id: 'zkxt-vector-tile-subway', map });

  //添加白模图层,默认为矢量瓦片格式加载。当type参数为3dtiles_ter时，使用3dtiles格式有地形加载;当type参数为3dtiles时，使用3dtiles格式无地形加载。
  addGeovisWhiteModelLayer({ token: '<GeovisDataCloud Token>', type: '3dtiles_ter', map: map });

  //添加水系图层
  addGeovisRiversLayer({ token: '<GeovisDataCloud Token>', map });

  //添加湖泊图层
  addGeovisLakesLayer({ token: '<GeovisDataCloud Token>', map });

  //通过样式对象添加图层
  addLayerByStyle({ map },'YOUR StyleObject');


  //添加经纬网图层
  const graticules = addGeovisGraticulesLayer({ map: map });

  //移除经纬网图层
  removeGeovisGraticulesLayer(graticules);

  //添加3dtiles图层
  addGeovis3dTilesLayer({ id: '图层id', url: '<3dtiles地址,tileset.json文件路径>' });


  //在线地图
  //添加天地图矢量图层,默认图层Id:TianDiTuVector
  addTianDiTuVectorLayer({ token: '<天地图 Token>', map });
  //添加天地图矢量注记图层,默认图层Id:TianDiTuVectorNote
  addTianDiTuVectorNoteLayer({ token: '<天地图 Token>', map });
  //添加天地图影像图层,默认图层Id:TianDiTuImage
  addTianDiTuImageLayer({ token: '<天地图 Token>', map });
  //添加天地图影像注记图层,默认图层Id:TianDiTuImageNote
  addTianDiTuImageNoteLayer({ token: '<天地图 Token>', map });

  //添加高德矢量图层,默认图层Id:GaodeVector
  addGaodeVectorLayer({ map: map });
  //添加高德影像图层,默认图层Id:GaodeImage
  addGaodeImageLayer({ map: map });
  //添加高德注记图层,默认图层Id:GaodeNote
  addGaodeNoteLayer({ map: map });


  //添加ArcGIS online图层,默认图层Id:ArcGISOnline
  addArcGISOnlineLayer({ map: map });

  //添加OSM图层,默认图层Id:OSM
  addOSMLayer({ map: map });

  //移除在线底图
  removeOnlineLayer({ map: map }, '图层Id');

  //添加ImageSourceLayer,传入map及图片路径,返回图层id。默认图层Id:imageSource
  const id = addImageSourceLayer({ map }, '图片路径');

  //更新ImageSourceLayer,传入map、图层id及图片路径
  updateImageSourceLayer({ map, id }, '图片路径');


   //添加气象图层(如气温图、降水图等)
          //图层参数对象
         const options = {
            map: map,//地图对象
            images: images,//气象格点图片集合
            configs: configs,//配置(包括最大值、最小值等)
            colors: colors,//颜色集合(着色方案)
            colorStartValue: -50,//颜色的起始值,低于这个值的渲染为此颜色
            colorValueInterval: 100,//颜色的数字跨度,比如气温-50度到50度，就是100
            visibleValue: 20,//显示当前颜色及以上的值，如20度，表示显示20度以上的值
            currentTime: 0,//当前播放进度
            duration:10,//images播放总时长，单位为秒
           };

       addGeovisWeatherLayer(options);
})

全球鹰眼功能

能双向绑定控制 2.可自由控制2d与3d的自由切换

使用方式

// 自定义鹰眼球css样式  默认不给样式只暴露.mapbox-ctrl-minimap类
//  .mapbox-ctrl-minimap {
//   border: solid rgba(255, 255, 255, 1) 4px;
//   box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
//   border-radius: 3px;
//   background: #f8f8f9;
//   transition: all 0.6s;
// }

// .mapbox-ctrl-minimap a.minimap {
//   background-color: rgba(255, 255, 255, 1);
//   background-repeat: no-repeat;
//   z-index: 99999;
//   transition: all 0.6s;
// }


const map = new mapboxgl.Map({
  container: 'app',
  style: getGeovisInitStyle(),
  zoom: 5,
  projection: { name: 'globe' },
});


map.on('load', () => {
  addGeovisImageLayer({ token: '<GeovisDataCloud Token>',  map });
  //通过mapboxgl创建一个实例和主地图同步
 const miniMap = new mapboxgl.Map({
    attributionControl: false,
    container: container,
    center: map.getCenter(),
    projection: map.getProjection()
  });
  //添加一个简单的墨卡托投影图
  miniMap.addSource('overview', {
    "type": "raster",
    "tiles": [
      "https://cloud.geovisearth.com/s/f/fc60ad89-99af-4d29-b997-d0ade259d5c2.jpg"
    ],
    minzoom: 0,
    maxzoom: 0,

  });
  miniMap.addLayer({
    id: 'overview',
    type: 'raster',
    source: 'overview',
  });
  const overview = new OverviewMap({
    miniMap,
    fixZoom: -1,
    zoomLevelOffset: -3,
  });

  //添加到控制器上
  map.addControl(overview, 'bottom-right');
// 其中Minimap构造函数中的option有这些可控制参数，其中默认参数如下：
  //  {
  //  miniMap: null, //创建一个mapbox地图实例 必传！
  //     fixZoom:0,//球默认固定的zoom大小 如果主球的zoom+zoomLevelOffset > fixZoom 鹰眼球默认还是fixzoom 即：zoom+zoomLevelOffset <  this.options.fixZoom ? zoom : this.options.fixZoom;
  //     zoomLevelFixed: false,//是否关闭zoom偏移量
  //     zoomLevelOffset: 0, //两球之间的zoom偏移量

  //     lineColor: '#ff2828',
  //     lineWidth: 1,
  //     lineOpacity: 1,

  //     fillColor: '#f80',
  //     fillOpacity: 0.25,

  //     dragPan: false,
  //     scrollZoom: false,
  //     boxZoom: false,
  //     dragRotate: false,
  //     keyboard: false,
  //     doubleClickZoom: false,
  //     touchZoomRotate: false,
  //     minimized: false,
  //   };

  //如果不想要显示的范围可以删除上面的标记范围
    overview.removeTrackingRect()

@everything-registry/sub-chunk-380

15 hours ago

4 days ago

4 days ago

7 days ago

7 days ago