本文介绍了在Cesium中如何实现弹出框随entity动态变化的方法。通过监听鼠标点击事件获取屏幕位置，结合弹出框的宽高动态设置其位置。在添加entity描述后，绑定弹出框表格，并利用帧渲染结束事件，实时获取entity位置，将_wgs84ToWindowCoordinates_转换为屏幕坐标，以更新弹出框的位置。
原理介绍：
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="to
最低0.47元/天 解锁文章
1599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
