背景
项目中遇到万计数据点,需要用聚合图层展示,同时不同查询条件需要进行聚合图层的动态更新,百度上有建议用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);
}
},