遇到的问题:

因为需要展示渔船估计,因为早期渔船上面的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范围内的点聚合的结果。当然如果不是需要准确的点,采用点聚合效果还是非常理想的~

Logo

前往低代码交流专区

更多推荐