在cesium中增加自定义气泡或弹窗提示信息可随三维场景移动(思路解析加源码)
程序员文章站
2022-05-31 18:47:38
...
在cesium项目中,我们通过鼠标点击场景中的实体,进而弹出提示框信息,是最基本的项目需求,如果想实现改提示框跟随场景的移动而移动还是有点难度的,而且用户体验更佳。
一、实现思路
实现整个过程我们需要分为俩步:获取当前坐标点并且弹出提示框,动态更新提示框的位置。
1、获取当前坐标:首先我们需要在场景中注册单击事件用去单击拾取实体,你可以在添加实体的时候通过设置其id或者name属性,用于标识你需要弹出提示框的实体,然后通过viewer.scene.cartesianToCanvasCoordinates方法取得屏幕坐标,该方法接收一个三维笛卡尔坐标,返回一个屏幕坐标。(注意:该屏幕坐标是相对于viewer容器的值)。
2,动态更新坐标:这里我们需要监听场景的每一帧,我们可以通过 viewer.scene.postRender.addEventListener进行监听(注意:对应场景每一帧进行监听开销比较大,所以代码尽量简洁,比如只有当提示框处于显示状态我们才进行监听)
二、源码实现
var trackPop = undefined; //记录鼠标捕获实体的坐标
//添加单击监听事件
handler.setInputAction(function(movement) {
var pick = viewer.scene.pick(movement.position);
if (Cesium.defined(pick) && pick.id && pick.id.name == "落雷") {
console.log(pick.id);
var bubble = document.getElementById("popover_span");
//设置弹出框位置
var winpos = viewer.scene.cartesianToCanvasCoordinates(
pick.id.position._value
);
bubble.style.left = winpos.x + 20 + "px";
bubble.style.top = winpos.y + 50 + "px";
that.luolei_value = true;
that.luolei_content = [];
that.luolei_content.push({ label: "名称", value: "落雷点" });
that.luolei_content.push({
label: "x坐标",
value: bubble.style.left
});
that.luolei_content.push({
label: "y坐标",
value: bubble.style.top
});
trackPop = pick.id.position._value;
} else {
that.luolei_value = false;
trackPop = undefined;
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
//每帧渲染结束监听
viewer.scene.postRender.addEventListener(function(e) {
if (that.luolei_value && trackPop) {
var winpos = viewer.scene.cartesianToCanvasCoordinates(
trackPop
);
var bubble = document.getElementsByClassName("el-popover")[0];
var poph = bubble.offsetHeight;
bubble.style.left = winpos.x + 20 + "px";
bubble.style.top = winpos.y + 50 - poph + "px";
}
});
三、实现效果图
四、更多
这里有个地方需要说明,我的弹框样式用到了elemeUI 中的Popover 弹出框组件,目的在于实现下面那个倒立的三角形,看图即可明白,对整体效果的实现没有影响。
如果你还有不了解的地方,
如果你还需要进行cesium交流,
那一起学习探讨吧。
你可以加入我们的基地,我们基地的地址是:450342630(QQ群号)