Add custom bubble or pop-up prompt information in cesium to move with the 3D scene (thought analysis plus source code)

In the cesium project, we click on the entities in the scene with the mouse to pop up the prompt box information. This is the most basic project requirement. If you want to change the prompt box to follow the movement of the scene, it is still a bit difficult, and the user experience is better.

1. Realization ideas

We need to implement the whole process in two steps: get the current coordinate point and pop up a prompt box, and dynamically update the position of the prompt box.

1. Get the current coordinates: First, we need to register the click event in the scene to click to pick up the entity. You can set the id or name attribute when adding the entity to identify the entity you need to pop up the prompt box, and then Obtain the screen coordinates through the viewer.scene.cartesianToCanvasCoordinates method. This method receives a three-dimensional Cartesian coordinate and returns a screen coordinate. (Note: The screen coordinates are relative to the value of the viewer container).

2. Dynamically update coordinates: Here we need to monitor every frame of the scene, we can monitor through viewer.scene.postRender.addEventListener (note: the cost of monitoring each frame of the corresponding scene is relatively large, so the code is as simple as possible, such as only when We will monitor when the prompt box is on display)

Second, source code implementation

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

Three, the realization of the renderings

     

Lightning strike point

Four, more

There is a point to explain here. My pop-up style uses the Popover pop-up box component in elemeUI. The purpose is to realize the inverted triangle below. You can see it by looking at the picture, and it has no effect on the overall effect.

If you still don’t understand,

If you still need to communicate with cesium,

Let's study and discuss together.

You can join our base, the address of our base is: 450342630 (QQ group number)