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

在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群号）

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

猜你喜欢