地图组件库的使用
-
安装组件库
npm install m-gis-ui
-
引入组件库
import { defineCustomElements } from 'm-gis-ui/loader'
defineCustomElements()
说明:在项目的入口文件中进行自定义组件的初始化
-
在 Vue 项目中使用
组件的 参数以及事件的配置
均遵循项目基础库中 API
的定义方式进行使用
-
在 React 项目中使用
组件的 参数配置
遵循项目基础库中 API
的定义方式进行使用
组件的 事件配置
通过 addEventListener
监听 事件名称
的方式进行使用
-
注意事项
通过组件的 事件配置
获取组件内部的回调数据,均需从事件对象 event
中获取 detail
属性
组件通信参数中的 复杂数据类型(对象、数组)
都需要通过获取对象后进行传入,参照如下:
document.querySelector('map-toolbar').actions = ['polygon']
工具栏组件
行政区划组件
工具栏编辑面板组件
等时圈组件
地图图例
<map-legend></map-legend>
-
组件配置
参数名称 | 说明 | 类型 | 是否必须 | 默认值 |
---|
visible | 图例的展示状态 | Boolean | false | false |
dataMap | 图例数据 | Array | true | [{label: '图例1', color: '#ff0' }] |
bottom | 距底部的距离 | number | false | 40 |
left | 距左边的距离 | number | false | 40 |