gis 使用说明

介绍

该组件库为Vue3 的GIS组件库，并依赖Echart库，所以在安装该组件库前确保是Vue3 和echart 5.0以上版本。

组件库使用方式（以下选择任意一种安装，若没有echart则需要提前安装）

• npm

npm i gis-app

• yarn

yarn add gis-app

• pnpm

pnpm i gis-app

使用说明及demo

//全局引用
import GisMap from 'gis-app'
import 'gis-app/dist/style.css'
const app=createApp(App)
// 引入 GisMap
app.use(GisMap)
app.mount('#app')

组件示例

<gis-app ref="myMap"  :map-config="state.mapConfig" :menu-config="state.menuConfig" @mapLoadComplete="mapLoadComplete" @drawTerra="drawTerra" @menuSelect="menuSelect" @getDrawData="getDrawData"></gis-app>

1、:mapConfig

mapConfig: {
    id: 'map', // 地图容器id
    center: [116.404, 39.915], // 地图中心点
    zoom: 10, // 地图缩放级别
    baseMap: 'http://www.pcep.cloud/A4/A4Service/TileService.ashx?Type=VECMIX&l={z}&r={y}&c={x}&token=36c34f06-5525-4fa1-a081-5aa27f3d07cf', // 底图地址
    layers: [// 图层
        {
          'id': 'earthquakes', // 图层id  必穿
          'type': 'circle', 必穿
          // 图层类型
          // fill: 带有可选描边边框的填充多边形.
          // line: 一条划过的线。
          // symbol: 图标或文本标签.
          // circle: 一个完整的圆圈。
          // heatmap: 热图
          // fill-extrusion: 拉伸（3D）多边形。
          // raster: 光栅贴图纹理，如卫星图像。
          // hillshade: 基于DEM数据的客户端山坡可视化。该实现支持Mapbox Terrain RGB、Mapzen Terrarium图块和自定义编码。
          // background: 地图的背景颜色或图案。
          metadata: {"source:comment": "Hydrology FCCODE 460 - Narrow wash"}
          // 任意属性可用于跟踪图层，但不会影响渲染。应为属性添加前缀以避免冲突，例如“maplibre：”。
          source: { //用于该层的源描述的名称。所有图层类型都需要，除了   必穿
            type: 'geojson',
            data: 'https://maplibre.org/maplibre-gl-js/docs/assets/earthquakes.geojson'
          },
          minzoom: [0, 24], // 图层的最小缩放级别。在小于minzoom的缩放级别时，图层将被隐藏。
          maxzoom: [0, 24], // 图层的最大缩放级别。在缩放级别等于或大于maxzoom时，图层将被隐藏
          filter: ['==', 'mag', 2.75], // 过滤器表达式，用于确定哪些要素应该被渲染。
          fill-opacity: 1, // 图层的不透明度。介于0和1之间，默认为1
          'paint': {// 绘制属性，用于控制图层在地图上的渲染方式。每种类型的图层都有一组特定的绘制属性。
             'circle-color': '#ff0000'
           }
        }
    ], 
}