# 快速上手
## 通过 CDN 引入
### html 部分
```js
open-mapbox-sdk
```
#### js 部分
```js
```
## 通过 npm 安装
> npm i mapbox-gl@3.4.0 @gvol-org/open-mapbox-sdk
```js
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,'');
// 初始化地球
const map = new mapboxgl.Map({
container: 'app',
style:getGeovisInitStyle(),//获取初始化样式
center: [-73.935242, 40.730610],
zoom: 2,
projection: 'globe'
});
//map对象加载事件处理
map.on('load', () => {
//创建影像图层
addGeovisImageLayer({ token: '', map, url })
//创建矢量图层
addGeovisMapLayer({ token: '', map, url })
//创建地形晕渲
addGeovisTerrainShadingLayer({ token: '', map, url })
//创建地形注记
addGeovisImageNoteLayer({ token: '', map, url })
//添加地形
addGeovisTerrainLayer({ token: '', map, url })
//创建矢量瓦片影像+标记图层
addGeovisVectorTilesLayer({ token: '', map, url })
//创建矢量瓦片图层 - 绿色
addGeovisVectorTilesGreenLayer({ token: '', map, url })
//创建矢量瓦片图层 - 蓝色
addGeovisVectorTilesBlueLayer({ token: '', map, url })
//创建矢量瓦片标记地图
addGeovisVectorTilesNoteLayer({ token: '', map, url})
//创建矢量版地形注记
addGeovisTerrainNoteLayer({ token: '', map, url })
//创建矢量瓦片标记地图
addGeovisVectorTilesNoteLayer({ token: '', map, url })
//通过sourceId删除source和layer
removeLayersBySource({ token: '', map }, 'sourceId');
//移除矢量瓦片底图图层
removeGeovisVectorTilesLayer({ token: '', map });
//移除矢量注记图层
removeGeovisVectorTilesNoteLayer({ token: '', map });
//通过sourceId设置图层显隐
setLayersVisibilityBySource({ token: '', map }, 'sourceId', false);
//添加地铁图层
addGeovisSubwayLayer({ token: '', id: 'zkxt-vector-tile-subway', map });
//添加白模图层,默认为矢量瓦片格式加载。当type参数为 pbf时， 使用的mapbox pbf格式有地形加载; 当type参数为3dtiles_ter时，使用3dtiles格式有地形加载;当type参数为3dtiles时，使用3dtiles格式无地形加载。
addGeovisWhiteModelLayer({ token: '', type: 'pbf', map, url });
//添加水系图层
addGeovisRiversLayer({ token: '', map, url });
// // 移除水系图层
// removeGeovisRiversLayer({ token: '', map});
//添加湖泊图层
addGeovisLakesLayer({ token: '', map, url });
// // 移除湖泊图层
// removeGeovisLakesLayer({ token: '', map});
//添加道路图层
addGeovisRoadsLayer({ token: '', map, url });
// // 移除道路图层
// removeGeovisRoadsLayer({ 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 }, '图片路径');
})
```