地图组件库的使用
-
安装组件库
npm install m-gis-ui
-
引入组件库
import { defineCustomElements } from 'm-gis-ui/loader' defineCustomElements()
说明:在项目的入口文件中进行自定义组件的初始化
如果需要支持
IE11
或Edge
浏览器,请参照如下配置:import { applyPolyfills, defineCustomElements } from 'test-components/loader'; applyPolyfills().then(() => { defineCustomElements() })
-
在 Vue 项目中使用
组件的
参数以及事件的配置
均遵循项目基础库中API
的定义方式进行使用 -
在 React 项目中使用
组件的
参数配置
遵循项目基础库中API
的定义方式进行使用组件的
事件配置
通过addEventListener
监听事件名称
的方式进行使用 -
注意事项
通过组件的
事件配置
获取组件内部的回调数据,均需从事件对象event
中获取detail
属性组件通信参数中的
复杂数据类型(对象、数组)
都需要通过获取对象后进行传入,参照如下:document.querySelector('map-toolbar').actions = ['polygon']
工具栏组件
-
组件使用
<map-toolbar></map-toolbar>
-
组件参数配置
Property Attribute Description Type Default actions
-- 工具栏自定义操作配置项 string[]
[]
gis
(required)gis
地图基础库源对象 any
undefined
infoWindowContent
-- 自定义信息窗体内容 HTMLElement
undefined
isClear
is-clear
工具栏清空操作的显示状态 boolean
false
mapInstance
(required)map-instance
地图实例 any
undefined
markerIconOptions
-- 工具栏 Marker 图标配置项 {}
{}
mode
mode
工具栏视图模式:tile 平铺显示、tooltip 工具提示 string
'tooltip'
offset
offset
组件距离相对容器的顶部偏移量 number | string
15
operations
-- 工具栏操作项源数据 any[]
[]
overlayOptions
-- 工具栏鼠标绘制区域的风格配置项 {}
{}
placement
placement
工具栏显示位置:left、right、center string
'right'
visible
visible
组件显示状态 boolean
false
-
组件事件通信
Event Description Type drawEnd
鼠标工具绘制覆盖物结束时触发的通信事件 CustomEvent<any>
loadDistrict
点击加载行政区划时触发的通信事件 CustomEvent<any>
-
操作配置项类型说明
操作名称 说明 district 加载行政区划 marker 添加点数据 polyline 添加线数据 polygon 添加面数据 circle 添加圆形区域 rectangle 添加矩形区域 lineAlongTheRoad 沿路划线 perimeterSearch 周边搜索 polySelect 多边形选择 distanceMeasurement 距离量算 areaMeasurement 面积量算 isochron 等时圈
行政区划组件
-
组件使用
<map-district></map-district>
-
组件参数配置
Property Attribute Description Type Default childrenAlias
children-alias
行政区划子节点字段别名 string
'children'
codeAlias
code-alias
行政区划代码字段别名 string
'code'
nameAlias
name-alias
行政区划名称字段别名 string
'name'
source
-- 行政区划源数据 any[]
[]
visible
visible
组件显示状态 boolean
false
-
组件事件通信
Event Description Type cancel
点击取消时触发的通信事件 CustomEvent<any>
confirm
点击确定时触发的通信事件 CustomEvent<any>
工具栏编辑面板组件
-
组件使用
<map-toolbar-edit-panel></map-toolbar-edit-panel>
-
组件参数配置
Property Attribute Description Type Default actionType
(required)action-type
工具栏操作类型 string
undefined
visible
visible
组件显示状态 boolean
false
-
组件事件通信
Event Description Type cancel
点击取消时触发的通信事件 CustomEvent<any>
confirm
点击确定时触发的通信事件 CustomEvent<any>
等时圈组件
-
组件使用
<map-isochron></map-isochron>
-
组件参数配置
Property Attribute Description Type Default title
title
title string
地图图例
- 组件使用
<map-legend></map-legend>
-
组件配置
参数名称 说明 类型 是否必须 默认值 visible 图例的展示状态 Boolean false false dataMap 图例数据 Array true [{label: '图例1', color: '#ff0', icon: 'http://...' }] bottom 距底部的距离 number false 40 left 距左边的距离 number false 40 height 图例的高度 number false 14 width 图例的宽度 number false 14