feat: 1、polygon 暴露的属性、事件对齐微信小程序；2、兼容 google 地图

packages/uni-h5/src/helpers/hexToRgba.ts

-export function hexToRgba(hex: string) {
-  let r
-  let g
-  let b
-  hex = hex.replace('#', '')
-  if (hex.length === 6) {
-    r = hex.substring(0, 2)
-    g = hex.substring(2, 4)
-    b = hex.substring(4, 6)
-  } else if (hex.length === 3) {
-    r = hex.substring(0, 1)
-    g = hex.substring(1, 2)
-    b = hex.substring(2, 3)
-  } else {
-    return { r: 0, g: 0, b: 0 }
+/**
+ * 从 16 进制的色值解析成 rgba 格式的色值
+ * @param { string } hex, #000、#000A、#000000、#000000AA，参数只能是这四种格式
+ */
+export function hexToRgba(hex: string): RGBA {
+  // 异常情况
+  if (!hex) {
+    return {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0,
+    }
   }
-  if (r.length === 1) {
-    r += r
+  // 去掉 #
+  let tmpHex = hex.slice(1)
+  const tmpHexLen = tmpHex.length
+  // 处理 16 进制色值位数异常的情况
+  if (![3, 4, 6, 8].includes(tmpHexLen)) {
+    return {
+      r: 0,
+      g: 0,
+      b: 0,
+      a: 0,
+    }
   }
-  if (g.length === 1) {
-    g += g
+  // 格式化 tmpHex，使其变成 rrggbb 或 rrggbbaa
+  if (tmpHexLen === 3 || tmpHexLen === 4) {
+    // rgb => rrggbb || rgba => rrggbbaa
+    tmpHex = tmpHex.replace(/(\w{1})/g, 'r1r1')
   }
-  if (b.length === 1) {
-    b += b
+  // r1 ~ a2
+  const [ r1, r2, g1, g2, b1, b2, a1, a2 ] = tmpHex.match(/(\w{1})/g) as string[]
+  // rgb
+  const r = parseInt(r1) * 16 + parseInt(r2), g = parseInt(g1) * 16 + parseInt(g2), b = parseInt(b1) * 16 + parseInt(b2)
+
+  if (!a1) {
+    return { r, g, b, a: 1 }
   }
-  r = parseInt(r, 16)
-  g = parseInt(g, 16)
-  b = parseInt(b, 16)
+
   return {
-    r,
-    g,
-    b,
+    r, g, b, a: (`0x100${a1}${a2}` as unknown as number - 0x10000) / 255
   }
 }
+
+export interface RGBA {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+} 
\ No newline at end of file

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'
+import { CustomEventTrigger, EventObj } 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',
 })
 
 /**
@@ -40,11 +14,11 @@ export const eventObj: EventObj = assign(create(null), {
  */
 export function listenEvent(
   maps: Maps,
-  polygonIns: Polygon,
+  polygonIns: HTMLElement,
   trigger: CustomEventTrigger
 ) {
   for (let key in eventObj) {
-    ;(maps as QQMaps).event.addListener(
+    ;(maps as QQMaps).event.addDomListener(
       polygonIns,
       key,
       function (e: MouseEvent) {

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

@@ -7,9 +7,10 @@ import {
   Props,
   Point,
   CustomEventTrigger,
+  PolygonOptions,
 } from './interface'
 import { Map, Maps } from '../maps'
-import { PolygonOptions, QQMaps } from '../maps/qq/types'
+import { QQMaps } from '../maps/qq/types'
 import { eventObj, listenEvent } from './event'
 import { hexToRgba } from '../../../../helpers/hexToRgba'
 
@@ -18,8 +19,7 @@ export default defineSystemComponent({
   props,
   // https://lbs.qq.com/javascript_v2/doc/polygon.html
   emits: Object.values(eventObj),
-  // @ts-ignore
-  setup(props: Props, { emit }) {
+  setup(props: Props) {
     // polygon 实例
     let polygonIns: Polygon
     // 当地图准备好以后调用指定的回调函数
@@ -30,82 +30,83 @@ export default defineSystemComponent({
       function drawPolygon() {
         const {
           points,
-          clickable,
-          cursor,
-          editable,
           strokeWidth,
           strokeColor,
-          strokeColorAlpha,
-          strokeDashStyle,
+          dashArray,
           fillColor,
-          fillColorAlpha,
           zIndex,
-          visible,
         } = props
 
         const path = points.map((item: Point) => {
           const { latitude, longitude } = item
-          return new (maps as QQMaps).LatLng(latitude, longitude)
+          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 { r: fcR, g: fcG, b: fcB, a: fcA } = hexToRgba(fillColor)
+        const { r: scR, g: scG, b: scB, a: scA } = hexToRgba(strokeColor)
 
         const polygonOptions: PolygonOptions = {
           //多边形是否可点击。
-          clickable: clickable || true,
+          clickable: true,
 
           //鼠标在多边形内的光标样式。
-          cursor: cursor || 'crosshair',
+          cursor: 'crosshair',
 
           //多边形是否可编辑。
-          editable,
-
-          //多边形的填充色，可通过Color对象的alpha属性设置透明度。
-          fillColor: new (maps as QQMaps).Color(fcR, fcG, fcB, fillColorAlpha),
+          editable: false,
 
           // 地图实例，即要显示多边形的地图
           // @ts-ignore
           map,
 
+          // 区域填充色
+          fillColor: '',
+
           //多边形的路径，以经纬度坐标数组构成。
           path,
 
-          //多边形的线条颜色，可通过Color对象的alpha属性设置透明度。
-          strokeColor: new (maps as QQMaps).Color(
-            scR,
-            scG,
-            scB,
-            strokeColorAlpha
-          ),
+          // 区域边框
+          strokeColor: '',
 
           //多边形的边框样式。实线是solid，虚线是dash。
-          strokeDashStyle: strokeDashStyle || 'dash',
+          strokeDashStyle: dashArray.some((item: number) => item > 0) ? 'dash' : 'solid',
 
           //多边形的边框线宽。
-          strokeWeight: strokeWidth || 5,
+          strokeWeight: strokeWidth,
 
           //多边形是否可见。
-          visible,
+          visible: true,
 
           //多边形的zIndex值。
-          zIndex: zIndex || 1000,
+          zIndex: zIndex,
+        }
+
+        // 多边形的填充色、边框以及相应的透明度
+        if ((maps as QQMaps).Color) {
+          // 说明是 腾讯地图，google map 实例没有 Color 属性
+          // 将类型转为两者共有的 string，避免 ts 报错
+          polygonOptions.fillColor = new (maps as QQMaps).Color(fcR, fcG, fcB, fcA) as unknown as string
+          polygonOptions.strokeColor = new (maps as QQMaps).Color(scR, scG, scB, scA) as unknown as string
+        } else {
+          // google map
+          polygonOptions.fillColor = `rgb(${fcR}, ${fcG}, ${fcB})`
+          polygonOptions.fillOpacity = fcA
+          polygonOptions.strokeColor = `rgb(${scR}, ${scG}, ${scB})`
+          polygonOptions.strokeOpacity = scA
         }
 
+
         if (polygonIns) {
           // 更新区域属性
-          // @ts-ignore
           polygonIns.setOptions(polygonOptions)
           return
         }
 
         // 说明是新增区域
-        // @ts-ignore
         polygonIns = new maps.Polygon(polygonOptions)
 
         // 监听事件，当对应事件发生时，将事件暴露给用户
-        listenEvent(maps, polygonIns, trigger)
+        listenEvent(maps, polygonIns as unknown as HTMLElement, trigger)
       }
 
       // 给地图添加区域

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 QQPolygon, PolygonOptions as QQPolygonOptions } from '../maps/qq/types'
 import { Polygon as GPolygon } from '../maps/google/types'
 import { useCustomEvent } from '@dcloudio/uni-components'
 import props from './props'
@@ -21,6 +21,8 @@ export type OnMapReady = (callback: OnMapReadyCallback) => void
 
 export type Polygon = QQPolygon | GPolygon
 
+export type PolygonOptions = QQPolygonOptions & google.maps.PolygonOptions
+
 export type Props = Record<keyof typeof props, any>
 
 export interface EventObj {

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

@@ -3,63 +3,34 @@ import { Point } from './interface'
 
 // MapPolygon 组件的 props 属性配置
 export default {
+  // 边框虚线，腾讯地图支持，google 地图不支持，默认值为[0, 0] 为实线，非 [0, 0] 为虚线，H5 端无法像微信小程序一样控制虚线的间隔像素大小
+  dashArray: {
+    type: Array as PropType<number[]>,
+    default: () => [0, 0]
+  },
   // 经纬度数组，[{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,
+    default: 1
   },
   // 描边的颜色，十六进制
   strokeColor: {
     type: String,
-  },
-  // 描边的透明度，[0-1]
-  strokeColorAlpha: {
-    type: Number,
-    default: 1,
-  },
-  // 多边形的边框样式。实线是solid，虚线是dash。
-  strokeDashStyle: {
-    type: String,
+    default: '#000000'
   },
   // 填充颜色，十六进制
   fillColor: {
     type: String,
-  },
-  // 设置填充色的透明度，[0-1]
-  fillColorAlpha: {
-    type: Number,
-    default: 1,
+    default: '#00000000'
   },
   // 设置多边形 Z 轴数值
   zIndex: {
     type: Number,
+    default: 0
   },
 }

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

@@ -1344,12 +1344,16 @@ export interface PolygonOptions {
   editable?: boolean
   // 多边形的填充色，可通过Color对象的alpha属性设置透明度
   fillColor: Color | string
+  // google map 支持，fillColor 的透明度
+  fillOpacity?: number
   // 要显示多边形的地图。
   map: Map
   // 多边形轮廓的坐标数组。若为环多边形，设置为二维数组，第一个元素为外多边形，其他元素为内部“孤岛”轮廓
   path: Array<LatLng> | Array<Array<LatLng>>
   // 多边形的线条颜色，可通过Color对象的alpha属性设置透明度
   strokeColor: Color | string
+  // google map 支持，strokeColor 的透明度
+  strokeOpacity?: number
   // 多边形的边框样式。实线是solid，虚线是dash
   strokeDashStyle: string
   // 多边形的边框线宽