在cesium中加入弹窗功能，实现点击模型出现弹窗

最新推荐文章于 2024-08-21 11:08:38 发布

打怪升级咯

最新推荐文章于 2024-08-21 11:08:38 发布

阅读量1.8k

点赞数 40

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_57211146/article/details/141228434

版权

实现效果如图，如果有更好的实现效果可以发评论区交流一下。

一、添加弹窗和关闭按钮

<div id="popup" class="info">
    <p id="popupContent" style="font-size: 14px;">信息</p>
    <button id="popupClose" style="margin-top: 10px;">关闭</button>
</div>

二、添加弹窗功能

viewer.screenSpaceEventHandler.setInputAction((click) => {
            const pickedObject = viewer.scene.pick(click.position);
            if (Cesium.defined(pickedObject) && pickedObject.id && pickedObject.id._id === '模型') {
                const pop = document.getElementById("popup");
                if (pop) {
                    const canvasRect = viewer.scene.canvas.getBoundingClientRect();
                    const top = click.position.y + canvasRect.top;
                    const left = click.position.x + canvasRect.left;
                    pop.style.top = top + "px";
                    pop.style.left = left + "px";
                    pop.style.display = "block"; // 显示弹出层

                    // 更新弹出内容
                    document.getElementById("popupContent").innerHTML = `
<span style="color: white;">
    设计模型详细信息：<br><br>
    高度分别是：101.50米、66.21米<br><br>
    斜度分别是：0.000881、0.003441<br><br>
    1、红色代表无人机飞行测试轨迹<br><br>
    2、蓝色表示两个塔之间连线的中点<br><br>
    以及相邻两条线之间的距离
</span>`;
                    this.overlayChartObj.chartData = document.getElementById("popupContent").innerText;
                    this.popVisible = true;
                }
            } else {
                // 点击对象不是目标时隐藏弹出层
                document.getElementById("popup").style.display = "none";
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

注意在使用这段代码之前，加载模型时加上一个id，这样可以精准找到这个模型。

三、添加关闭按钮功能

document.getElementById("popupClose").addEventListener('click', () => {
    document.getElementById("popup").style.display = "none";
});

四、样式

.info {
    display: none;
    position: absolute;
    z-index: 99;
    border: 1px solid #00ffd0;
    background-color: rgba(24, 130, 14, 0.54);
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

#popupClose {
    border-radius: 5px;
}

#popupClose:hover {
    background-color: #00ff59; /* 悬停时的背景色 */
}