@gvol-org/geovis-maplibre-sdk

v1.0.1

Published

11 days ago

是一套基于Datacloud 地图API的应用程序接口，您可以使用该套SDK简单快捷的创建maplibre地图。

Downloads

0High
0Medium
0Low

快速上手

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-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>

js 部分

<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 安装

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

快速上手

script 引入

html 部分

js 部分

通过 npm 安装