Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
m0_68066342
uni-app
提交
c7ef3a30
U
uni-app
项目概览
m0_68066342
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
0
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,发现更多精彩内容 >>
提交
c7ef3a30
编写于
3月 22, 2022
作者:
Q
qiang
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'feat/vue2-polygon' into dev
上级
8a426073
61f26541
变更
4
展开全部
隐藏空白更改
内联
并排
Showing
4 changed file
with
198 addition
and
29 deletion
+198
-29
packages/uni-h5/dist/index.umd.min.js
packages/uni-h5/dist/index.umd.min.js
+1
-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.js
src/platforms/h5/view/components/map/map-polygon.js
+142
-0
src/shared/color.js
src/shared/color.js
+43
-27
未找到文件。
packages/uni-h5/dist/index.umd.min.js
浏览文件 @
c7ef3a30
此差异已折叠。
点击以展开。
src/platforms/h5/view/components/map/index.vue
浏览文件 @
c7ef3a30
...
...
@@ -8,6 +8,11 @@
:key=
"item.id"
v-bind=
"item"
/>
<map-polygon
v-for=
"item in polygons"
:key=
"JSON.stringify(item.points)"
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
'
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.js
0 → 100644
浏览文件 @
c7ef3a30
import
{
hexToRgba
}
from
'
uni-shared
'
export
default
{
props
:
{
// 边框虚线,腾讯地图支持,google 地图不支持,默认值为[0, 0] 为实线,非 [0, 0] 为虚线,H5 端无法像微信小程序一样控制虚线的间隔像素大小
dashArray
:
{
type
:
Array
,
default
:
()
=>
[
0
,
0
]
},
// 经纬度数组,[{latitude: 0, longitude: 0}]
points
:
{
type
:
Array
,
required
:
true
},
// 描边的宽度
strokeWidth
:
{
type
:
Number
,
default
:
1
},
// 描边的颜色,十六进制
strokeColor
:
{
type
:
String
,
default
:
'
#000000
'
},
// 填充颜色,十六进制
fillColor
:
{
type
:
String
,
default
:
'
#00000000
'
},
// 设置多边形 Z 轴数值
zIndex
:
{
type
:
Number
,
default
:
0
}
},
mounted
()
{
const
{
$parent
}
=
this
// 当地图准备好以后调用指定的回调函数
$parent
.
mapReady
(()
=>
{
this
.
drawPolygon
()
// 遍历 props 对象,观察其中的每个属性,当属性发生变化时,更新地图上的 polygon
Object
.
keys
(
this
.
$props
).
forEach
(
key
=>
{
this
.
$watch
(
key
,
()
=>
{
this
.
drawPolygon
()
},
{
deep
:
true
})
})
})
},
methods
:
{
// 绘制区域
drawPolygon
()
{
// polygon 组件的 props 配置
const
{
points
,
strokeWidth
,
strokeColor
,
dashArray
,
fillColor
,
zIndex
}
=
this
// 从父组件解析 _maps、_map 和 $trigger,下面要用
const
{
_maps
,
_map
}
=
this
.
$parent
const
path
=
points
.
map
(
item
=>
{
const
{
latitude
,
longitude
}
=
item
return
new
_maps
.
LatLng
(
latitude
,
longitude
)
})
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
:
true
,
// 鼠标在多边形内的光标样式。
cursor
:
'
crosshair
'
,
// 多边形是否可编辑。
editable
:
false
,
// 地图实例,即要显示多边形的地图
// @ts-ignore
map
:
_map
,
// 区域填充色
fillColor
:
''
,
// 多边形的路径,以经纬度坐标数组构成。
path
,
// 区域边框
strokeColor
:
''
,
// 多边形的边框样式。实线是solid,虚线是dash。
strokeDashStyle
:
dashArray
.
some
((
item
)
=>
item
>
0
)
?
'
dash
'
:
'
solid
'
,
// 多边形的边框线宽。
strokeWeight
:
strokeWidth
,
// 多边形是否可见。
visible
:
true
,
// 多边形的zIndex值。
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
(
this
.
polygonIns
)
{
// 更新区域属性
this
.
polygonIns
.
setOptions
(
polygonOptions
)
return
}
// 说明是新增区域
this
.
polygonIns
=
new
_maps
.
Polygon
(
polygonOptions
)
}
},
// 卸载时清除地图上绘制的 polygon
beforeDestroy
()
{
this
.
polygonIns
.
setMap
(
null
)
this
.
polygonIns
=
null
},
render
()
{
return
null
}
}
src/shared/color.js
浏览文件 @
c7ef3a30
/**
* 从 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
,
'
$1$1
'
)
}
if
(
b
.
length
===
1
)
{
b
+=
b
// rgba
const
[
sr
,
sg
,
sb
,
sa
]
=
tmpHex
.
match
(
/
(\w{2})
/g
)
// rgb
const
r
=
parseInt
(
sr
,
16
);
const
g
=
parseInt
(
sg
,
16
);
const
b
=
parseInt
(
sb
,
16
)
if
(
!
sa
)
{
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
${
sa
}
`
-
0x10000
)
/
255
}
}
}
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录