vue高德地图点聚合

遇到的问题：

因为需要展示渔船估计，因为早期渔船上面的GPS是10分钟上传一个经纬度点，所以在地图上展示经纬度点非常多，显得非常密集。解决这些密集点的办法就是通过点聚合来做。
点聚合： 可以在不同的地图缩放级别对海量的数据点进行聚合展示，点聚合插件可以支持10万个点，性能良好。
官方文档
未做聚合之前（此为测试数据，GPS在陆地上）：

以下开始使用点聚合尝试一下：

点聚合代码

   var _renderClusterMarker = function(context) {
        var div = document.createElement('div')
        var size = 10
        div.style.backgroundColor = '#ffffff'
        div.style.width = div.style.height = size + 'px'
        div.style.border = 'solid red 2px'
        div.style.borderRadius = size / 2 + 'px'
        context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
        context.marker.setContent(div)
      }
      const that = this
      this.map.plugin(['AMap.MarkerClusterer'], function() {
        that.cluster = new AMap.MarkerClusterer(
          that.map, // 地图实例
          that.markerArray, // 海量点组成的数组
          {
            gridSize: 30,
            zIndex: 2,
            zoomOnClick: false,
            renderClusterMarker: _renderClusterMarker
          })
      })

聚合点的点击事件

     this.cluster.on('click', (cluster, lnglat, target, markers) => {
       console.log(cluster.lnglat.lat)
      }
      )

聚合后的效果：
缩小后只剩两个点

接着放大，点变多

聚合后的坏处：
的确随着地图的放大、缩小可以展示不同数量的经纬度点，本项目的经纬度点可以点击展示经纬度信息、渔船信息等，但是采用点聚合后的经纬度不再是渔船GPS真正上传的经纬度，而是周边gridSize范围内的点聚合的结果。当然如果不是需要准确的点，采用点聚合效果还是非常理想的~