前端地图绘制经验之谈之vue-baidu-map-3x

前端地图绘制经验之谈之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为海量点数据组，每个对象里带了颜色，颜色由我们专门对类型进行区分的函数负责。