一个好习惯，先给结论
使用Cesium.SceneTransforms.wgs84ToWindowCoordinates方法转换经纬度坐标为屏幕坐标，使用scene.postRender.addEventListener方法实时监听地图的转动，将弹窗定位在对应位置。
在线体验地址：点我预览
代码地址：点我github
本文首发于：blog.gis1024.com/cesium-popu…
这里才是引言
在使用cesium开发项目的过程中，在poi位置弹窗弹窗，并使弹窗始终跟随poi点移动是一个非常常见的需求。
可惜的是，cesium官方没有像其他二维地图框架那样提供一个可以使用的api，所以只能自己写。
之前也参考过网上其他博主写的文章，效果确实能实现，不过要么是代码太过复杂，要么是转动停止后，存在cesium弹窗抖动个不停的问题。
下面的方案，代码极简，核心代码十行出头，可以实现弹窗功能。
代码
该代码直接复制到本地html中可以直接运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>cesium弹窗popup</title>
<style> * { padding: 0; margin: 0; } #cesium-container { width: 100vw; height: 100vh; overflow: hidden; } </style>
<link rel="stylesheet" href="//lf6-cdn-tos.bytecdntp.com/cdn/expire-1-y/cesium/1.86.1/Widgets/widgets.min.css" />
<script src="//lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/cesium/1.90.0/Cesium.js"></script>
</head>
<body>
<div id="cesium-container"></div>
<a href="https://gis1024.com" style="position: absolute; left: 10px; top: 10px" >
gis1024.com
</a>
</body>
<script> // 请自己去cesium官网注册申请一个token替换 Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZmJmOGExOC1kMGZjLTRhNmMtYjgyZS04MDU2NDcxMTI2N2IiLCJpZCI6MTY2ODYsImlhdCI6MTY1OTk3MjU2MH0.YacXSjuuxfg6sO8lrcmnMYPyYDuslJ98xiumwnhUh58"; const viewer = new Cesium.Viewer("cesium-container"); const scene = viewer.scene; let coord = [120.311889, 31.491064]; viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(...coord, 1000), }); // 核心代码 const div = document.createElement("div"); div.innerHTML = "弹窗里需要填充点内容，支持html字符串"; viewer.container.append(div); scene.postRender.addEventListener(() => { let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates( scene, Cesium.Cartesian3.fromDegrees(...coord, 0) ); let x = windowCoord.x - div.offsetWidth / 2; let y = windowCoord.y - div.offsetHeight; div.style.cssText = ` position:absolute; left:0; top:0; height:100px; width:100px; background:rgba(0,0,0,0.7); color:white; transform:translate3d(${Math.round(x)}px,${Math.round(y)}px, 0); `; }); </script>
</html>
下一步
下一步预备封装成api，暴露较为灵活的参数供开箱即用。
今天的文章10行代码完成cesium跟随弹窗！超简单！分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/20984.html
