m-gis-ui

地图组件库的使用

• 安装组件库

  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