高德地图MarkerCluster聚合图层清除

背景
项目中遇到万计数据点,需要用聚合图层展示,同时不同查询条件需要进行聚合图层的动态更新,百度上有建议用this.Cluster.clearMarkers(),这个方法应该是在低版本时可用,高德2.0系列的已经没有该方法了,同时也通过marker.remove,map.clearMap()等方式也无法清除,最后发现 cluster.setMap(null)可以实现地图清除,而且各版本都支持该方法,所以在高版本中将有些清除方法直接弃用了。
方法如下:

 if (cluster) {
            cluster.setMap(null);
     }

项目截图(3万多个点)
在这里插入图片描述
条件查询以后变成1900多个点
在这里插入图片描述

提供完整代码

	getFacilitiesPoint() {
			var that = this;
			var points = []; //记录点位信息
			getAction(that.url.listQuery, that.queryParamList).then(res => {
				if (res.success) {
					console.log(res, '---------------------res');
				//	that.clearClusterMap();
				   that.clearClusterMap();
				//	that.map.clearMap();
					var arrayObj = new Array();
					var dataModel = res.result;

					for (var i = 0; i < dataModel.length; i++) {
						var html = '<div style="display:display: flex;flex-direction: row;align-items: center;justify-content: center;">';
						html += '<div style="height:150px;margin:10px;"><img style="width:100%;height:100%" src="' + componentImgUrl + dataModel[i].picture + '" /></div>';
						html += '<div style="background: rgba(255, 255, 255, 0.8); "><p>部件编号' + dataModel[i].objCode + '</p>';
						html += '<p>名称:' + dataModel[i].objName + ', 材质:' + dataModel[i].material + '</p>';
						html += '<p>状态:' + dataModel[i].objState + ', 使用情况:' + dataModel[i].useState + '</p>';
						html += '地址:' + dataModel[i].objPos + '</div></div>';
						// var point = { lnglat: [dataModel[i].objX, dataModel[i].objY] };
						var markera = {
							lnglat: [dataModel[i].objX, dataModel[i].objY],
							offset: new AMap.Pixel(-15, -45),
							content: html
						};
						points.push(markera);
					}
					console.log(points, 'points');
					that.renderMarkerEvent(points);
					//this.markers = new T.MarkerClusterer(that.map, { markers: arrayObj }, { girdSize: 90 }, { maxZoom: 17 });
					//	console.log(that.map.getZoom());
				}
				if (res.code === 510) {
					that.$message.warning(res.message);
				}
			});
		},
/**
		 * @param {Object} clusterCount点位数量
		 * 聚合样式
		 */
		renderClusterMarker(context) {
			var clusterCount = context.count;
			var div = document.createElement('div');
			var bgColor = '';
			// 聚合点配色
			var defaultColor = ['204,235,197', '168,221,181', '123,204,196', '78,179,211', '43,140,190'];
			if (clusterCount >= 0 && clusterCount < 10) {
				bgColor = defaultColor[0];
			} else if (clusterCount >= 10 && clusterCount < 100) {
				bgColor = defaultColor[1];
			} else if (clusterCount >= 100 && clusterCount < 1000) {
				bgColor = defaultColor[2];
			} else if (clusterCount >= 1000 && clusterCount < 10000) {
				bgColor = defaultColor[3];
			} else if (clusterCount >= 10000) {
				bgColor = defaultColor[4];
			}
			div.style.backgroundColor = 'rgba(' + bgColor + ',.5)';
			var size = Math.round(25 + Math.pow(clusterCount / this.clusterCounts, 1 / 5) * 40);
			div.style.width = div.style.height = size + 'px';
			div.style.border = 'solid 1px rgba(' + bgColor + ',1)';
			div.style.borderRadius = size / 2 + 'px';
			div.innerHTML = context.count;
			div.style.lineHeight = size + 'px';
			div.style.color = '#ffffff';
			div.style.fontSize = '12px';
			div.style.textAlign = 'center';
			context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
			context.marker.setContent(div);
			
		},
		renderMarkerEvent(points) {
			console.log(points, 'cluster');
			this.clusterCounts = points.length;
			this.cluster = new AMap.MarkerCluster(this.map, points, {
				gridSize: 60, // 聚合网格像素大小
				renderClusterMarker: this.renderClusterMarker, // 自定义聚合点样式
				renderMarker: this.renderMarker
			});
			// this.cluster.addData('dataModel');
			// console.log(this.cluster, 'cluster');
			// this.cluster.on('click', this.markClick);
		},
		renderMarker(context) {
			//  console.log(context, 'context>>>>>>');
			var content = '<img src=' + require('../../assets/point1.gif') + ' />';
			var offset = new AMap.Pixel(-9, -45);
			context.marker.setContent(content);
			context.marker.setOffset(offset);
			context.marker.htmlText = context.data[0].content;
			context.marker.on('click', this.markClick);
		},
		//聚合清除方法
		clearClusterMap() {
			if(this.cluster){
				  this.cluster.setMap(null);
			}
			
		},
  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
uniapp是一款跨平台的移动应用开发框架,而高德地图是一款广泛使用的地服务平台。在uniapp中内置了高德地图,使得开发者可以方便地在应用中使用地功能。 点聚合高德地图提供的一种功能,它可以将地上的大量标注点聚合起来,以提升地的可视化效果和交互体验。在开发应用时,我们可以通过uniapp内置的高德地图组件,结合点聚合功能,实现地上大量标注点的高效展示。 要使用点聚合功能,我们首先需要在应用中引入高德地图组件,并设置地的初始化参数,如地的中心点坐标、缩放级别等。然后,我们可以通过调用高德地图Marker对象来添加各个标注点,并设置每个标注点的经纬度、标等属性。 当我们需要使用点聚合功能时,可以通过高德地图Cluster对象来实现。我们可以将所有的标注点传递给Cluster对象,并设置聚合的样式、点击事件等。Cluster对象会根据一定的规则将附近的标注点聚合在一起,形成一个聚合点。当用户点击聚合点时,可以通过点击事件获取到该聚合点下的所有标注点,以便进一步操作或展示。 通过在uniapp中使用内置的高德地图组件和点聚合功能,我们可以轻松实现地的展示和标注点的聚合,为用户提供更好的地浏览体验。利用这些功能,我们可以开发一些基于地的应用,如地点检索、附近的人等功能,丰富用户的使用场景。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值