feat: H5 增加绘制 polygon 的能力

src/platforms/h5/view/components/map/index.vue

@@ -8,6 +8,11 @@
       :key="item.id"
       v-bind="item"
     />
+    <map-polygon
+      v-for="item in polygons"
+      :key="JSON.stringify(item)"
+      v-bind="item"
+    />
     <div
       ref="map"
       style="width: 100%; height: 100%; position: relative; overflow: hidden"
@@ -37,6 +42,7 @@ import {
 } from './maps'
 
 import mapMarker from './map-marker'
+import mapPolygon from './map-polygon/index'
 
 import { ICON_PATH_ORIGIN } from '../../../helpers/location'
 
@@ -59,7 +65,8 @@ function getLng (latLng) {
 export default {
   name: 'Map',
   components: {
-    mapMarker
+    mapMarker,
+    mapPolygon
   },
   mixins: [subscriber],
   props: {
@@ -124,6 +131,10 @@ export default {
       default () {
         return []
       }
+    },
+    polygons: {
+      type: Array,
+      default: () => []
     }
   },
   data () {

src/platforms/h5/view/components/map/map-polygon/event.js

+const { assign, create } = Object
+
+// 事件对象，以腾讯原生事件名为 key，对外暴露的对应事件名为 value
+export const eventObj = assign(create(null), {
+  // 当此多边形所在地图更改时会触发此事件
+  map_changed: 'polygonmapchanged',
+  // 当此多边形可见性更改时会触发此事件
+  visible_changed: 'polygonvisiblechanged',
+  // 当此多边形zIndex更改时会触发此事件
+  zindex_changed: 'polygonzindexchange',
+  // 点击此多边形后会触发此事件
+  click: 'polygontap',
+  // 双击多边形后会触发此事件
+  dblclick: 'polygondblclick',
+  // 右键点击多边形后会触发此事件
+  rightclick: 'polygonrightclick',
+  // 鼠标在多边形内按下触发此事件
+  mousedown: 'polygonmousedown',
+  // 鼠标在多边形上抬起时触发此事件
+  mouseup: 'polygonmouseup',
+  // 当鼠标进入多边形区域时会触发此事件
+  mouseover: 'polygonmouseover',
+  // 鼠标离开多边形时触发此事件
+  mouseout: 'polygonmouseout',
+  // 鼠标在多边形内移动时触发此事件
+  mousemove: 'polygonmousemove',
+  // 编辑多边形添加节点时触发此事件
+  insertNode: 'polygoninsertnode',
+  // 编辑多边形删除节点时触发此事件
+  removeNode: 'polygonremovenode',
+  // 编辑多边形移动节点时触发此事件
+  adjustNode: 'polygonadjustnode'
+})
+
+/**
+ * 监听事件，当对应事件发生时，将事件暴露给用户
+ */
+export function listenEvent (
+  maps,
+  polygonIns,
+  trigger
+) {
+  for (const key in eventObj) {
+    maps.event.addListener(polygonIns, key, function (e) {
+      // 要对外暴露的事件
+      const eVal = eventObj[key]
+      e ? trigger(eVal, {}, e) : trigger(eVal, {})
+    })
+  }
+}

src/platforms/h5/view/components/map/map-polygon/index.js

+import { hexToRgba } from 'uni-shared'
+import { listenEvent } from './event'
+
+// 变量声明放外面，而不是放组件实例上的原因也是和下面 $watch 部分描述的问题有关
+let polygonIns = null
+
+export default {
+  props: {
+    // 经纬度数组，[{latitude: 0, longitude: 0}]
+    points: {
+      type: Array,
+      required: true
+    },
+    // 多边形是否可点击。
+    clickable: {
+      type: Boolean
+    },
+    // 鼠标在多边形内的光标样式。
+    cursor: {
+      type: String
+    },
+    // 区域是否可编辑
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    // 多边形是否可见。
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    // 描边的宽度
+    strokeWidth: {
+      type: Number
+    },
+    // 描边的颜色，十六进制
+    strokeColor: {
+      type: String
+    },
+    // 描边的透明度，[0-1]
+    strokeColorAlpha: {
+      type: Number,
+      default: 1
+    },
+    // 多边形的边框样式。实线是solid，虚线是dash。
+    strokeDashStyle: {
+      type: String
+    },
+    // 填充颜色，十六进制
+    fillColor: {
+      type: String
+    },
+    // 设置填充色的透明度，[0-1]
+    fillColorAlpha: {
+      type: Number,
+      default: 1
+    },
+    // 设置多边形 Z 轴数值
+    zIndex: {
+      type: Number
+    }
+  },
+  mounted () {
+    const { $parent } = this
+    // 当地图准备好以后调用指定的回调函数
+    $parent.mapReady(() => {
+      this.drawPolygon()
+
+      // 遍历 props 对象，观察其中的每个属性，当属性发生变化时，更新地图上的 polygon
+      Object.keys(this.$props).forEach(key => {
+        /**
+         * 这段其实暂时没有用，因为 props 更新时组件会重新挂载，而不是直接更新。
+         * 问题可能出在 uni-app 重写 Vue 时某些地方有问题。
+         * 但先留着这部分内容，防止以后 uni-app 修复该问题后 polygon 更新出问题
+         */
+        this.$watch(key, () => {
+          this.drawPolygon()
+        }, { deep: true })
+      })
+    })
+  },
+  methods: {
+    // 绘制区域
+    drawPolygon () {
+      // polygon 组件的 props 配置
+      const {
+        points,
+        clickable,
+        cursor,
+        editable,
+        strokeWidth,
+        strokeColor,
+        strokeColorAlpha,
+        strokeDashStyle,
+        fillColor,
+        fillColorAlpha,
+        zIndex,
+        visible
+      } = this
+
+      // 从父组件解析 _maps、_map 和 $trigger，下面要用
+      const { _maps, _map } = this.$parent
+
+      const path = points.map(item => {
+        const { latitude, longitude } = item
+        return new _maps.LatLng(latitude, longitude)
+      })
+
+      // 将 16 进制的色值转换为 rgb 的格式
+      const { r: fcR, g: fcG, b: fcB } = hexToRgba(fillColor || '#5f9ea0')
+      const { r: scR, g: scG, b: scB } = hexToRgba(strokeColor || '#000000')
+
+      const polygonOptions = {
+        // 多边形是否可点击。
+        clickable: clickable || true,
+
+        // 鼠标在多边形内的光标样式。
+        cursor: cursor || 'crosshair',
+
+        // 多边形是否可编辑。
+        editable,
+
+        // 多边形的填充色，可通过Color对象的alpha属性设置透明度。
+        fillColor: new _maps.Color(fcR, fcG, fcB, fillColorAlpha),
+
+        // 地图实例，即要显示多边形的地图
+        // @ts-ignore
+        map: _map,
+
+        // 多边形的路径，以经纬度坐标数组构成。
+        path,
+
+        // 多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
+        strokeColor: new _maps.Color(scR, scG, scB, strokeColorAlpha),
+
+        // 多边形的边框样式。实线是solid，虚线是dash。
+        strokeDashStyle: strokeDashStyle || 'dash',
+
+        // 多边形的边框线宽。
+        strokeWeight: strokeWidth || 5,
+
+        // 多边形是否可见。
+        visible,
+
+        // 多边形的zIndex值。
+        zIndex: zIndex || 1000
+      }
+
+      if (polygonIns) {
+        // 更新区域属性
+        polygonIns.setOptions(polygonOptions)
+        return
+      }
+
+      // 说明是新增区域
+      polygonIns = new _maps.Polygon(polygonOptions)
+
+      // 监听事件，当对应事件发生时，将事件暴露给用户
+      listenEvent(_maps, polygonIns, this.$parent.$trigger)
+    }
+  },
+  // 卸载时清除地图上绘制的 polygon
+  beforeDestroy () {
+    polygonIns.setMap(null)
+    polygonIns = null
+  },
+  render () {
+    return null
+  }
+}