cesium中随entity动态变化的弹出框

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

原创

最新推荐文章于 2024-08-21 11:08:38 发布 · 8.3k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#cesium #动态弹出框

本文介绍了在Cesium中如何实现弹出框随entity动态变化的方法。通过监听鼠标点击事件获取屏幕位置，结合弹出框的宽高动态设置其位置。在添加entity描述后，绑定弹出框表格，并利用帧渲染结束事件，实时获取entity位置，将_wgs84ToWindowCoordinates_转换为屏幕坐标，以更新弹出框的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理介绍：
1.监听鼠标单击事件，获取点击屏幕位置e.position，综合弹出框宽高，动态设置弹出框位置。
bubble.style.left = e.position.x-70+"px";
var divheight = bubble.offsetHeight;
var divy = e.position.y - divheight -50;
2.添加entity的描述时，绑定弹出框table
3.监听帧渲染结束事件，获取实时位置，动态改变弹出框 viewer.scene.postRender.addEventListener(function (e) {}）；
添加的_cartesian转屏幕坐标，实时改变
_pm_position_2 = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, _cartesian);

以下是代码：（基于supermap的demo改写的，加载数据路径可能不同）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>动态气泡</title>
    <link href="../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <link href="css/pretty.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/slider.js"></script>
    <script src="js/config.js"></script>
    <script type="text/javascript" src="js/require.min.js" data-main="js/main"></script>    
</head>
<body>
    <div id="cesiumContainer"></div>
    <div id="bubble1" class="bubble" style="top:0;left:82%;display:block;width: 400px;visibility: hidden;"><!--class="bubble"-->
        <div id="tools" style="text-align : right">
            <span style="color: rgb(95, 74, 121);padding: 5px;position: absolute;left: 10px;top: 4px;">对象属性<