cesium自定义弹窗

已于 2024-07-12 19:51:28 修改
阅读量1.6k 收藏 10
点赞数 1
分类专栏： Cesium 文章标签： 前端
于 2022-12-20 00:10:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/128379182
版权

参考：cesium自定义弹窗_新晋代码小菜鸟的博客-CSDN博客_cesium 弹窗本文章是使用js写的。思路1、创建cesiumContainer容器。在script标签内添加cesiumContainer容器 Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZCI6NjE0MjMsImlhdCI6MTYyNjA3MjcwMn0.t78sW9YdR2gWIB55lhttps://blog.csdn.net/weixin_42274795/article/details/123049459

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹出信息框</title>
    <script src="http://rivermap-file.oss-cn-hangzhou.aliyuncs.com/lj/cesium/Cesium.js"></script>
    <link href="http://rivermap-file.oss-cn-hangzhou.aliyuncs.com/lj/cesium/Widgets/widgets.css" rel="stylesheet">
</head>

<body>
    <div id="cesiumContainer" class="fullSize">
        <div class="state" id="stateShow"
            style="width: 150px;height:150px;background-color:rgba(0, 162, 255, 0.475);color:white;position:absolute;z-index:999">
            <div :id="id" class="box">
                <div class="box-wrap">
                    <div class="close" onclick="closeClick()" style="cursor:pointer ">X</div>
                    <div class="area">
                        <div class="area-title fontColor" id="title"></div>
                    </div>
                    <div class="content">
                        <div class="data-li">
                            <div class="data-label textColor">状态：</div>
                            <div class="data-value">
                                <span class="label-num yellowColor" id="state"></span>
                            </div>
                        </div>
                        <div class="data-li">
                            <div class="data-label textColor">类型：</div>
                            <div class="data-value">
                                <span class="label-num yellowColor" id="type"></span>
                                <!-- <span class="label-unit textColor">m³/s</span> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3OWQ5ZTYzZi05NThmLTRmYjctOTk1Zi01YjczMTQ0ZjZlODAiLCJpZCI6NjE0MjMsImlhdCI6MTYyNjA3MjcwMn0.t78sW9YdR2gWIB55li5ZBYOeEz84owJajRUgGmVBbdc'
        var viewer = new Cesium.Viewer('cesiumContainer', {
            homeButton: false,
            baseLayerPicker: false,
            navigationHelpButton: false,
            animation: false,
            timeline: false,
            fullscreenButton: false,
            vrButton: false,
            infoBox: false
        })
        //初始化位置
        viewer.camera.setView({
            // fromDegrees()方法，将经纬度和高程转换为世界坐标
            destination: {
                x: -2182971.083593166,
                y: 4388278.203560757,
                z: 4068871.884137431
            },
            orientation: {
                // 指向
                heading: 0.7195577085964127,
                // 视角
                pitch: -0.7397293873082695,
                roll: 0.002953934254479762
            }
        });

        //添加影像
        var imageryProvider = new Cesium.ArcGisMapServerImageryProvider({
            url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
            name: "arcgis影像服务"
        });
        // viewer.imageryLayers.addImageryProvider(imageryProvider);
        const poin = [{
            id: '12321321',
            name: "颍红测试点",
            type: "固定枪机",
            state: "在线",
            position: {
                x: 116.4568,
                y: 39.8926
            },
            text: '1'
        }, {
            id: '43244324',
            name: "解放修理厂门口",
            type: "固定枪机",
            state: "在线",
            position: {
                x: 116.4568,
                y: 39.8944
            },
            text: '2'
        }, {
            id: '43764324',
            name: "新华路加油站",
            type: "固定枪机",
            state: "在线",
            position: {
                x: 116.4566,
                y: 39.8923
            },
            text: '3'
        }, {
            id: '437543345',
            name: "康佳大药房",
            type: "固定枪机",
            state: "在线",
            position: {
                x: 116.4513,
                y: 39.8923
            },
            text: '4'
        },]

        function addEntity(e) {
            let pinBuilder = new Cesium.PinBuilder()
            // debugger
            e.map(res => {
                let poin = viewer.entities.add({
                    id: res.id,
                    name: res.name,
                    position: Cesium.Cartesian3.fromDegrees(res.position.x, res.position.y),
                    billboard: {
                        image: pinBuilder.fromText(res.text, Cesium.Color.ROYALBLUE, 48).toDataURL(),
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
                    },
                    monitoItems: {
                        data: res
                    },
                })
            })
            return e
        }

        //加载点
        addEntity(poin)

        //点击加载弹窗
        function leftDownAction() {
            var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
            handler.setInputAction(function (movement) {
                var picked = viewer.scene.pick(movement.position)
                if (Cesium.defined(picked) && picked.id.id) {
                    Popupposition(picked)
                    let id = picked.id.id
                    let name = picked.id._name
                    document.getElementById('title').innerHTML = name
                    let monitoItems = picked.id.monitoItems
                    document.getElementById('state').innerHTML = monitoItems.data.state
                    document.getElementById('type').innerHTML = monitoItems.data.type
                } else {
                    return
                }
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
        }
        leftDownAction()

        function Popupposition(e) {
            let data = e.id.monitoItems.data
            //经纬度转为世界坐标
            let gisPosition = Cesium.Cartesian3.fromDegrees(
                data.position.x,
                data.position.y,
                0
            );
            document.getElementById('stateShow').style.display = 'block' //弹出信息框
            //实时更新位置
            viewer.scene.postRender.addEventListener(() => {
                //转化为屏幕坐标
                var windowPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, gisPosition);
                document.getElementById('stateShow').style.left = (windowPosition.x - 150) + 'px'
                document.getElementById('stateShow').style.top = (windowPosition.y - 220) + 'px'

                //解决滚动不隐藏问题
                const camerPosition = viewer.camera.position;
                let height = viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
                height += viewer.scene.globe.ellipsoid.maximumRadius;
                if ((!(Cesium.Cartesian3.distance(camerPosition, gisPosition) > height)) && viewer.camera.positionCartographic.height < 50000000) {
                    document.getElementById('stateShow').style.display = "block"
                } else {
                    document.getElementById('stateShow').style.display = "none"
                }

            })
        }

        function closeClick() {
            document.getElementById('stateShow').style.display = "none"
        }
    </script>
</body>

</html>

在线预览：

WebGIS之家WebGIS之家,openlayers示例源码，cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生icon-default.png?t=N7T8https://www.webgishome.com/preview?id=124&example_name=popup2&title=popup%E5%BC%B9%E7%AA%97

疆~
关注
  • 1
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CesiumPopup:Cesium弹窗功能（丑了点）
05-11
CesiumPopup:Cesium弹窗功能（丑了点）
cesium实现自定义弹窗
热门推荐
Dlma_的博客
07-21 1万+
前言 公司有项目涉及cesium的部分，前辈便让我自己建个cesium的项目练练手，前两天让我尝试了一下自定义弹框的实现。 官方api中对点的描述中只有label这一属性可实现（不知是否是我看漏了啊哈哈哈哈哈哈），于是开始思考通过添加div的方式，来实现cesium自定义的弹窗效果。 本篇文章讲述从创建点开始到实现弹窗的过程。
cesium 实现自定义弹窗并跟随场景移动
最新发布
qq_37550440的博客
05-29 372
cesium 添加点位弹窗并跟随场景移动 完整代码演示可直接copy使用，及深入理解使用
Cesium：去除原生自带右上角弹窗
KaiSarH
04-27 2670
cesium去除原生自带右上角弹窗
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压
03-13
基于Cesium实现自定义弹窗效果组件，弹窗样式内容可以自定义，弹窗可跟随场景自适应移动，完整demo和源代码，代码未加密/未压缩，可直接调用运行 文章描述：https://blog.csdn.net/qq_34205305/article/details/127074955 代码不易，略收小费，使用过程中如果有任何问题欢迎在文章下进行评论或者私信，百分百回复哦
cesium自定义的弹窗 Popup弹窗（可随球放大缩小，移动）
qq_37312180的博客
04-17 5719
cesium自定义的弹窗 Popup弹窗（可随球放大缩小，移动）
cesium鼠标控制键盘_Cesium开发工具篇 | 02事件应用
weixin_35520863的博客
02-23 491
无论是前端系统，还是二维/三维GIS应用系统，都离不开各种事件的应用，尤其是鼠标的单击、双击事件。 Cesium 根据事件的类型、用途，将事件应用分成了三大类。一种是以鼠标操作(左键、中键、右键操作等)为主的 ScreenSpaceEventHandler 类，另一种是通用的事件类 Event ，该类通常在容器类内部实例化，并作为某个属性的类型直接被调用，比如 viewer.clock.onTic...
Cesium自定义气泡弹窗
xt3d的博客
09-09 5982
Cesium自定义气泡弹窗 气泡弹出窗口在项目中会经常用到，但Cesium提供的信息窗口比较丑。 以下弹窗基于Vue封装，也有原生js版本。
cesium弹窗 popup
03-01
"cesium弹窗 popup"这个话题主要关注的是如何在Cesium环境中创建和使用信息窗口，即popup，来展示关于地图上的特定位置或对象的详细信息。 首先，让我们理解什么是popup。在地图应用中，popup（通常称为信息窗口或...
Cesium气泡信息提示框
01-16
Cesium气泡信息提示框，在地图上点击一个点图标，弹出一个信息提示框，可以跟随图表一起移动。
cesium动态变化弹出框
01-15
cesium中点击拾取坐标，在弹出框中显示。 弹出框位置自动变化。
关于Cesium的常见需求整理之点位和弹窗（点位弹窗）
huangzhixin1996的博客
08-13 3091
①在Cesium中，每个自定义的地图元素被视为一个entity对象，如果我们要添加点位到地图上，那就必须先创建一个entity对象。 以上代码我们创建了一个entity对象，只需要给予一个坐标参数就可以创建成功。②但是，仅仅只是一个坐标点在一般情况下是没办法满足我们的需求的，大多数时候我们都需要为我们的点位添加一个icon图标或者点位作为指示。这里就需要用到它另外一个参数，billboard。 ③有时候我们还想在点位图标下方添加简短的文本名称，这个时候可以使用label这个参数 ④至此，常用的点位设置已经完
Cesium.js实现显示点位对应的自定义信息弹窗（数据面板）
@Fonden
01-28 2572
首先，获取当前选择的实体（例如点位或图标）在 Cesium 世界坐标系中的位置；现在需要在利用Cesium.js来实现三维地图中，点位的信息弹窗的展示。实现该功能，需要将Cesium世界坐标转为屏幕坐标，进而更新弹窗的位置。第一种：鼠标点击图标显示信息弹窗，点击其他地方隐藏信息弹窗；第二种：鼠标移入图标显示信息弹窗，鼠标移出图标隐藏信息弹窗；然后，将 3D 世界中的点位转换为 2D 屏幕上的像素位置；实现添加点位，并在点位附近显示对应的信息弹窗。最后，将弹窗的位置设置为计算出的屏幕坐标。
cesium创建气泡弹窗
qq_43124006的博客
05-29 1181
本人第一次接触cesium又刚毕业，自己也是摸着石头过河，虽然效果实现但是还有很多不足之处，简单说一下我自己的气泡弹窗思路。
Cesium自定义气泡弹窗popup【图说GIS】
ONEGISER的博客
09-15 5188
Cesium自定义气泡弹窗写在前面实现思路用原生html+js+css实现 写在前面 在日常的GIS应用中，气泡弹窗不可或缺，前端框架leaflet就有自己的弹窗，互联网地图都有自己的气泡弹窗，只是非常简约而已。 而Cesium也有自己的弹窗，只是这个弹窗似乎不怎么适合我们，它在右上角！不能出现在鼠标点击位置。 网上也有好多示例可参考。在借鉴了前人们的经验后，自己决定动手写一下。 用原生html+js+css、React（陆续更新）、vue方式分别实现（陆续更新），如有不合适之处，欢迎指正，欢迎交流。 实现
Cesium-popup点击弹窗功能
席木木的博客
05-23 3201
    今天看到如下所示的mars3D中的popup点击弹窗例子时，就想要自己尝试基于Cesium实现代码封装。 popup点击弹窗工具类     代码封装如下， /** * 点击弹窗工具类-Cesium.Viewer添加弹出窗口 */ export class PopUpOnWindowPosition { /** * 构造器-实例化PopUpOnWindowPosition * @param {Ces
Cesium构造popup弹窗函数
qq_37121832的博客
11-10 3634
初学Cesium，发现没有自带的popup方法，从网上找资料自己写了一个，供大家参考 先上效果，样式方面大家可以自行发挥 构造函数 class Popup { constructor(info) { this.id = 0; //如果有div就移除 if (document.getElementsByClassName("bx-popup-ctn").length > 0) { document.getElementsByClassName("bx.
cesium自定义的弹窗 Popup弹窗
09-20
Cesium自定义的弹窗是通过在场景中创建一个弹窗组件实现的。该组件可以自定义弹窗的样式和内容，并且可以跟随场景自适应移动。您可以使用提供的完整demo和源代码来实现这个弹窗效果，代码没有加密或压缩，可以直接调用运行。 通过修改点击事件的代码，您可以实现点击时显示弹窗，点击空白处时删除弹窗。具体步骤如下： 1. 创建一个Cesium.ScreenSpaceEventHandler对象，并将当前的viewer对象传入。 2. 在handler中添加一个输入操作，当LEFT_CLICK事件发生时执行相应的操作。 3. 使用Cesium.Scene的pick方法获取当前点击位置的pick对象。 4. 判断pick对象是否存在，并且id属性是否存在。 5. 如果pick对象和id属性存在，则根据id获取相应的实体，然后使用弹窗组件添加动态标签。 6. 否则，清除弹窗组件中的内容。 请注意，这只是实现自定义弹窗的其中一种方法，请根据您的具体需求进行相应的修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值