vue高德地图点聚合
遇到的问题:因为需要展示渔船估计,因为早期渔船上面的GPS是10分钟上传一个经纬度点,所以在地图上展示经纬度点非常多,显得非常密集。解决这些密集点的办法就是通过点聚合来做。点聚合: 可以在不同的地图缩放级别对海量的数据点进行聚合展示,点聚合插件可以支持10万个点,性能良好。未做聚合之前(此为测试数据,GPS在陆地上):以下开始使用点聚合尝试一下:点聚合代码var _rende...
·
遇到的问题:
因为需要展示渔船估计,因为早期渔船上面的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范围内的点聚合的结果。当然如果不是需要准确的点,采用点聚合效果还是非常理想的~
更多推荐
已为社区贡献5条内容
所有评论(0)