10行代码完成cesium跟随弹窗~超简单~
Posted QIANDXX
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了10行代码完成cesium跟随弹窗~超简单~相关的知识，希望对你有一定的参考价值。
一个好习惯，先给结论
使用Cesium.SceneTransforms.wgs84ToWindowCoordinates方法转换经纬度坐标为屏幕坐标，使用scene.postRender.addEventListener方法实时监听地图的转动，将弹窗定位在对应位置。
在线体验地址：点我预览
本文首发于：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跟随弹窗~超简单~的主要内容，如果未能解决你的问题，请参考以下文章