原因:因为坐标系投影问题
解决方法:切换坐标系后,重新把请求到的点位数据插入到的图层删除掉,重新插入图层就可以解决了
// 先移除已存在的同名图层
this.map.removeLayer('cluster');
// 然后添加新的图层
this.map.addLayer(this.clusterLayer);
// 绘制风险点
async addMarker() {
try {
let markerMap = []
// let layer2 = this.map.getLayer("layer2"); //风险点图层
const { data } = await allRiskPoint();
// this.datas = data
// console.log("绘制风险点", this.datas);
let arr1 = [];
let arr2 = [];
let arr3 = [];
let arr4 = [];
if (data && data.length > 0) {
data.forEach((item) => {
let { name, id, riskPointNumber, riskLevelText, riskTypeText, locationVo, riskLevel } = item;
let file = require(`@/assets/compartment/images/FX${riskLevel}.png`);
let marker = new maptalks.Marker([locationVo.lngWgs, locationVo.latWgs], {
visible: true,
editable: false,
cursor: "pointer",
setZIndex: 9,
properties: {
id: item.id,
},
symbol: [
{
markerType: "path",
markerFile: file,
markerWidth: {
stops: [
[3, 5],
[7, 10],
[15, 22],
[18, 32],
],
},
markerHeight: {
stops: [
[3, 5],
[7, 10],
[15, 22],
[18, 32],
],
},
markerDx: 0,
markerDy: 0,
markerOpacity: 1,
},
],
});
markerMap.push(marker);
// layer2.addGeometry(marker);
if (riskLevel === 0) {
arr1.push(marker);
} else if (riskLevel === 1) {
arr2.push(marker);
} else if (riskLevel === 2) {
arr3.push(marker);
} else if (riskLevel === 3) {
arr4.push(marker);
}
let that = this
// 添加点击事件
marker.on('click', function (e) {
// console.log("点击的点位id", e.target.properties.id);
that.form = {}
const id = e.target.properties.id
getCourseDetail(id).then((res) => {
// console.log("弹框数据", res.data)
that.form = res.data;
that.open = true;
});
});
// marker.on("click", async () => {
// this.markerActive = marker;
// this.markerName = name;
// try {
// const { data } = await riskPointDetail({ riskPointId: id });
// console.log("风险点", data);
// this.$eventBus.$emit("markerDetail", {
// data,
// riskTypeText,
// riskLevelText,
// riskPointNumber,
// riskLevel,
// });
// } catch (error) {
// console.log(error);
// }
// // this.$parent.showRightdialog = false
// marker.setInfoWindow({
// content: this.$refs["infowindow_content"],
// custom: true,
// autoPan: false,
// });
// marker.openInfoWindow();
// });
})
};
this.riskPointMap.set(0, arr1);
this.riskPointMap.set(1, arr2);
this.riskPointMap.set(2, arr3);
this.riskPointMap.set(3, arr4);
// 点聚合
this.clusterLayer = new ClusterLayer('cluster', markerMap, {
noClusterWithOneMarker: true,
noClusterWithHowMany: 8, // 聚合的最小个数
maxClusterZoom: 17,
symbol: {
markerType: 'ellipse',
markerFill: { property: 'count', type: 'interval', stops: [[0, 'rgb(40, 187, 201)'], [6, 'rgb(40, 187, 201)'], [12, 'rgb(40, 187, 201)']] },
markerFillOpacity: 0.7,
markerLineOpacity: 1,
markerLineWidth: 5,
markerLineColor: 'rgb(40, 187, 201)',
markerWidth: { property: 'count', type: 'interval', stops: [[0, 40], [9, 50], [99, 60]] },
markerHeight: { property: 'count', type: 'interval', stops: [[0, 40], [9, 50], [99, 60]] }
},
textSymbol: {
textFill: '#fff', // 设置数字的颜色为红色
textSize: 24, // 设置字体大小为 14
textFaceName: "sans-serif",
// 其他选项...
},
drawClusterText: true,
geometryEvents: true,
single: true,
})
this.clusterLayer.setZIndex(999)
// this.map.addLayer(this.clusterLayer)
// // 先移除已存在的同名图层
// this.map.removeLayer('cluster');
// 然后添加新的图层
this.map.addLayer(this.clusterLayer);
// let projection = "EPSG:4326";
// this.map.config("spatialReference", { projection })
this.map.refresh()
} catch (error) {
console.log(error);
}
},