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

最新推荐文章于 2025-08-19 14:43:19 发布

原创

最新推荐文章于 2025-08-19 14:43:19 发布 · 904 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

文章介绍了如何在uniapp中使用RenderJS加载高德地图，并通过AMap.MarkerCluster实现点的聚合，包括定制标记点样式和点击事件。作者详细展示了如何处理矢量数据并传递给视图层进行操作。

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%