地图组件库的使用

• 安装组件库

  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