高德地图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 = '';html += '+ componentImgUrl + dataModel[i].picture + '" />';html += '
部件编号' + dataModel[i].objCode + '
';html += '
名称：' + dataModel[i].objName + ', 材质：' + dataModel[i].material + '
';html += '
状态：' + dataModel[i].objState + ', 使用情况：' + dataModel[i].useState + '
';html += '地址：' + dataModel[i].objPos + '';// 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 = ') + ' />';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);}},

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！