open-index/open-npm huggingface dataset:
npm package: @geovisapp/mapbox-js-base
Description: 是一套基于Datacloud 地图API的应用程序接口，您可以使用该套SDK简单快捷的创建mapbox地图。
Latest version: 1.0.1

# 快速上手

## 通过CDN引入

### html 部分

```js

<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.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/@geovisapp/mapbox-js-base/index.js"></script>
</head>
<style>
  #app{
    position: absolute;
    width: 100vw;
    height: 100vh;
  }
</style>
<body>
  <div id="app"></div>
</body>

```

#### js 部分

```js
<script type="module">
mapboxgl.accessToken =xxxx
const map = new mapboxgl.Map({
  container: 'app',
   style: {
    "version": 8,
    "sources": {
    },
    "layers": [
    ]
  },
  zoom: 2,
  minZoom: 1,
  center: [116.39104, 39.90502],
   projection: { name: 'globe' },
  hash: true
  // useWebGL2: true
});



//map对象加载事件处理
map.on('load', () => {
  //创建影像图层
  geovisRaster.addGeovisImageLayer({ token: '<GeovisDataCloud Token>', map })
 //创建矢量图层
 geovisRaster.addGeovisMapLayer({ token: '<GeovisDataCloud Token>', map })
 //创建地形晕渲
 geovisRaster.addGeovisTerrainShadingLayer({ token: '<GeovisDataCloud Token>', map })
//创建地形注记
 geovisRaster.addGeovisImageNoteLayer({ token: '<GeovisDataCloud Token>', map })
  //添加地形
 geovisRaster.addGeovisTerrainLayer({ token: '<GeovisDataCloud Token>', map })

//通过sourceId设置图层显隐
 geovisRaster.setLayersVisibilityBySource({ token: '<GeovisDataCloud Token>', map },'sourceId',false);


})


</script>
```

## 通过 npm 安装

> npm i  mapbox-gl   @geovisapp/mapbox-js-base

```js
    import "mapbox-gl/dist/mapbox-gl.css";
    import mapboxgl from "mapbox-gl";
    import {
        addGeovisImageLayer,
  addGeovisImageNoteLayer,
   addGeovisTerrainShadingLayer,
  addGeovisTerrainLayer,
  setLayersVisibilityBySource,} from '@geovisapp/mapbox-js-base'


const map = new mapboxgl.Map({
  container: 'app',
style: {
    "version": 8,
    "sources": {
    },
    "layers": [
    ]
  },
  zoom: 2,
  minZoom: 1,
  center: [116.39104, 39.90502],
   projection: { name: 'globe' },
  hash: true
  // useWebGL2: true
});
//@ts-ignore
map._authenticate = () => { } // 绕过token


//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 })


  //移除矢量注记图层
  //通过sourceId设置图层显隐
  setLayersVisibilityBySource({ token: '<GeovisDataCloud Token>', map }, 'sourceId', false);


})