星图云开放平台
最新活动
产品能力
解决方案
星图云
服务与支持
生态合作
关于星图
基础地图SDK接口
更新时间：2025-09-25 15:49:09
接口说明

快速上手

通过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/mapbox-gl@v3.4.0/dist/mapbox-gl.css">
  <script src="https://unpkg.com/mapbox-gl@v3.4.0/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, https://api.open.geovisearth.com/map/v1/img/{z}/{x}/{y} })
  //创建矢量图层
  geovis.addGeovisMapLayer({ token: '<Token>', map, https://api.open.geovisearth.com/map/v1/vec/{z}/{x}/{y} })
  //创建地形晕渲
  geovis.addGeovisTerrainShadingLayer({ token: '<Token>', map, https://api.open.geovisearth.com/map/v1/ter/{z}/{x}/{y} })
  //创建栅格版地形注记
  geovis.addGeovisImageNoteLayer({ token: '<Token>', map, https://api.open.geovisearth.com/map/v1/cat/{z}/{x}/{y} })

  //创建矢量版地形注记
  geovis.addGeovisTerrainNoteLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/base/v1/terrain-label/{z}/{x}/{y} })

  //添加地形
  geovis.addGeovisTerrainLayer({ token: '<Token>', map, https://api.open.geovisearth.com/map/v1/terrain_rgb/{z}/{x}/{y} })
  //创建矢量版电子地图
  geovis.addGeovisVectorTilesLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/base/v1/vector/{z}/{x}/{y}})
  //创建矢量版影像注记
   geovis.addGeovisVectorTilesNoteLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/base/v1/vector-label/{z}/{x}/{y}})

  //通过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);

  //添加水系图层
  geovis.addGeovisRiversLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/plus/v1/hyda_rivers/{z}/{x}/{y} });

  //添加湖泊图层
  geovis.addGeovisLakesLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/plus/v1/hyda_lakes/{z}/{x}/{y} });

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

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

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


  //在线地图
  //添加天地图矢量图层,默认图层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 mapbox-gl@3.4.0 @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', () => {
  //创建影像图层
  geovis.addGeovisImageLayer({ token: '<Token>', map, https://api.open.geovisearth.com/map/v1/img/{z}/{x}/{y} })
  //创建矢量图层
  geovis.addGeovisMapLayer({ token: '<Token>', map, https://api.open.geovisearth.com/map/v1/vec/{z}/{x}/{y} })
  //创建地形晕渲
  geovis.addGeovisTerrainShadingLayer({ token: '<Token>', map, https://api.open.geovisearth.com/map/v1/ter/{z}/{x}/{y} })
  //创建地形注记
  addGeovisImageNoteLayer({ token: '<Token>', map, https://api.open.geovisearth.com/map/v1/cat/{z}/{x}/{y} })
  //添加地形
  addGeovisTerrainLayer({ token: '<Token>', map, https://api.open.geovisearth.com/map/v1/terrain_rgb/{z}/{x}/{y} })

  //创建矢量瓦片影像+标记图层
  addGeovisVectorTilesLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/base/v1/vector/{z}/{x}/{y} })

  //创建矢量瓦片图层 - 绿色
  addGeovisVectorTilesGreenLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/base/v1/vector/{z}/{x}/{y} })

    //创建矢量瓦片图层 - 蓝色
  addGeovisVectorTilesBlueLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/base/v1/vector/{z}/{x}/{y} })

  //创建矢量瓦片标记地图
  addGeovisVectorTilesNoteLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/base/v1/vector-label/{z}/{x}/{y}})

  //创建矢量版地形注记
  addGeovisTerrainNoteLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/base/v1/terrain-label/{z}/{x}/{y} })


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

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

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

  //添加水系图层
  addGeovisRiversLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/plus/v1/hyda_rivers/{z}/{x}/{y} });

  //添加湖泊图层
  addGeovisLakesLayer({ token: '<Token>', map, https://api.open.geovisearth.com/pj/plus/v1/hyda_lakes/{z}/{x}/{y} });

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

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

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

  //在线地图
  //添加天地图矢量图层,默认图层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 }, '图片路径');
})

 

 

 

 

 

还有疑问？联系在线客服，非技术问题在线解答

本页目录

接口说明
遥感数据安全可靠
经国家审图中心审核发布
客户价值始终优先
从数据价值到创造客户价值
专业服务极速应答
秒级应答为业务保驾护航
服务生态联盟共进
共建生态系统同伙伴一起创新
  • 服务与支持
  • 帮助中心
  • 服务协议
  • 隐私政策
  • 生态合作
  • 商务合作
  • 生态招募
  • 友情链接
  • 中科星图股份有限公司
  • 星图地球今日影像
  • 星图地球数据云
  • 星图地球智脑引擎
  • 冰柏科技(中测智绘)
  • 联系我们
  • 电话：400-822-6660转1
  • 邮箱：open@geovis.com.cn

  • 地址：

    中国(安徽)自由贸易试验区合肥市高新区望江西路900号中安创谷科技园一期A1楼36层
星图云开放平台
星图云开放平台官方公众号
官方公众号

热门推荐

在线地图API天气预报API影像智能处理大数据可视化SDK低代码平台卫星遥感影像数据矢量瓦片数据火情API建筑物高度估计建筑物变化监测影像超分地块提取大棚提取林地提取水体提取光伏选址

解决方案

农业保险林业保险碳星球智慧水利智慧矿山森林防火智慧交通生态环境监测综合应急管理地理创新实验室智慧城市CIM空间数据生产公益诉讼数字孪生工程智慧农场旱情分析评价

热门搜索

天气预报服务卫星影像地图建筑物提取无人机采集数据可视化低代码开发时空大数据农作物遥感监测林业遥感监测数据治理中台航迹大师地理信息云服务基础数据处理高标准农田河湖生态遥感监测水旱灾害防御
协议与声明 | © 中科星图 版权所有
由中科星图股份有限公司与中科星图数字地球合肥有限公司联合运营
增值电信业务经营许可证：
皖B2-20220129 | 皖ICP备2022003461号-1 | 皖公网安备 34019202001857号 | 甲测资字34100640、乙测资字34509016