高德地图实现点聚合，使用 AMap.MarkerCluster 插件

本文主要是介绍高德地图实现点聚合，使用 AMap.MarkerCluster 插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

高德地图实现点聚合，使用 AMap.MarkerCluster 插件

你需要具备的知识

会使用高德地图进行点的绘制
了解高德地图的插件引入操作
一些关于地图的基础操作

如果你没有具备这些，可以看我以往关于地图的相关文章了解个大概

一、点聚合是什么东西

当在地图上添加很多点的时候，缩放到一定程度，就会出现点点相交的情况。就像下面这样，你不知道下面有多少外点重叠了：

在这里插入图片描述
点聚合就是做这样一件事：当两个点的距离非常相近的时候，小于某个距离的时候就会将这个范围内点合成一个点，只显示数量，就像这样：

二、点聚合基础行为的实现

像上图这样是最基础的样式，聚合的点就显示数量，没有聚合的就只显示标记点。
如何实现它：

关于聚合行为的所有方法和属性都在官方文档里：

https://lbs.amap.com/api/javascript-api-v2/documentation#markercluster

1. 引入插件 AMap.MarkerCluster

我这里是用 AMpLoader 引入的，至于完整的例子可以去 github 上查看，本文的例子也在里面。

https://github.com/KyleBing/map

AMapLoader.load({key: mapConfig.key_web_js, // 开发应用的 IDversion: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ['AMap.ToolBar', // 缩放按钮'AMap.Scale', // 比例尺'AMap.DragRoute', // 拖拽点图'AMap.Driving', // 导航'AMap.MarkerCluster', // 点聚合],}).then(map => {AMap = mapthis.map = new AMap.Map('container', {center: MY_POSITION,zoom: 11})this.map.addControl(new AMap.ToolBar())this.map.addControl(new AMap.Scale())if (this.$route.query.pointerId){this.getPointerInfo(this.$route.query.pointerId)}this.getPointerList()}).catch(e => {console.log(e)})

2. cluster 初始化

上面代码中引入了 AMap.MarkerCluster 这个插件，接下来需要在 getPointerList() 方法中初始化这个 cluster。
由于我这个页面是复用的，就是会根据路由值的不同，载入不同的内容，在整个地图生命周期中，这个 cluster 变量并不会改变。所以这里我把 cluster 变量单独拿出来，好在后面更新它的内容。

data(){return {cluster: null}
}

在 getPointerList() 方法中获取到需要的点数据之后，就初始化 cluster：

 if (this.cluster){ // 1. 如果存在 cluster 说明已经初始化过了，直接使用，变更它的点的内容就可以了。this.cluster.setData(pointers)
} else {  			// 2. 如果没有 cluster 就进行初始化。this.cluster = new AMap.MarkerCluster(map,       		// 地图实例pointers,  		// 海量点数据，数据中需包含经纬度信息字段 lnglat{gridSize: 30})
}

这里需要说明一下 AMap.MarkerCluster 的参数，如下所示，有两个参数：

地图本身

点数据，数据的格式是这样的，weight：权重、lnglat：坐标，缺一不可。

[{weight: 1, lnglat: [114.3, 35.6]},{weight: 1, lnglat: [114.3, 35.6]},{weight: 1, lnglat: [114.3, 35.6]},{weight: 1, lnglat: [114.3, 35.6]},
]

一些配置项，完整的配置项在官方文档中写：

https://lbs.amap.com/api/javascript-api-v2/documentation#markercluster

这样操作之后，就会显示成这样

在这里插入图片描述
看到没，它会自动聚合。

在这里插入图片描述

三、装饰这些点

上面图片中的样子虽然能显示有多少个点，但无法显示具体点的信息，所以我们还需要自定义一下点的显示，这里需要有 Marker 的基础：

高德地图 JS Web 添加自定义图标，自定义窗口标记

要自定义点的显示，就需要定义两种:

一种是聚合后的点
一种是未聚合的点

这两种点分别对应着 MarkerCluster 最后一个参数 Option 中的两个参数：

一种是聚合后的点 : renderClusterMarker : function (context)
一种是未聚合的点 : renderMarker: function (context)

对应着渲染这两种点的方法，如下：

this.cluster = new AMap.MarkerCluster(map,       // 地图实例pointers,  // 海量点数据，数据中需包含经纬度信息字段 lnglat{gridSize: 30,renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式renderMarker: _renderMarker, // 自定义非聚合点样式})

那么现在主要需要处理的就是这两个渲染方法：

const _renderMarker = function(context) {console.log(context)
}const _renderClusterMarker = function (context) {}

先来了解下 context 的内容，如下：

在这里插入图片描述
这个 context.data 是

根据官方的例子添加这两个渲染方法之后，就能正常显示了。
这里非聚合的点是我之前定义的标记，自定义的 html 元素的 Marker。

在这里插入图片描述
当我把这两个渲染方法好好处理之后，就成了这样：

官方实例： https://lbs.amap.com/demo/jsapi-v2/example/mass-markers/markerclusterer-weight

// 这个参考官方实例修改的
// 聚合点的渲染方法
const _renderClusterMarker = function (context) {let factor = Math.pow(context.count / count, 1 / 18);let div = document.createElement('div');let Hue = 180 - factor * 180;let bgColor = 'hsla(' + Hue + ',100%,100%,1)';let fontColor = 'hsla(' + Hue + ',100%,50%,1)';let borderColor = 'hsla(' + Hue + ',100%,0%,1)';let shadowColor = 'hsla(' + Hue + ',100%,10%,0.3)';div.style.backgroundColor = bgColor;let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);div.style.width = div.style.height = size + 'px';div.style.border = `solid 1px ${borderColor}`;div.style.borderRadius = size / 2 + 'px';div.style.boxShadow = `2px 2px 5px ${shadowColor}`;div.innerHTML = context.count;div.style.lineHeight = size + 'px';div.style.color = fontColor;div.style.fontSize = '18px';div.style.fontWeight = 'bold';div.style.textAlign = 'center';context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));context.marker.setContent(div)
};// 未聚合的点的渲染方法
const _renderMarker = function(context) {// console.log(context)let item = context.data[0]let contentif (item.img){context.marker.setContent(`<div class="marker"><div class="marker-index"><div class="title">${item.name}</div></div><div class="marker-content"><div class="note">${item.note.replaceAll('|', '<br>')}</div><div class="view"><a target="_blank" href="${item.img + '-' + mapConfig.thumbnail1500_suffix}"><img src="${item.img + '-' + mapConfig.thumbnail1000_suffix}" alt="view"></a></div></div></div>`)} else {context.marker.setContent(`<div class="marker"><div class="marker-index"><div class="title">${item.name}</div></div><div class="marker-content"><div class="note">${item.note.replaceAll('|', '<br>')}</div></div></div>`)}