百度地图 - 绘制海量点

简介

• 在开发大屏项目时，要在地图上一次显示上万个点。为了页面的性能，我们不能绘制上万个标注来展示。
• 有两种实现方式：

1. 在地图的最上层使用画布覆盖上去，在这个画布上根据地理坐标和像素转换绘制点。所有的控制都要自己判断。
2. 通过百度地图覆盖物函数Overlay，实现自定义画布覆盖物，在画布覆盖物绘制点。地图放大、缩小、位移，的回调由地图控制。

• 这里讲解第二种方式实现。

覆盖物

• 所有通过map.addOverlay()，添加到地图上的内容都是覆盖物。如标注、矢量图形元素信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。
• 它们都继承于Overlay，覆盖物的抽象基类。此类不可实例化。

自定义覆盖物

• 继承Overlay，通过基类实现自定义覆盖物函数。

1. initialize()，用于初始化覆盖物，当调用map.addOverlay时，API将调用此方法。
2. draw()，当地图状态发生变化时，由系统调用对覆盖物进行绘制。
3. show()，显示覆盖物。
4. hide()，隐藏覆盖物。

• 通过实例化new BMapGL.Overlay()。修改初始化方法initialize添加画布，并返回该画布。修改draw函数，确认画布绘制的位置、大小，根据点坐标转化为像素坐标，在对应位置绘制点。最后通过map.addOverlay()放入地图。

      /**
       * @param map 地图实例
       * @param pts 多个点坐标
       * */
      function customlayer(map, pts) {
        // 百度
        var layer = new BMapGL.Overlay()
        layer.initialize = function () {
          this._map = map
          // 创建画布元素并添加到图层容器中
          let cvs = document.createElement('canvas')
          // onMapClick(cvs)
          // getPanes() 返回地图覆盖物容器列表
          // markerPane 标注图标所在的容器 --添加这个画布
          map.getPanes().markerPane.appendChild(cvs)
          // 获取画布对象
          this._cvs = cvs
          return cvs
        }
        layer.draw = function () {
          // 设置svg/canvas的合适位置
          // getSize() 返回地图 视图的大小，以像素表示
          let size = this._map.getSize()
          // 返回地图当前中心点 经纬度
          let center = this._map.getCenter()

          // 获取地图中心点相对于图层的位置
          // pointToOverlayPixel() 根据地理坐标获取对应的覆盖物容器的坐标
          let rel_xy = this._map.pointToOverlayPixel(center)
          // 获取地图中心点的绝对位置
          // pointToPixel() 经纬度坐标转换为像素坐标
          let abs_xy = this._map.pointToPixel(center)

          // 两个位置点的差值为画布的位置
          let left = rel_xy.x - abs_xy.x
          let top = rel_xy.y - abs_xy.y
          // 设置 画布在 地图上的位置
          this._cvs.setAttribute('style', 
          'position:absolute;left:' + left + 'px;top:' + top + 'px;z-index:1')
          // 设置画布的大小 为地图的大小
          this._cvs.setAttribute('width', size.width)
          this._cvs.setAttribute('height', size.height)

          // draw(map, pts, this._cvs)
        }
        map.addOverlay(layer)
      }

绘制点

• 到这，我们只需要把点的地理坐标转换为像素坐标，并绘制到画布上就完成了。
• 当然为了功能更强大，这里我们在获取点坐标时，添加了点之间距离的判断，把在距离内的点组合为一个聚合点绘制。根据聚合数，判断并绘制不同的点样式。

      /**
       * @param map 地图实例
       * @param pots 多个点坐标
       * @param map 地图实例
       * */
      function draw(map, pots, canvas) {
        const arr = [] // 组装后的点

        // 画布 创建 绘图的环境
        let ctx = canvas.getContext('2d')
        // 清除画布内容
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        // 聚合的距离
        let distance = 20
        // 返回覆盖物的 地理区 域 范围
        let bound = map.getBounds()
        if (bound.ne.lng < 0) {
          bound.ne.lng = Math.abs(bound.ne.lng)
        }

        // 点聚合的 计算
        pots.forEach((spot) => {
          // 判断点是否在地图展示范围内  
          // containsPoint() : 如果点的地理坐标位于此矩形内，则返回true
          if (bound.containsPoint(spot)) {
            // 遍历点的集合，跟聚合数组中的元素做比较，如果在聚合范围内则聚合，
            // 如果没有在聚合范围内则在聚合数组中加入一项，并记录聚合的点数量
            let position = map.pointToPixel(spot)
            if (arr.length == 0) {
              arr.push({ count: 1, pos: position })
            } else {
              // 判断点是否在聚合范围内
              let flag = true
              for (let i = 0; i < arr.length; i++) {
                let c = arr[i]
                let pos = c.pos
                if (Math.abs(pos.x - position.x) <= distance && 
                Math.abs(pos.y - position.y) <= distance) {
                  c.count++
                  flag = false
                  break
                }
              }
              if (flag) {
                arr.push({ count: 1, pos: position })
              }
            }
          }
        })

        // 遍历聚合的数据并且在画布上渲染
        // 根据count值判断是单点、聚合的点
        arr.forEach((item) => {
          let position = item.pos
          if (item.count == 1) {
            ctx.beginPath()
            ctx.fillStyle = 'rgba(102, 0, 204, 0.6)'
            ctx.strokeStyle = 'rgba(102, 0, 204, 0.6)'
            ctx.lineWidth = 2
            ctx.arc(position.x, position.y, 5, 0, 2 * Math.PI)
            ctx.closePath()
            ctx.stroke()
            ctx.fill()
          } else {
            ctx.globalAlpha = 0.6
            ctx.beginPath()
            ctx.fillStyle = '#87CEFA'
            ctx.ellipse(position.x, position.y, 20, 10, 0, 0, 2 * Math.PI, true)
            ctx.closePath()
            ctx.fill()
            ctx.globalAlpha = 1
            ctx.fillStyle = 'red'
            ctx.font = 'bold 17px Arial'
            ctx.fillText(item.count, 
            position.x - ctx.measureText(item.count).width / 2, position.y + 6)
          }
        })
      }

• 每一次地图修改，都会调用draw。为了地图更加流畅，这里添加地图的监听事件，当处于事件开始时，停止后面的绘制，并清空画布，结束事件后，在重新绘制。

function customlayer(map, pts) {
    let temEvent = false
    // 监听百度地图缩放事件
    map.addEventListener('zoomstart', function (e) {
      temEvent = true
    })
    map.addEventListener('zoomend', function (e) {
      temEvent = false
    })
    
    ...
    
    layer.draw = function () {
          if (temEvent) {
            let ctx = this._cvs.getContext('2d')
            ctx.clearRect(0, 0, this._cvs.width, this._cvs.height)
            return
          }
          ...
    }
    ...
}

• 测试功能

var pts = []
for (var i = 0; i < 1000; i++) {
    pts.push(new BMapGL.Point(Math.random() * 10 + 115, Math.random() * 10 + 25))
}
customlayer(map, pts)

• 这里只是简单的介绍了使用画布在地图上绘制海量点。
• 有兴趣的可以继续完善这个功能，比如对每个点添加点击事件或鼠标移入的监听事件。增加外部函数修改点样式等。