vue2中使用cesium的点击标记点,但是点击下一处地方的时候删除上一个标记点
时间: 2024-02-24 10:54:27 浏览: 92
可以通过记录上一个被点击的标记点的方式来实现删除上一个标记点。具体实现可以参考以下代码:
```javascript
<template>
<div id="cesiumContainer"></div>
</template>
<script>
import * as Cesium from "cesium";
export default {
data() {
return {
viewer: null,
lastClickedEntity: null, // 记录上一个被点击的实体
entities: [] // 记录所有的标记点实体
};
},
mounted() {
this.initCesium();
},
methods: {
initCesium() {
this.viewer = new Cesium.Viewer("cesiumContainer");
// 点击地图时的事件处理函数
this.viewer.screenSpaceEventHandler.setInputAction(
this.onMapClick,
Cesium.ScreenSpaceEventType.LEFT_CLICK
);
},
onMapClick(event) {
const pickedObject = this.viewer.scene.pick(event.position);
if (Cesium.defined(pickedObject) && pickedObject.id instanceof Cesium.Entity) {
const clickedEntity = pickedObject.id;
if (this.lastClickedEntity) {
this.viewer.entities.remove(this.lastClickedEntity); // 删除上一个被点击的实体
this.entities = this.entities.filter(entity => entity !== this.lastClickedEntity);
}
this.entities.push(clickedEntity); // 将当前实体添加到实体数组中
this.lastClickedEntity = clickedEntity; // 记录当前被点击的实体
}
}
}
};
</script>
```
这里的 `lastClickedEntity` 变量用来记录上一个被点击的实体,并在下一次点击时删除它。`entities` 数组用来记录所有的标记点实体,以便于在删除时能够找到对应的实体并将其从数组中删除。`onMapClick` 方法中,首先判断当前点击的是不是一个实体,如果是,就将其添加到 `entities` 数组中,并删除上一个被点击的实体(如果有的话),并将当前实体设置为 `lastClickedEntity`。
阅读全文