高德地图MarkerCluster聚合图层清除_去除高德地图gridsize

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

 if (cluster) {
            cluster.setMap(null);
     }
1
2
3

项目截图（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);
			}
			
		},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100