@geovisapp/mapbox-js-base
v1.0.0
Published
是一套基于Datacloud 地图API的应用程序接口，您可以使用该套SDK简单快捷的创建mapbox地图。
Downloads
75
Readme
快速上手
通过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/[email protected]/dist/mapbox-gl.css">
<script src="https://unpkg.com/[email protected]/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 部分
<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
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);
})