diff --git a/src/core/helpers/hidpi.js b/src/core/helpers/hidpi.js index 09fecb39c1c40d1e066e9e1fa5d5eb6eb531a462..fb678dde839d33959f1c228a5c720c9bc75988c4 100644 --- a/src/core/helpers/hidpi.js +++ b/src/core/helpers/hidpi.js @@ -1,7 +1,7 @@ import { hasOwn } - from 'uni-shared' +from 'uni-shared' export const pixelRatio = (function () { const canvas = document.createElement('canvas') diff --git a/src/core/runtime/mp/polyfill/state/proxy.js b/src/core/runtime/mp/polyfill/state/proxy.js index 8f73532cef7cb81b54764e31e8530f7ce6ec7a2a..c82d373316e334e72551d9f52e617cec07abb2f3 100644 --- a/src/core/runtime/mp/polyfill/state/proxy.js +++ b/src/core/runtime/mp/polyfill/state/proxy.js @@ -1,7 +1,7 @@ import { noop } - from 'uni-shared' +from 'uni-shared' const sharedPropertyDefinition = { enumerable: true, diff --git a/src/platforms/app-plus/service/framework/plugins/lifecycle.js b/src/platforms/app-plus/service/framework/plugins/lifecycle.js index 0cb29efb02cd585b6d7ae2068edc48ce4c64d8bb..3d96af07295c772453cfc16d92f5406ee903953f 100644 --- a/src/platforms/app-plus/service/framework/plugins/lifecycle.js +++ b/src/platforms/app-plus/service/framework/plugins/lifecycle.js @@ -14,7 +14,7 @@ import { import { lifecycleMixin } - from 'uni-core/service/plugins/lifecycle' +from 'uni-core/service/plugins/lifecycle' import { VD_SYNC_VERSION @@ -23,7 +23,7 @@ import { import { ON_REACH_BOTTOM_DISTANCE } - from '../../constants' +from '../../constants' import { NAVBAR_HEIGHT diff --git a/src/platforms/h5/service/index.js b/src/platforms/h5/service/index.js index d4343add2b4d323136fe59c10af92622a1dcd56d..f7c67a80dab35d7f75d359d7758e2d18c3fa5702 100644 --- a/src/platforms/h5/service/index.js +++ b/src/platforms/h5/service/index.js @@ -9,7 +9,7 @@ import { getApp, getCurrentPages } - from 'uni-core/service/plugins/app' +from 'uni-core/service/plugins/app' initOn(UniServiceJSBridge.on, { getApp, diff --git a/src/platforms/h5/view/components/map/index.vue b/src/platforms/h5/view/components/map/index.vue index 3e3fa1a0f9d0c90a4cab1ab83d8c589f635ce624..291d1e00f91e4be6a55a944046c383b60f660ca3 100644 --- a/src/platforms/h5/view/components/map/index.vue +++ b/src/platforms/h5/view/components/map/index.vue @@ -10,7 +10,7 @@ />
[0, 0] + }, // 经纬度数组，[{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 + // 描边的颜色，十六进制 + strokeColor: { + type: String, + default: '#000000' }, // 填充颜色，十六进制 fillColor: { - type: String - }, - // 设置填充色的透明度，[0-1] - fillColorAlpha: { - type: Number, - default: 1 + type: String, + default: '#00000000' }, // 设置多边形 Z 轴数值 zIndex: { - type: Number + type: Number, + default: 0 } }, mounted () { @@ -68,11 +42,6 @@ export default { // 遍历 props 对象，观察其中的每个属性，当属性发生变化时，更新地图上的 polygon Object.keys(this.$props).forEach(key => { - /** - * 这段其实暂时没有用，因为 props 更新时组件会重新挂载，而不是直接更新。 - * 问题可能出在 uni-app 重写 Vue 时某些地方有问题。 - * 但先留着这部分内容，防止以后 uni-app 修复该问题后 polygon 更新出问题 - */ this.$watch(key, () => { this.drawPolygon() }, { deep: true }) @@ -85,17 +54,11 @@ export default { // polygon 组件的 props 配置 const { points, - clickable, - cursor, - editable, strokeWidth, strokeColor, - strokeColorAlpha, - strokeDashStyle, + dashArray, fillColor, - fillColorAlpha, - zIndex, - visible + zIndex } = this // 从父组件解析 _maps、_map 和 $trigger，下面要用 @@ -106,63 +69,76 @@ export default { 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 = { // 多边形是否可点击。 - clickable: clickable || true, + clickable: true, // 鼠标在多边形内的光标样式。 - cursor: cursor || 'crosshair', + cursor: 'crosshair', // 多边形是否可编辑。 - editable, - - // 多边形的填充色，可通过Color对象的alpha属性设置透明度。 - fillColor: new _maps.Color(fcR, fcG, fcB, fillColorAlpha), + editable: false, // 地图实例，即要显示多边形的地图 // @ts-ignore map: _map, + // 区域填充色 + fillColor: '', + // 多边形的路径，以经纬度坐标数组构成。 path, - // 多边形的线条颜色，可通过Color对象的alpha属性设置透明度。 - strokeColor: new _maps.Color(scR, scG, scB, strokeColorAlpha), + // 区域边框 + strokeColor: '', // 多边形的边框样式。实线是solid，虚线是dash。 - strokeDashStyle: strokeDashStyle || 'dash', + strokeDashStyle: dashArray.some((item) => item > 0) ? 'dash' : 'solid', // 多边形的边框线宽。 - strokeWeight: strokeWidth || 5, + strokeWeight: strokeWidth, // 多边形是否可见。 - visible, + visible: true, // 多边形的zIndex值。 - zIndex: zIndex || 1000 + zIndex: zIndex + } + + // 多边形的填充色、边框以及相应的透明度 + if (_maps.Color) { + // 说明是 腾讯地图，google map 实例没有 Color 属性 + // 将类型转为两者共有的 string，避免 ts 报错 + polygonOptions.fillColor = new _maps.Color(fcR, fcG, fcB, fcA) + polygonOptions.strokeColor = new _maps.Color(scR, scG, scB, scA) + } else { + // google map + polygonOptions.fillColor = `rgb(${fcR}, ${fcG}, ${fcB})` + polygonOptions.fillOpacity = fcA + polygonOptions.strokeColor = `rgb(${scR}, ${scG}, ${scB})` + polygonOptions.strokeOpacity = scA } - if (polygonIns) { + if (this.polygonIns) { // 更新区域属性 - polygonIns.setOptions(polygonOptions) + this.polygonIns.setOptions(polygonOptions) return } // 说明是新增区域 - polygonIns = new _maps.Polygon(polygonOptions) + this.polygonIns = new _maps.Polygon(polygonOptions) // 监听事件，当对应事件发生时，将事件暴露给用户 - listenEvent(_maps, polygonIns, this.$parent.$trigger) + listenEvent(_maps, this.polygonIns, this.$parent.$trigger) } }, // 卸载时清除地图上绘制的 polygon beforeDestroy () { - polygonIns.setMap(null) - polygonIns = null + this.polygonIns.setMap(null) + this.polygonIns = null }, render () { return null diff --git a/src/shared/color.js b/src/shared/color.js index 8519e3e12ab674e907754220a429128ed4288f75..bff29f61c7522427fba56cdb8c4e48c7dd03db25 100644 --- a/src/shared/color.js +++ b/src/shared/color.js @@ -1,34 +1,50 @@ +/** + * 从 16 进制的色值解析成 rgba 格式的色值 + * @param { string } hex, #000、#000A、#000000、#000000AA，参数只能是这四种格式 + * @returns { + r: number; + g: number; + b: number; + a: number; +} + */ export function hexToRgba (hex) { - 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 false + // 异常情况 + 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) + // rgb + const r = parseInt(r1) * 16 + parseInt(r2); const g = parseInt(g1) * 16 + parseInt(g2); const 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}` - 0x10000) / 255 } -} +}