Cesium跟随弹窗：10行代码轻松搞定

2023-09-21 21:31:03

引言

Cesium是一个功能强大的地理空间数据可视化库，广泛用于构建3D地球和行星模型。在地理信息系统（GIS）项目中，在兴趣点（POI）位置显示弹窗信息并使其跟随POI移动是一项常见的需求。本文将介绍一种简单的解决方案，使用不到10行的核心代码即可在Cesium中创建跟随POI的弹窗。

技术实现

实现Cesium跟随POI的弹窗涉及以下步骤：

创建一个带有HTML内容的弹出窗口。
将弹窗与POI的坐标关联。
监听POI的位置变化，并相应地更新弹窗的位置。

以下代码展示了实现该功能的核心步骤：

// 创建HTML弹窗
var popup = document.createElement('div');
popup.style.position = 'absolute';
popup.style.backgroundColor = 'white';
popup.style.padding = '10px';
popup.style.borderRadius = '5px';
popup.style.boxShadow = '0 0 5px rgba(0,0,0,0.3)';
popup.innerHTML = '<b>POI信息</b><br/>坐标：' + poi.position.getValue();

// 将弹窗与POI坐标关联
var label = new Cesium.LabelGraphics({
  position: poi.position,
  text: '',
  disableDepthTestDistance: Number.POSITIVE_INFINITY
});
label.popup = popup;

// 监听POI位置变化并更新弹窗位置
poi.position.addEventListener(function(position) {
  label.position.setValue(position);
  updatePopupPosition(popup, position);
});

// 更新弹窗位置
function updatePopupPosition(popup, position) {
  var screenPosition = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position);
  if (screenPosition) {
    popup.style.left = (screenPosition.x - popup.offsetWidth / 2) + 'px';
    popup.style.top = (screenPosition.y - popup.offsetHeight) + 'px';
  }
}

具体实现

上述核心代码通过以下步骤实现：

创建一个HTML<div>元素作为弹窗，并自定义其样式。
将弹窗与一个Cesium标签（Cesium.LabelGraphics）相关联，该标签表示POI的位置。
监听POI位置的变化，并相应地更新标签位置。
在更新标签位置时，使用updatePopupPosition函数更新关联的弹窗位置。updatePopupPosition函数将弹窗定位在跟随POI点的屏幕坐标上。