@gvol-org/player NPM

快速上手

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 });

@everything-registry/sub-chunk-380

1.1.5

5 months ago

1.0.0

1 year ago