uniapp通过renderjs实现高德地图点聚合

1.初始化地图，这一步在uniapp实现使用renderjs加载高德地图，并添加geoServer图层服务（APP端）-CSDN博客

这已经实现过了，就不多赘述了。

2.拿到需要聚合的点的矢量数据，并处理成点聚合需要的数据，这一步在uniapp实现逻辑层向视图层传值，render.js中的通信-CSDN博客

这里已经实现。 

3.接下来我们通过map实例以及矢量数据进行点聚合。

GetPoints() {
	this.map.plugin(["AMap.MarkerCluster"], () => {
		const markers = new AMap.MarkerCluster(this.map, this.points, {
			gridSize: 80,
			renderMarker: (context) => {
                // 定义自定义标记点的样式
				var content =
					'<div style="background-color: hsla(180, 100%, 50%, 0.4);height: 28px;line-height: 28px;text-align: center;width:100px;padding:0 10px;border: 1px solid hsl(180, 100%, 40%);box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;">' +
					111111111 +
					"</div>";
                context.marker.setContent(content);
                // 定义 标记点 点击事件
				const clickEvent = (e) => {
                    // 定义弹窗内容
					const infoWindowContent = `
						  <div>
							  <div style="font-size: 14px;text-align: center;padding: 10px 0">
								  <span>测试</span>
							  </div>
						  </div>
				     `;
                    // 加载弹窗
					const infoWindow = new AMap.InfoWindow({
						content: infoWindowContent,
						// isCustom: true, //自定义窗体
						offset: new AMap.Pixel(50, -35),
					});
                    // 显示弹窗
					infoWindow.open(this.map, e.target.getPosition());
				};
                   
				
				context.marker.on("click", clickEvent);
			},
		})
	});
},