@gvol-org/open-mapbox-sdk

v1.0.2

Published

6 months ago

是一套基于星图云开放平台地图API的应用程序接口，您可以使用该套SDK简单快捷的创建mapbox地图。

0High
0Medium
0Low

快速上手

通过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>open-mapbox-sdk</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/mapbox-gl.css">
  <script src="https://unpkg.com/[email protected]/dist/mapbox-gl.js"></script>
  <script src="https://unpkg.com/@gvol-org/open-mapbox-sdk/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/open-mapbox-sdk/geovis-worker.js";//mapboxgl-v2.x版本使用

   //mapboxgl-v3.x版本使用
  import { geovisWorker } from "https://unpkg.com/@gvol-org/open-mapbox-sdk/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: '<Token>', map, url })
  //创建矢量图层
  geovis.addGeovisMapLayer({ token: '<Token>', map, url })
  //创建地形晕渲
  geovis.addGeovisTerrainShadingLayer({ token: '<Token>', map, url })
  //创建栅格版地形注记
  geovis.addGeovisImageNoteLayer({ token: '<Token>', map, url })

  //创建矢量版地形注记
  geovis.addGeovisTerrainNoteLayer({ token: '<Token>', map, url })

  //添加地形
  geovis.addGeovisTerrainLayer({ token: '<Token>', map, url })
  //创建矢量版电子地图
  geovis.addGeovisVectorTilesLayer({ token: '<Token>', map, url})
  //创建矢量版影像注记
   geovis.addGeovisVectorTilesNoteLayer({ token: '<Token>', map, url})

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

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

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

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


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

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

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

  //通过样式对象添加图层
  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 },'图片路径');
})


</script>

通过 npm 安装

npm i [email protected] @gvol-org/open-mapbox-sdk

    import "mapbox-gl/dist/mapbox-gl.css";
    import mapboxgl from "mapbox-gl";
    import {
    initGeovisEarth,
    addGeovisImageLayer,addGeovisTerrainByToken,
    addGeoviVectorTiles,addGeoviVectorTilesNote ,
    addGeovisTerrainLayer,addGeovisVectorTilesLayer,
    addGeovisVectorTilesBlueLayer, addGeovisVectorTilesGreenLayer
    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 } from '@gvol-org/open-mapbox-sdk'
     //导入矢量瓦片处理文件
    //mapboxgl-v2.x版本使用
    //import { geovisWorker } from "@gvol-org/open-mapbox-sdk/geovis-worker.js";//mapboxgl-v2.x版本使用

     //mapboxgl-v3.x版本使用
    import { geovisWorker } from "@gvol-org/open-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: '<Token>', map, url })
  //创建矢量图层
  addGeovisMapLayer({ token: '<Token>', map, url })
  //创建地形晕渲
  addGeovisTerrainShadingLayer({ token: '<Token>', map, url })
  //创建地形注记
  addGeovisImageNoteLayer({ token: '<Token>', map, url })
  //添加地形
  addGeovisTerrainLayer({ token: '<Token>', map, url })
  //创建矢量瓦片影像+标记图层
  addGeovisVectorTilesLayer({ token: '<Token>', map, url })

  //创建矢量瓦片图层 - 绿色
  addGeovisVectorTilesGreenLayer({ token: '<Token>', map, url })

    //创建矢量瓦片图层 - 蓝色
  addGeovisVectorTilesBlueLayer({ token: '<Token>', map, url })

  //创建矢量瓦片标记地图
  addGeovisVectorTilesNoteLayer({ token: '<Token>', map, url})

  //创建矢量版地形注记
  addGeovisTerrainNoteLayer({ token: '<Token>', map, url })


    //创建矢量瓦片标记地图
  addGeovisVectorTilesNoteLayer({ token: '<Token>', map, url })

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

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

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

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

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

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

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

  //通过样式对象添加图层
  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 }, '图片路径');

})

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

快速上手

通过CDN引入

html 部分

js 部分

通过 npm 安装