欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在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";
              }
            });

三、实现效果图

     

在cesium中增加自定义气泡或弹窗提示信息可随三维场景移动(思路解析加源码)
落雷点

四、更多

这里有个地方需要说明,我的弹框样式用到了elemeUI 中的Popover 弹出框组件,目的在于实现下面那个倒立的三角形,看图即可明白,对整体效果的实现没有影响。

如果你还有不了解的地方,

如果你还需要进行cesium交流,

那一起学习探讨吧。

你可以加入我们的基地,我们基地的地址是:450342630(QQ群号)