@geovisapp/mapbox-js-vector

v1.0.1

Published

a month ago

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

Downloads

0High
0Medium
0Low

chuhaoming

geovis-app

快速上手

通过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-vector/index.js"></script>
</head>
<style>
  #app{
    position: absolute;
    width: 100vw;
    height: 100vh;
  }
</style>
<body>
  <div id="app"></div>
</body>

js 部分

<script type="module">
   //导入矢量瓦片处理文件
   //mapboxgl-v2.x版本使用
  // import { geovisWorker } from "https://unpkg.com/@geovisapp/mapbox-js-vector/geovis-worker.js";//mapboxgl-v2.x版本使用

   //mapboxgl-v3.x版本使用
  import { geovisWorker } from "https://unpkg.com/@geovisapp/mapbox-js-vector/geovis-worker-v3.js";//mapboxgl-v3.x版本使用
  console.log(geovis)

geovisVector.getGeovisWorker(geovisWorker);//加载矢量服务需要 其他时候不需要
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', () => {


 geovisVector.addGeovisVectorTilesLayer({ token: '<GeovisDataCloud Token>', map})
   //创建矢量瓦片标记地图
 geovisVector.addGeovisVectorTilesNoteLayer({ token: '<GeovisDataCloud Token>', map})

 //通过sourceId删除source和layer
 geovisVector.removeLayersBySource({ token: '<GeovisDataCloud Token>', map },'sourceId');

//移除矢量瓦片底图图层
 geovisVector.removeGeovisVectorTilesLayer({ token: '<GeovisDataCloud Token>', map });

//移除矢量注记图层
 geovisVector.removeGeovisVectorTilesNoteLayer({ token: '<GeovisDataCloud Token>', map });



})


</script>

通过 npm 安装

npm i mapbox-gl @geovisapp/mapbox-js-vector

    import "mapbox-gl/dist/mapbox-gl.css";
    import mapboxgl from "mapbox-gl";
    import {
       getGeovisWorker,
  addGeovisVectorTilesLayer,
  addGeovisVectorTilesNoteLayer,
   removeLayersBySource, removeGeovisVectorTilesNoteLayer, removeGeovisVectorTilesLayer} from '@geovisapp/mapbox-js-vector'
     //导入矢量瓦片处理文件
    //mapboxgl-v2.x版本使用
    //import { geovisWorker } from "@geovisapp/mapbox-js-vector/geovis-worker.js";//mapboxgl-v2.x版本使用

     //mapboxgl-v3.x版本使用
    import { geovisWorker } from "@geovisapp/mapbox-js-vector/geovis-worker-v3.js";//mapboxgl-v3.x版本使用


getGeovisWorker(geovisWorker);//加载矢量服务需要 其他时候不需要
const map = new mapboxgl.Map({
  container: 'app',
  style: getGeovisInitStyle(),
  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', () => {
  //添加地形
  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 });


})

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

快速上手

通过CDN引入

html 部分

js 部分

通过 npm 安装