Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Velpro187
uni-app
提交
cee5bf01
U
uni-app
项目概览
Velpro187
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
cee5bf01
编写于
3月 21, 2022
作者:
L
liyongning
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: 1、polygon 暴露的属性、事件对齐微信小程序;2、兼容 google 地图
上级
ed04a15a
变更
6
隐藏空白更改
内联
并排
Showing
6 changed file
with
98 addition
and
129 deletion
+98
-129
packages/uni-h5/src/helpers/hexToRgba.ts
packages/uni-h5/src/helpers/hexToRgba.ts
+44
-27
packages/uni-h5/src/view/components/map/map-polygon/event.ts
packages/uni-h5/src/view/components/map/map-polygon/event.ts
+3
-29
packages/uni-h5/src/view/components/map/map-polygon/index.tsx
...ages/uni-h5/src/view/components/map/map-polygon/index.tsx
+35
-34
packages/uni-h5/src/view/components/map/map-polygon/interface.ts
...s/uni-h5/src/view/components/map/map-polygon/interface.ts
+3
-1
packages/uni-h5/src/view/components/map/map-polygon/props.ts
packages/uni-h5/src/view/components/map/map-polygon/props.ts
+9
-38
packages/uni-h5/src/view/components/map/maps/qq/types.d.ts
packages/uni-h5/src/view/components/map/maps/qq/types.d.ts
+4
-0
未找到文件。
packages/uni-h5/src/helpers/hexToRgba.ts
浏览文件 @
cee5bf01
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
浏览文件 @
cee5bf01
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
.
add
Dom
Listener
(
polygonIns
,
key
,
function
(
e
:
MouseEvent
)
{
...
...
packages/uni-h5/src/view/components/map/map-polygon/index.tsx
浏览文件 @
cee5bf01
...
...
@@ -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
浏览文件 @
cee5bf01
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
浏览文件 @
cee5bf01
...
...
@@ -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
浏览文件 @
cee5bf01
...
...
@@ -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
// 多边形的边框线宽
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录