前端地图绘制经验之谈之vue-baidu-map-3x
打点还是画线?
需求:需要根据不同的信号类型或者信号强度以不同颜色进行区分。
一开始使用了画线的方式,具体展示:
存在的问题:
1、分段显示的交接处,是连接上还是不连接?不连接会得到断断续续的线段,连接时,如果后台传来的值跳动区间较大,可能会出现图中的飘移情况。
解决方案:
经过项目组讨论,apk方保证打点频率,以打点方式实现不同颜色区分线段。
随后,使用画点的形式:
具体请见下一节,详细展开。
大数据打点渲染速度
由于拿到了数据后,是大量的点,每一条线路就有上千个点,我们还需要对每个点的数据进行加工。
本人适用了三种画点的方式:
1、BmMarker
2、BmCircle
3、BmPointCollection(推荐)
前两种一开始的在渲染过程中非常慢,用户会有明显卡顿。
不得不说,人家组件库叫海量点是有道理的!
由于我需要对不同类型进行颜色的动态控制,因此我将海量点也进行了预处理,按照类型处理成了[[],[],…]的形式。
核心代码,如下显示:
<bm-polyline
:strokeColor="path.color"
strokeWeight="5"
:path="path.gps"
v-for="path of formOpts.showPaths"
:key="path.gps"
></bm-polyline>
let res: any = [
{
taskRecordId: 18283,
gps: [],
}
] //为我们接口拿到的海量点值
let radius: any = []
if (res) {
res.forEach((item: any, index: any) => {
if (item.gps) {
let len = item.gps.length
let tempSignal = item.gps[0].netWorkMode
let radiu: any = []
;(item.gps[0].lng = item.gps[0].gpsLng), (item.gps[0].lat = item.gps[0].gpsLat)
radiu.push(item.gps[0])
if (len > 1) {
for (let i = 1; i < len; i++) {
;(item.gps[i].lng = item.gps[i].gpsLng), (item.gps[i].lat = item.gps[i].gpsLat)
if (tempSignal != item.gps[i].netWorkMode) {
radius.push(radiu)
radiu = []
tempSignal = item.gps[i].netWorkMode
radiu.push(item.gps[i - 1])
radiu.push(item.gps[i])
} else {
radiu.push(item.gps[i])
if (i == len - 1) {
radius.push(radiu)
}
}
}
}
}
})
let points: any = []
if (radius) {
radius.forEach((item: any) => {
points.push({
color: state.getColorBySignal(item[0].netWorkMode),
gps: item
})
})
}
console.log('radius', radius)
console.log('points', points)
state.formOpts.radius = points
}
这是我上段代码中打印出来的数据:(帮助大家理解代码)
points为海量点数据组,每个对象里带了颜色,颜色由我们专门对类型进行区分的函数负责。