Cesium单弹窗-多弹窗-附代码

已于 2024-09-03 10:54:44 修改
阅读量477 收藏
点赞数 3
文章标签： cesium 多弹窗
于 2024-09-03 10:50:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40820382/article/details/141855277
版权

cesium点击地图上要素，显示弹窗，一种是共用一个弹窗，一种是多个弹窗，两种方式用于不同需求

更多示例联系QQ：854138497

示例集合1
https://blog.csdn.net/qq_40820382/article/details/132493694
示例集合2
https://blog.csdn.net/qq_40820382/article/details/132594789

一个弹窗示例
在这里插入图片描述
代码，直接z在vscode 右键，选择【在浏览器中打开】

<!DOCTYPE html>
<html>
<head>
    <title>点击出现弹窗-拖动地图弹窗跟着走</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css">
    <style>
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .modal {
            display: none;
            position: absolute;
            z-index: 1000;
            background-color: white;
            border: 1px solid #888;
            padding: 10px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer"></div>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <div id="modal-body"></div>
    </div>
    <div id="contentToPopUp">
        <p>这是要显示在弹窗中的内容。</p>
    </div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider : new Cesium.UrlTemplateImageryProvider({
                url : 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
            })
        });
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 10000000),
            duration: 0,
        });
        // 添加一些示例数据作为实体。点加载到中国区域了
        var entities = [
            viewer.entities.add({
                name : 'Example Entity 1',
                position : Cesium.Cartesian3.fromDegrees(121.4737, 31.2304), // 上海的经纬度
                point : {
                    pixelSize : 10,
                    color : Cesium.Color.BLUE
                }
            }),
            // 可以继续添加更多的实体
            viewer.entities.add({
                name : 'Example Entity 1',
                position : Cesium.Cartesian3.fromDegrees(121.4737, 35.2304), // 上海的经纬度
                point : {
                    pixelSize : 10,
                    color : Cesium.Color.RED
                }
            }),
        ];

        // 创建一个屏幕空间事件处理器
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
        // 用于存储点击位置
        var lastClickPosition = null;
        var lon = null;
        var lat = null;

        handler.setInputAction(function(click) {
            const pickedObject = viewer.scene.pick(click.position);

            const { ellipsoid } = viewer.scene.globe;
            const cartesian = viewer.camera.pickEllipsoid(click.position, ellipsoid);
            const cartographic = ellipsoid.cartesianToCartographic(cartesian);

            if (Cesium.defined(pickedObject)) {
                lon = Cesium.Math.toDegrees(cartographic.longitude);
                lat = Cesium.Math.toDegrees(cartographic.latitude);
                lastClickPosition = click.position;
                // 显示模态框
                showPopup(lastClickPosition);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        var modal = document.getElementById('myModal');
        var contentDiv = document.getElementById('contentToPopUp');

        function showPopup(position) {
            // 清空模态框内容
            document.getElementById('modal-body').innerHTML = '';

            // 复制内容到模态框
            var cloneContent = contentDiv.cloneNode(true);
            document.getElementById('modal-body').appendChild(cloneContent);

            modal.style.display = "block";
            // 设置模态框的位置
            updatePopupPosition(position);
            // 添加关闭按钮事件监听
            document.querySelector('.close').addEventListener('click', function() {
                modal.style.display = "none";
            });
        }

        // 更新弹窗位置
        function updatePopupPosition(position) {
            if (!position || !lastClickPosition) return;

            // 获取当前视图的屏幕边界
            var clientPosition = viewer.canvas.getBoundingClientRect();

            // 计算点击位置相对于浏览器窗口的位置
            var x = position.x - clientPosition.left;
            var y = position.y - clientPosition.top;

            // 设置模态框的位置
            modal.style.left = x + 'px';
            modal.style.top = y + 'px';
        }

        // 监听视图变化事件
        viewer.scene.postRender.addEventListener(function() {
            if (lastClickPosition) {
                const Cartesian3Result = Cesium.Cartesian3.fromDegrees(lon, lat);
                const Cartesian2Result222 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,Cartesian3Result,);
                updatePopupPosition(Cartesian2Result222);
            }
        });

        // 清理
        window.addEventListener('unload', function() {
            handler.destroy();
            viewer.destroy();
        });
    </script>
</body>
</html>

多个弹窗示例在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>点击出现弹窗-拖动地图弹窗跟着走-多弹窗</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css">
    <style>
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        .modal {
            display: none;
            position: absolute;
            z-index: 1000;
            background-color: white;
            border: 1px solid #888;
            padding: 10px;
            left: 221px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body id="bodyId">
    <div id="cesiumContainer"></div>
    <div id="myModal" class="modal">
        <span class="close">&times;</span>
        <div id="modal-body"></div>
    </div>
    <div id="contentToPopUp">
        <p>这是要显示在弹窗中的内容。</p>
    </div>
    <script>
        var viewer = new Cesium.Viewer('cesiumContainer', {
            imageryProvider : new Cesium.UrlTemplateImageryProvider({
                url : 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
            })
        });

        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(80, 26, 150.0, 35.5);
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(116.4074, 39.9042, 10000000),
            duration: 0,
        });

        // 添加一些示例数据作为实体。点加载到中国区域了
        var entities = [
            viewer.entities.add({
                name : 'Example Entity 1',
                position : Cesium.Cartesian3.fromDegrees(121.4737, 28.2304), // 上海的经纬度
                point : {
                    pixelSize : 10,
                    color : Cesium.Color.BLUE
                }
            }),
            // 可以继续添加更多的实体
            viewer.entities.add({
                name : 'Example Entity 1',
                position : Cesium.Cartesian3.fromDegrees(121.4737, 35.2304), // 上海的经纬度
                point : {
                    pixelSize : 10,
                    color : Cesium.Color.RED
                }
            }),
        ];

        // 创建一个屏幕空间事件处理器
        var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
        // 用于存储点击位置
        var lastClickPosition = null;
        var lon = null;
        var lat = null;
        const lonlatArr = []

        handler.setInputAction(function(click) {
            const pickedObject = viewer.scene.pick(click.position);

            const { ellipsoid } = viewer.scene.globe;
            const cartesian = viewer.camera.pickEllipsoid(click.position, ellipsoid);
            const cartographic = ellipsoid.cartesianToCartographic(cartesian);
            lon = Cesium.Math.toDegrees(cartographic.longitude);
            lat = Cesium.Math.toDegrees(cartographic.latitude);
            console.log(111, pickedObject );

            if (Cesium.defined(pickedObject)) {
                console.log(222, pickedObject );
                lonlatArr.push([lon,lat])

                lastClickPosition = click.position;
                // 显示模态框
                showPopup(lastClickPosition);
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

        let tempModel = []
        let count = 0
        var bodyId = document.getElementById('bodyId');
        var modal = document.getElementById('myModal');

        function showPopup(position) {
            count++

            var contentDiv = document.getElementById('contentToPopUp');
            // 清空模态框内容
            document.getElementById('modal-body').innerHTML = '';

            // 复制内容到模态框--------这边得新加一个div
            var cloneContent = contentDiv.cloneNode(true);
            document.getElementById('modal-body').appendChild(cloneContent);


            var modalCopy = modal.cloneNode(true);
            modalCopy.id = 'myModal' + + Date.now() 
            bodyId.appendChild(modalCopy)

            modalCopy.style.display = "block";
            tempModel.push(modalCopy)
            // 设置模态框的位置
            updatePopupPosition(lonlatArr, count);

            // 为每个新创建的弹窗及其关闭按钮绑定特定的事件处理程序。使关闭按钮的事件处理程序只关闭其所属的弹窗
            var closeButton = modalCopy.querySelector('.close');
            closeButton.addEventListener('click', function() {
                modalCopy.style.display = "none";
            });
        }

        // 更新弹窗位置
        // function updatePopupPosition(position, count) {
        function updatePopupPosition(position, count) {
            if (!position || !lastClickPosition) return;

            // 获取当前视图的屏幕边界
            var clientPosition = viewer.canvas.getBoundingClientRect();

            tempModel.forEach((item, index) => {
                const Cartesian3Result = Cesium.Cartesian3.fromDegrees(lonlatArr[index][0], lonlatArr[index][1]);
                const positionsss = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,Cartesian3Result,);
                // 计算点击位置相对于浏览器窗口的位置
                var x = positionsss.x - clientPosition.left;
                var y = positionsss.y - clientPosition.top;
               // 设置模态框的位置
                item.style.left = x + 'px';
                item.style.top = y + 'px';
            })
        }

        // 监听视图变化事件
        viewer.scene.postRender.addEventListener(function() {
            if (lastClickPosition) {
                // 将经纬度转换为Cartesian3
                const Cartesian3Result = Cesium.Cartesian3.fromDegrees(lonlatArr[count-1][0], lonlatArr[count-1][1]);
                const Cartesian2Result222 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,Cartesian3Result,);
                updatePopupPosition(lonlatArr, count);
            }
        });

        // 清理
        window.addEventListener('unload', function() {
            handler.destroy();
            viewer.destroy();
        });
    </script>
</body>
</html>

更多示例联系QQ：854138497

示例集合1
https://blog.csdn.net/qq_40820382/article/details/132493694
示例集合2
https://blog.csdn.net/qq_40820382/article/details/132594789

海马区
关注
Cesium-popup点击弹窗功能
席木木的博客
05-23 3390
    今天看到如下所示的mars3D中的popup点击弹窗例子时，就想要自己尝试基于Cesium实现代码封装。 popup点击弹窗工具类     代码封装如下， /** * 点击弹窗工具类-Cesium.Viewer添加弹出窗口 */ export class PopUpOnWindowPosition { /** * 构造器-实例化PopUpOnWindowPosition * @param {Ces
DEJA_VU3D - Cesium功能集 之 075-自定义弹窗组件（基础版）
总得学点什么的博客
09-27 1472
本篇我们来介绍实现基于Cesium实现自定义弹窗效果展示，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，包括完整源代码奉上
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压
03-13
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：https://blog.csdn.net/qq_34205305/article/details/127074955 代码不易，略收小费，使用过程中如果有任何问题欢迎在文章下进行评论或者私信，百分百回复哦
cesium弹窗 popup
03-01
详细情况请点：https://blog.csdn.net/caozl1132/article/details/86065333
cesium自定义弹框（信息显示框）
最新发布
m0_55794001的博客
09-26 561
弹框组件中myInfo为创建触发点图标时自定义的属性，里面包含经纬度信息。1.点击图标弹出弹框，点击弹框以外的地方或者弹框上面的“X”关闭弹窗。2.拖动或者放大缩小地图弹框跟随图标移动。3.地球翻转到另一面弹框关闭。
在cesium中加入弹窗功能，实现点击模型出现弹窗
m0_57211146的博客
08-15 2119
实现效果如图，如果有更好的实现效果可以发评论区交流一下。
cesium自定义弹窗
12-20 2158
本文章是使用js写的。思路1、创建cesiumContainer容器。在script标签内添加cesiumContainer容器 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZCI6NjE0MjMsImlhdCI6MTYyNjA3MjcwMn0.t78sW9YdR2gWIB55l。
cesium添加弹窗，跟随实体移动
weixin_43845059的博客
08-21 507
cesium添加弹窗，并跟随实体移动
CesiumPopup:Cesium弹窗功能（丑了点）
05-11
CesiumPopup是Cesium库中的一个组件，它提供了在三维场景中显示信息弹窗的功能。尽管标题提到“丑了点”，这可能指的是默认的样式可能不符合所有用户的审美，但CesiumPopup的可定制性使其可以根据需求进行调整。 ##...
Cesium.js实现显示点位对应的自定义信息弹窗（数据面板）
@Fonden
01-28 3706
首先，获取当前选择的实体（例如点位或图标）在 Cesium 世界坐标系中的位置；现在需要在利用Cesium.js来实现三维地图中，点位的信息弹窗的展示。实现该功能，需要将Cesium世界坐标转为屏幕坐标，进而更新弹窗的位置。第一种：鼠标点击图标显示信息弹窗，点击其他地方隐藏信息弹窗；第二种：鼠标移入图标显示信息弹窗，鼠标移出图标隐藏信息弹窗；然后，将 3D 世界中的点位转换为 2D 屏幕上的像素位置；实现添加点位，并在点位附近显示对应的信息弹窗。最后，将弹窗的位置设置为计算出的屏幕坐标。
cesium动态变化弹出框
01-15
cesium中点击拾取坐标，在弹出框中显示。 弹出框位置自动变化。
Cesium 多个弹框展示
瑾&凌
03-11 538
使用cesium 自定义弹框开发 vue 等
Cesium点位弹窗
taozi8957的博客
11-20 1554
Cesium点位弹窗
cesium实现点击弹窗
qq_45733494的博客
02-06 3038
记录一下cesium地图弹窗的实现思路
Cesium深入浅出之信息弹框
Helsing的专栏
11-20 5286
引子 信息弹框种类有很多，今天我们要说的是那种可以钉在地图上的信息框，它具备一个地图坐标，可以跟随地图移动，超出地图范围会被隐藏，让人感觉它是地图场景中的一部分。不过它还不是真正的地图元素，它还只是个网页元素而已，也就是说它始终是朝向屏幕平面的，而不是那种三维广告板的效果，那种效果或许后续会做吧。 预期效果 这个效果其实是动态的，从底部到顶部逐渐显现，不过GIF图比较大就没上传了，看看最终的效果吧。 实现原理 原理真的很简单，一句话可以描述，就是实时同步笛卡尔坐标（地图坐标）和画布（canva
cesium创建气泡弹窗
qq_43124006的博客
05-29 1345
本人第一次接触cesium又刚毕业，自己也是摸着石头过河，虽然效果实现但是还有很多不足之处，简单说一下我自己的气泡弹窗思路。
cesium自定义的弹窗 Popup弹窗（可随球放大缩小，移动）
qq_37312180的博客
04-17 6494
cesium自定义的弹窗 Popup弹窗（可随球放大缩小，移动）
关于Cesium的常见需求整理之点位和弹窗（点位弹窗）
huangzhixin1996的博客
08-13 4084
①在Cesium中，每个自定义的地图元素被视为一个entity对象，如果我们要添加点位到地图上，那就必须先创建一个entity对象。 以上代码我们创建了一个entity对象，只需要给予一个坐标参数就可以创建成功。②但是，仅仅只是一个坐标点在一般情况下是没办法满足我们的需求的，大多数时候我们都需要为我们的点位添加一个icon图标或者点位作为指示。这里就需要用到它另外一个参数，billboard。 ③有时候我们还想在点位图标下方添加简短的文本名称，这个时候可以使用label这个参数 ④至此，常用的点位设置已经完
cesium 展示弹窗
01-17
Cesium是一款基于WebGL的地球可视化引擎，可以用于展示地球和空间数据的三维可视化效果。在Cesium中，展示弹窗是一种常见的交互方式，用于在地球上显示地点或者要素的详细信息。 展示弹窗可以通过一系列的鼠标或者触摸操作触发，比如单击地球上的特定点、悬停在特定要素上、或者通过程序控制等。当展示弹窗被触发时，弹窗会在地球的特定位置显示，并呈现相关的信息。 在弹窗中，可以展示各种信息，比如地点的名称、经纬度、高度、描述、图片、链接等。这些信息可以根据具体的需求进行自定义，以展示不同类型的地理数据。 Cesium提供了一套API，开发者可以通过编写代码来创建和控制展示弹窗。首先，需要创建一个弹窗实例，并设置其显示的位置和样式。然后，可以将需要显示的内容添加到弹窗中，比如文字、图片等。最后，通过开启或关闭弹窗的可见状态来控制弹窗的显示和隐藏。 展示弹窗可以增强用户与地球数据的交互体验，使用户能够更加直观地了解和浏览地球上的特定信息。例如，在地理信息系统（GIS）应用中，展示弹窗可以用于展示不同位置的特征、属性和测量结果，有助于用户对地球数据进行分析和决策。 总而言之，Cesium展示弹窗是一种交互方式，可以在地球上显示地点或要素的详细信息，通过适当的操作和代码编写，可以实现各种需求，提供更加丰富的地球可视化体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值