Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
uni-app
提交
80811c9a
U
uni-app
项目概览
DCloud
/
uni-app
29 天 前同步成功
通知
702
Star
38704
Fork
3642
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
7
列表
看板
标记
里程碑
合并请求
1
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
7
Issue
7
列表
看板
标记
里程碑
合并请求
1
合并请求
1
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
80811c9a
编写于
2月 26, 2022
作者:
L
liyongning
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: H5 增加绘制 polygon 的能力
上级
421b2fb6
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
232 addition
and
1 deletion
+232
-1
src/platforms/h5/view/components/map/index.vue
src/platforms/h5/view/components/map/index.vue
+12
-1
src/platforms/h5/view/components/map/map-polygon/event.js
src/platforms/h5/view/components/map/map-polygon/event.js
+50
-0
src/platforms/h5/view/components/map/map-polygon/index.js
src/platforms/h5/view/components/map/map-polygon/index.js
+170
-0
未找到文件。
src/platforms/h5/view/components/map/index.vue
浏览文件 @
80811c9a
...
...
@@ -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
0 → 100644
浏览文件 @
80811c9a
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
0 → 100644
浏览文件 @
80811c9a
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
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录