高德地图实现点聚合，使用 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, // 开发应用的 ID
                version: "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [
                    'AMap.ToolBar', // 缩放按钮
                    'AMap.Scale', // 比例尺
                    'AMap.DragRoute', // 拖拽点图
                    'AMap.Driving', // 导航
                    'AMap.MarkerCluster', // 点聚合
                ],
            })
            .then(map => {
                AMap = map
                this.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 的参数，如下所示，有两个参数：

1. 地图本身

2. 点数据，数据的格式是这样的，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]},
   ]
   

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

   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 content
    if (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>`)
    }

结果就是这样

四、完成

这样就可以了，再根据自己的需要进行修改吧。

该文中的实例在已开源的项目 路书 中能看到：
https://github.com/KyleBing/map/blob/master/src/page/pointer/PointerViewer.vue