vue2中使用cesium的点击标记点,但是点击下一出地方的时候隐藏上一个点
时间: 2023-10-29 22:05:46 浏览: 151
可以通过记录上一个被点击的点的方式来实现隐藏上一个点。具体实现可以参考以下代码:
```javascript
<template>
<div id="cesiumContainer"></div>
</template>
<script>
import * as Cesium from "cesium";
export default {
data() {
return {
viewer: null,
lastClickedEntity: null // 记录上一个被点击的实体
};
},
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.lastClickedEntity.show = false; // 隐藏上一个被点击的实体
}
clickedEntity.show = true; // 显示当前被点击的实体
this.lastClickedEntity = clickedEntity; // 记录当前被点击的实体
}
}
}
};
</script>
```
这里的 `lastClickedEntity` 变量用来记录上一个被点击的实体,并在下一次点击时隐藏它。`onMapClick` 方法中,首先判断当前点击的是不是一个实体,如果是,就将其显示,同时隐藏上一个被点击的实体(如果有的话),并将当前实体设置为 `lastClickedEntity`。
阅读全文