@gvol-org/player
v1.1.5
Published
专门为了兼容studio场景加载做的geo-studio-player插件
Downloads
2
Keywords
Readme
快速上手
script 引入
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 href="node_modules\mapbox-gl-encrypted/dist/mapbox-gl.css" rel="stylesheet">
<script src="node_modules\mapbox-gl-encrypted"></script>
<script src="node_modules\@gvol-org/geovis-mapbox-sdk"></script>
</head>
<style>
#app{
position: absolute;
width: 100vw;
height: 100vh;
}
</style>
<body>
<div id="app"></div>
</body>
js 部分
console.log(geovis)
const map = new mapboxgl.Map({
container: 'app',
style:geovis.getGeovisInitStyle(),//获取初始化样式
center: [-73.935242, 40.730610],
zoom: 2,
projection: 'globe'
});
//创建影像图层
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.addGeovisSubwayLayer({ token: '<GeovisDataCloud Token>', id: 'zkxt-vector-tile-subway', map });
通过 npm 安装
npm i mapbox-gl-encrypted @gvol-org/geovis-mapbox-sdk
import "mapbox-gl-encrypted/dist/mapbox-gl.css";
import mapboxgl from "mapbox-gl-encrypted";
import {
addGeovisImageLayer,addGeovisTerrainByToken,
addGeoviVectorTiles,addGeoviVectorTilesNote ,
addGeovisTerrainLayer,addGeovisVectorTilesLayer,
addGeovisVectorTilesNoteLayer,getGeovisInitStyle,setLayersVisibilityBySource,removeLayersBySource,removeGeovisVectorTilesLayer,removeGeovisVectorTilesNoteLayer,addGeovisSubwayLayer} from '@gvol-org/geovis-mapbox-sdk'
// 初始化地球
const map = new mapboxgl.Map({
container: 'app',
style:getGeovisInitStyle(),//获取初始化样式
center: [-73.935242, 40.730610],
zoom: 2,
projection: 'globe'
});
//创建影像图层
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);
//添加地铁图层
addGeovisSubwayLayer({ token: '<GeovisDataCloud Token>', id: 'zkxt-vector-tile-subway', map });