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

最新推荐文章于 2025-05-21 12:52:28 发布

打怪升级咯

最新推荐文章于 2025-05-21 12:52:28 发布

阅读量2.8k

点赞数 41

CC 4.0 BY-SA版权

文章标签：前端 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 + canvasRe