通过MarkerCluster在不同缩放级别下会显示不同标记，以适应细节程度和比例尺。
在最近一个项目用到地图，采用了高德的接口，绘制地图。通过MarkerCluster在不同缩放级别下会显示不同标记，以适应细节程度和比例尺。放大地图时，它会以更详细的方式显示标记，以便查看每个标记的具体信息。缩小地图时，标记会以更聚合的方式显示，方便用户快速查找。同时，可以通过自定义聚合范围和标记样式进一步优化显示效果。
本文采用vue3+vite
1. 按 NPM 方式安装使用 Loader
npm i @amap/amap-jsapi-loader --save
import {getGeoJson} from '../API/api'
2.创建地图容器
<template>
<div id="container"> </div>
</template>
<style scoped>
#container {
width: 800px;
height: 800px;
}
</style>
3.定义变量
//创建地图
let map;
//接收后端传来的坐标以及value
let points = [];
4.配置接口信息，地图初始化
//钩子函数
onMounted(async() => {
getGeoJson我自定义的请求获取数据，数据格式如下
/*
{lnglat: ["108.939621", "34.343147"],value:1 },
{lnglat: ["113.370643", "22.938827"] ,value:4},
{lnglat: ["112.985037", "23.15046"],value:4 },
{lnglat: ["110.361899", "20.026695"],value:4 },
{lnglat: ["121.434529", "31.215641"] ,value:9},
*/
await getGeoJson(2012).then(res=>{
points = res.data
})
//进行配置接口信息
AMapLoader.load({
key: '',//申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0',//指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
})
.then((AMap) => {
//创建地图
map = new AMap.Map('container',{
pitch: 55,// 倾斜角度
zoom:17, //初始化地图缩放级别
zooms:[5,30], //规定地图可以缩放的级别范围
viewMode: '3D', //设置地图模式2D/3D
center:[108.953939,34.266611 ], //初始地图中心，缺省时默认为使用者所在地
}
);
//引入插件
map.plugin(["AMap.MarkerClusterer"],function() {
//添加图层MarkerClusterer
cluster = new AMap.MarkerClusterer(
map, // 地图实例
points, // 海量点数据，数据中需包含经纬度信息字段 lnglat
{
//聚合点样式
renderClusterMarker:_renderClusterMarker,
//非聚合点样式
renderMarker: _renderMarker,
}
)
});
})
.catch(e => {
console.log(e);
});
})
5.设置聚合点样式，聚合点显示数据为聚合点所包含数据的平均值
//_renderClusterMarker被调用时会传入一个参数（对象）
const _renderClusterMarker=(context)=>{
var numbers =[]
//将所有id放入numbers
context.clusterData.forEach(item=>{
numbers.push(item.id)
})
//求和，也就是被聚合部分的和
const g= numbers.reduce((a,b)=>{
return a+b
})
//创建标点
const div = document.createElement('div');
div.innerHTML = `<div class="cluster-marker" style="background-color: green;width: 50px;height: 50px;border-radius: 50%;text-align: center;line-height: 50px">${g}</div>`;
设置标点
context.marker.setContent(div)
}
6.卸载，销毁组件
//
// 卸载组件钩子
onUnmounted(()=>{
map.destroy( );
})
