Commit 48dd392a authored by xinzhedeai's avatar xinzhedeai

add:添加cesium 人员 label提示弹窗

parent 1714e996
...@@ -294,11 +294,16 @@ export default { ...@@ -294,11 +294,16 @@ export default {
// 监听窗口大小变化 // 监听窗口大小变化
window.addEventListener("resize", this.handleResize); window.addEventListener("resize", this.handleResize);
}, },
// 在beforeDestroy方法中添加清理代码
beforeDestroy() { beforeDestroy() {
window.removeEventListener("resize", this.handleResize); window.removeEventListener("resize", this.handleResize);
if (this.viewer) { if (this.viewer) {
this.viewer.destroy(); this.viewer.destroy();
} }
// 清理点击事件处理器
if (this.clickHandler) {
this.clickHandler.destroy();
}
// 组件销毁前清理地图资源 // 组件销毁前清理地图资源
if (this.viewer) { if (this.viewer) {
this.viewer.destroy(); this.viewer.destroy();
...@@ -665,6 +670,8 @@ export default { ...@@ -665,6 +670,8 @@ export default {
if (tileset) { if (tileset) {
this.tileset = tileset; this.tileset = tileset;
this.locateToTileset(); this.locateToTileset();
// 添加鼠标点击事件监听器,用于控制人员信息label显示
this.addEntityClickHandler();
} }
} catch (error) { } catch (error) {
console.error(`加载倾斜摄影模型失败: ${error}`); console.error(`加载倾斜摄影模型失败: ${error}`);
...@@ -675,6 +682,62 @@ export default { ...@@ -675,6 +682,62 @@ export default {
console.error("Cesium地图初始化失败:", error); console.error("Cesium地图初始化失败:", error);
} }
}, },
addEntityClickHandler() {
// 创建鼠标事件处理器
this.clickHandler = new Cesium.ScreenSpaceEventHandler(
this.viewer.canvas
);
// 监听鼠标左键点击事件
this.clickHandler.setInputAction((click) => {
// 检测点击位置的实体
const pickedObject = this.viewer.scene.pick(click.position);
// 修复条件判断:检查是否是人员实体,通过判断是否有info属性或是否存在于bgEntities中
if (
Cesium.defined(pickedObject) &&
pickedObject.id &&
pickedObject.id.info // 直接检查实体是否有info属性
) {
// 获取点击的实体
const entity = pickedObject.id;
const personInfo = entity.info;
// 如果已有详细信息label,则移除它
if (entity.detailLabel) {
this.viewer.entities.remove(entity.detailLabel);
delete entity.detailLabel;
return;
}
console.log("点击实体了", personInfo);
// 创建详细信息label
const detailLabel = this.viewer.entities.add({
position: entity.position.getValue(),
label: {
text: `${personInfo.perName}\n状态: ${
personInfo.status === "online" ? "在线" : "离线"
}\n高度: ${personInfo.height.toFixed(2)}m`,
font: "14px 微软雅黑",
backgroundColor: Cesium.Color.fromCssColorString("#173349"),
showBackground: true,
fillColor: Cesium.Color.WHITE,
pixelOffset: new Cesium.Cartesian2(0, -60),
eyeOffset: new Cesium.Cartesian3(0, 0, -10),
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.TOP,
scaleByDistance: new Cesium.NearFarScalar(1000, 1, 500000, 0.5),
disableDepthTestDistance: Number.POSITIVE_INFINITY, // 确保始终显示在最前面
},
});
// 将详细信息label关联到实体,便于后续管理
entity.detailLabel = detailLabel;
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
},
/** /**
* 获取倾斜摄影模型的经纬度并将摄像机视角转向模型上方 * 获取倾斜摄影模型的经纬度并将摄像机视角转向模型上方
*/ */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment