@geovis-earth-sdk/map-raster

v1.0.1

Published

4 days ago

mapbox-gl plugin

Downloads

0High
0Medium
0Low

chuhaoming

快速上手

通过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-earth-sdk/map-raster Demo</title>
  <link rel="stylesheet" href="./@geovis-earth-sdk/map/mapbox-gl.css">
  <script src="./@geovis-earth-sdk/map/mapbox-gl.js"></script>
  <script type="text/javascript" src="./map-raster/map-raster.umd.js"></script>
  <script type="text/javascript" src="../js/Sandcastle-header.js"></script>
</head>
<style>
  #app{
    position: absolute;
    width: 100vw;
    height: 100vh;
  }
</style>
<body>
  <div id="app"></div>
</body>

js 部分

<script type="module">
mapboxgl.accessToken =xxxx

mapboxgl.appInit('xxx', 'xxx')
.then(() => {
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
});

//map对象加载事件处理
map.on('load', () => {
  //创建影像图层
  mapRaster.addGeovisImageLayer({ map })
 //创建矢量图层
 mapRaster.addGeovisMapLayer({ map })
 //创建地形晕渲
 mapRaster.addGeovisTerrainShadingLayer({ map })
//创建地形注记
 mapRaster.addGeovisImageNoteLayer({ map })
  //添加地形
 mapRaster.addGeovisTerrainLayer({ map })
 //添加单张图片瓦片
  mapRaster.addSingleImageLayer({ map })
 //添加瓦片地形
  mapRaster.addRasterTerrainLayer({ map })
//通过sourceId设置图层显隐
 mapRaster.setLayersVisibilityBySource({ map },'sourceId',false);


})



})







</script>

通过 npm 安装

npm i @geovis-earth-sdk/map @geovis-earth-sdk/map-raster ;

    import "@geovis-earth-sdk/map/mapbox-gl.css";
    import mapboxgl from "@geovis-earth-sdk/map";
    import {
        addGeovisImageLayer,
        addSingleImageLayer,
        addGeovisImageNoteLayer,
        addRasterTerrainLayer,
        addGeovisTerrainShadingLayer,
        addGeovisTerrainLayer,
        setLayersVisibilityBySource
        } from '@geovis-earth-sdk/map-raster';


mapboxgl.appInit('xxx', 'xxx')
.then(() => {
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对象加载事件处理
map.on('load', () => {
  //创建影像图层
  addGeovisImageLayer({ map })
  //创建矢量图层
  addGeovisMapLayer({ map })
  //创建地形晕渲
  addGeovisTerrainShadingLayer({ map })
  //创建地形注记
  addGeovisImageNoteLayer({ map })
  //添加地形
  addGeovisTerrainLayer({ map })

 //添加单张图片瓦片
 addSingleImageLayer({ map })
 //添加瓦片地形
  addRasterTerrainLayer({ map })
  //移除矢量注记图层
  //通过sourceId设置图层显隐
  setLayersVisibilityBySource({ map }, 'sourceId', false);


})
})

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

快速上手

通过CDN引入

html 部分

js 部分

通过 npm 安装