feat: H5 增加绘制 polygon 的能力

packages/uni-h5/src/view/components/map/index.tsx

@@ -29,6 +29,9 @@ import MapLocation, {
   Context as MapLocationContext,
   CONTEXT_ID as MAP_LOCATION_CONTEXT_ID,
 } from './MapLocation'
+import MapPolygon from './map-polygon/index'
+import { eventObj } from './map-polygon/event'
+import { Polygon } from './map-polygon/interface'
 
 const props = {
   id: {
@@ -87,6 +90,10 @@ const props = {
       return []
     },
   },
+  polygons: {
+    type: Array as PropType<Polygon[]>,
+    default: () => [],
+  },
 }
 
 type Props = Record<keyof typeof props, any>
@@ -452,6 +459,8 @@ export default /*#__PURE__*/ defineBuiltInComponent({
     'update:scale',
     'update:latitude',
     'update:longitude',
+    // MapPolygon 组件对外暴露的事件
+    ...Object.values(eventObj),
   ],
   setup(props, { emit, slots }) {
     const rootRef: Ref<HTMLElement | null> = ref(null)
@@ -476,6 +485,9 @@ export default /*#__PURE__*/ defineBuiltInComponent({
             <MapControl {...item} />
           ))}
           {props.showLocation && <MapLocation />}
+          {props.polygons.map((item) => (
+            <MapPolygon {...item} />
+          ))}
           <div style="position: absolute;top: 0;width: 100%;height: 100%;overflow: hidden;pointer-events: none;">
             {slots.default && slots.default()}
           </div>

packages/uni-h5/src/view/components/map/map-polygon/event.ts

+import { Maps } from '../maps'
+import { QQMaps } from '../maps/qq/types'
+import { CustomEventTrigger, EventObj, Polygon } from './interface'
+const { assign, create } = Object
+
+// 事件对象，以腾讯原生事件名为 key，对外暴露的对应事件名为 value
+export const eventObj: 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: Maps,
+  polygonIns: Polygon,
+  trigger: CustomEventTrigger
+) {
+  for (let key in eventObj) {
+    ;(maps as QQMaps).event.addListener(
+      polygonIns,
+      key,
+      function (e: MouseEvent) {
+        // 要对外暴露的事件
+        const eVal = eventObj[key]
+        e ? trigger(eVal, {} as Event, e) : trigger(eVal, {} as Event)
+      }
+    )
+  }
+}

packages/uni-h5/src/view/components/map/map-polygon/index.tsx

+import { inject, watch, onUnmounted } from 'vue'
+import { defineSystemComponent } from '@dcloudio/uni-components'
+import props from './props'
+import {
+  OnMapReady,
+  Polygon,
+  Props,
+  Point,
+  CustomEventTrigger,
+} from './interface'
+import { Map, Maps } from '../maps'
+import { PolygonOptions, QQMaps } from '../maps/qq/types'
+import { eventObj, listenEvent } from './event'
+import { hexToRgba } from '../../../../helpers/hexToRgba'
+
+export default defineSystemComponent({
+  name: 'MapPolygon',
+  props,
+  // https://lbs.qq.com/javascript_v2/doc/polygon.html
+  emits: Object.values(eventObj),
+  // @ts-ignore
+  setup(props: Props, { emit }) {
+    // polygon 实例
+    let polygonIns: Polygon
+    // 当地图准备好以后调用指定的回调函数
+    const onMapReady = inject<OnMapReady>('onMapReady') as OnMapReady
+
+    onMapReady((map: Map, maps: Maps, trigger: CustomEventTrigger) => {
+      // 绘制区域
+      function drawPolygon() {
+        const {
+          points,
+          clickable,
+          cursor,
+          editable,
+          strokeWidth,
+          strokeColor,
+          strokeColorAlpha,
+          strokeDashStyle,
+          fillColor,
+          fillColorAlpha,
+          zIndex,
+          visible,
+        } = props
+
+        const path = points.map((item: Point) => {
+          const { latitude, longitude } = item
+          return new (maps as QQMaps).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: PolygonOptions = {
+          //多边形是否可点击。
+          clickable: clickable || true,
+
+          //鼠标在多边形内的光标样式。
+          cursor: cursor || 'crosshair',
+
+          //多边形是否可编辑。
+          editable,
+
+          //多边形的填充色，可通过Color对象的alpha属性设置透明度。
+          fillColor: new (maps as QQMaps).Color(fcR, fcG, fcB, fillColorAlpha),
+
+          // 地图实例，即要显示多边形的地图
+          // @ts-ignore
+          map,
+
+          //多边形的路径，以经纬度坐标数组构成。
+          path,
+
+          //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
+          strokeColor: new (maps as QQMaps).Color(
+            scR,
+            scG,
+            scB,
+            strokeColorAlpha
+          ),
+
+          //多边形的边框样式。实线是solid，虚线是dash。
+          strokeDashStyle: strokeDashStyle || 'dash',
+
+          //多边形的边框线宽。
+          strokeWeight: strokeWidth || 5,
+
+          //多边形是否可见。
+          visible,
+
+          //多边形的zIndex值。
+          zIndex: zIndex || 1000,
+        }
+
+        if (polygonIns) {
+          // 更新区域属性
+          // @ts-ignore
+          polygonIns.setOptions(polygonOptions)
+          return
+        }
+
+        // 说明是新增区域
+        // @ts-ignore
+        polygonIns = new maps.Polygon(polygonOptions)
+
+        // 监听事件，当对应事件发生时，将事件暴露给用户
+        listenEvent(maps, polygonIns, trigger)
+      }
+
+      // 给地图添加区域
+      drawPolygon()
+      // 监听 props
+      watch(props, drawPolygon)
+    })
+
+    onUnmounted(() => {
+      // 卸载时清除地图上绘制的 polygon
+      polygonIns.setMap(null)
+    })
+    return () => null
+  },
+})

packages/uni-h5/src/view/components/map/map-polygon/interface.ts

+import { Maps, Map } from '../maps'
+import { Polygon as QQPolygon } from '../maps/qq/types'
+import { Polygon as GPolygon } from '../maps/google/types'
+import { useCustomEvent } from '@dcloudio/uni-components'
+import props from './props'
+
+export interface Point {
+  latitude: number
+  longitude: number
+}
+
+export type CustomEventTrigger = ReturnType<typeof useCustomEvent>
+
+type OnMapReadyCallback = (
+  map: Map,
+  maps: Maps,
+  trigger: CustomEventTrigger
+) => void
+
+export type OnMapReady = (callback: OnMapReadyCallback) => void
+
+export type Polygon = QQPolygon | GPolygon
+
+export type Props = Record<keyof typeof props, any>
+
+export interface EventObj {
+  [key: string]: string
+}

packages/uni-h5/src/view/components/map/map-polygon/props.ts

+import { PropType } from 'vue'
+import { Point } from './interface'
+
+// MapPolygon 组件的 props 属性配置
+export default {
+  // 经纬度数组，[{latitude: 0, longitude: 0}]
+  points: {
+    type: Array as PropType<Point[]>,
+    required: true,
+    // validator: (points: Point[]) => {
+    // 	points.forEach(item => {
+    // 		const { longitude, latitude } = item
+    // 		return latitude >= -90 && latitude <= 90 && longitude >= -180 && longitude <= 180
+    // 	})
+    // }
+  },
+  // 多边形是否可点击。
+  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,
+  },
+}

packages/uni-h5/src/view/components/map/maps/google/types.d.ts

@@ -8,3 +8,5 @@ export type Marker = google.maps.Marker
 export type Label = google.maps.MarkerLabel
 export type Circle = google.maps.Circle
 export type Icon = google.maps.Icon
+export type Polygon = google.maps.Polygon
+export type Polygon = google.maps.PolygonOptions

packages/uni-h5/src/view/components/map/maps/qq/types.d.ts

@@ -1330,4 +1330,56 @@ export interface QQMaps {
   Color: typeof Color
   Circle: typeof Circle
   geometry: Geometry
+  Polygon: typeof Polygon
+}
+
+export interface PolygonOptions {
+  // 多边形是否可点击
+  clickable: boolean
+  // 鼠标在多边形内的光标样式
+  cursor: string
+  // true - 启动编辑功能，
+  // false - 默认，不启动编辑功能，
+  // 启动编辑功能后，可拖动端点对形状进行调整，双击节点可删除
+  editable?: boolean
+  // 多边形的填充色，可通过Color对象的alpha属性设置透明度
+  fillColor: Color | string
+  // 要显示多边形的地图。
+  map: Map
+  // 多边形轮廓的坐标数组。若为环多边形，设置为二维数组，第一个元素为外多边形，其他元素为内部“孤岛”轮廓
+  path: Array<LatLng> | Array<Array<LatLng>>
+  // 多边形的线条颜色，可通过Color对象的alpha属性设置透明度
+  strokeColor: Color | string
+  // 多边形的边框样式。实线是solid，虚线是dash
+  strokeDashStyle: string
+  // 多边形的边框线宽
+  strokeWeight: number
+  // 多边形是否可见
+  visible: boolean
+  // 多边形的zIndex值
+  zIndex: number
+}
+
+export class Polygon {
+  constructor(options: PolygonOptions)
+  // 返回多边形的地理区域范围
+  getBounds(): LatLngBounds
+  // 返回多边形所在的map对象
+  getMap(): Map
+  // 获取多边形的经纬度坐标数组。
+  getPath(): MVCArray<LatLng>
+  // 获取多边形覆盖物的可见性
+  getVisible(): boolean
+  // 获取多边形覆盖物的zIndex值
+  getZIndex(): number
+  // 设置多边形所在的map对象
+  setMap(map: Map | null): void
+  // 设置多边形轮廓的经纬度坐标数组，若为二维数组则表现为环多边形
+  setPath(path: Array<LatLng> | Array<Array<LatLng>>): void
+  // 设置多边形的可见性
+  setVisible(visible: boolean): void
+  // 设置多变心覆盖物的zIndex
+  setZIndex(zIndex: number): void
+  // 设置多边形参数
+  setOptions(options: PolygonOptions): void
 }