<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-maplibre-sdk</title>
<link rel="stylesheet" href="node_modules/maplibre-gl/dist/maplibre-gl.css">
<script src="node_modules/maplibre-gl/dist/maplibre-gl.js"></script>
<script src="node_modules/@gvol-org/geovis-maplibre-sdk/index.js"></script>
</head>
<style>
#app{
position: absolute;
width: 100vw;
height: 100vh;
}
</style>
<body>
<div id="app"></div>
</body>
<script type="module">
//导入矢量瓦片处理文件
import { geovisWorker } from "/node_modules/@gvol-org/geovis-maplibre-sdk/geovis-worker.js";
console.log(geovis)
//星图地球sdk初始化(获得星图地球矢量瓦片加载能力)
geovis.initGeovisEarth(maplibregl, geovisWorker);
const map = new maplibregl.Map({
container: 'app',
style:geovis.getGeovisInitStyle(),//获取初始化样式
center: [-73.935242, 40.730610],
zoom: 2
});
map.on('load', () => {
//创建影像图层
geovis.addGeovisImageLayer({ token: '<GeovisDataCloud Token>', map })
//创建矢量图层
geovis.addGeovisMapLayer({ token: '<GeovisDataCloud Token>', map })
//创建地形晕渲
geovis.addGeovisTerrainShadingLayer({ token: '<GeovisDataCloud Token>', map })
//创建地形注记
geovis.addGeovisImageNoteLayer({ token: '<GeovisDataCloud Token>', map })
//添加地形
geovis.addGeovisTerrainLayer({ token: '<GeovisDataCloud Token>', map })
//创建矢量瓦片影像+标记图层
geovis.addGeovisVectorTilesLayer({ token: '<GeovisDataCloud Token>', map})
//创建矢量瓦片标记地图
geovis.addGeovisVectorTilesNoteLayer({ token: '<GeovisDataCloud Token>', map})
//通过sourceId删除source和layer
geovis.removeLayersBySource({ token: '<GeovisDataCloud Token>', map },'sourceId');
//移除矢量瓦片底图图层
geovis.removeGeovisVectorTilesLayer({ token: '<GeovisDataCloud Token>', map });
//移除矢量注记图层
geovis.removeGeovisVectorTilesNoteLayer({ token: '<GeovisDataCloud Token>', map });
//通过sourceId设置图层显隐
geovis.setLayersVisibilityBySource({ token: '<GeovisDataCloud Token>', map },'sourceId',false);
//添加白模图层
geovis.addGeovisWhiteModelLayer({ token: '<GeovisDataCloud Token>',map:map });
//添加地铁图层
geovis.addGeovisSubwayLayer({ token: '<GeovisDataCloud Token>', id: 'zkxt-vector-tile-subway', map });
//添加经纬网图层
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');
});
</script>
npm i maplibre-gl @gvol-org/geovis-maplibre-sdk
import "maplibre-gl/dist/maplibre-gl.css";
import maplibregl from "maplibre-gl";
import {
initGeovisEarth,
addGeovisImageLayer,
addGeovisSubwayLayer,
addGeoviVectorTiles,addGeoviVectorTilesNote ,
addGeovisTerrainLayer,addGeovisVectorTilesLayer,
addGeovisVectorTilesNoteLayer,getGeovisInitStyle,setLayersVisibilityBySource,removeLayersBySource,removeGeovisVectorTilesLayer,removeGeovisVectorTilesNoteLayer,addGeovisWhiteModelLayer,addGeovisGraticulesLayer,removeGeovisGraticulesLayer, addTianDiTuImageNoteLayer,addTianDiTuImageLayer,addTianDiTuVectorNoteLayer,addTianDiTuVectorLayer, addArcGISOnlineLayer,
addOSMLayer,addGaodeNoteLayer, addGaodeImageLayer,addGaodeVectorLayer,removeOnlineLayer} from '@gvol-org/geovis-maplibre-sdk'
import { geovisWorker } from "@gvol-org/geovis-maplibre-sdk/geovis-worker.js";
//星图地球sdk初始化(获得星图地球矢量瓦片加载能力)
initGeovisEarth(maplibregl,geovisWorker);
// 初始化地球
const map = new maplibregl.Map({
container: 'app',
style:getGeovisInitStyle(),//获取初始化样式
center: [-73.935242, 40.730610],
zoom: 2
});
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 })
//创建矢量瓦片影像+标记图层
addGeovisVectorTilesLayer({ token: '<GeovisDataCloud Token>', map})
//创建矢量瓦片标记地图
addGeovisVectorTilesNoteLayer({ token: '<GeovisDataCloud Token>', map})
//通过sourceId删除source和layer
removeLayersBySource({ token: '<GeovisDataCloud Token>', map },'sourceId');
//移除矢量瓦片底图图层
removeGeovisVectorTilesLayer({ token: '<GeovisDataCloud Token>', map });
//移除矢量注记图层
removeGeovisVectorTilesNoteLayer({ token: '<GeovisDataCloud Token>', map });
//通过sourceId设置图层显隐
setLayersVisibilityBySource({ token: '<GeovisDataCloud Token>', map },'sourceId',false);
//添加白模图层
addGeovisWhiteModelLayer({ token: '<GeovisDataCloud Token>',map:map});
//添加地铁图层
addGeovisSubwayLayer({ token: '<GeovisDataCloud Token>', id: 'zkxt-vector-tile-subway', map });
//添加经纬网图层
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');
});