原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=HTML%20Overlays.html&label=All

效果如下图所示：

示例代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const viewer = new Cesium.Viewer("cesiumContainer");
viewer.cesiumWidget.creditContainer.style.display = "none";

/**
 * 要在 Cesium 画布上地理定位一个 HTML 元素，
 * 我们可以使用`scene.cartesianToCanvasCoordinates()`方法将世界位置映射到画布的 x 和 y 值。
 * 本例中放置了一个`img`元素，但任何元素都可以使用。
 */

const htmlOverlay = document.getElementById("htmlOverlay");
const scratch = new Cesium.Cartesian2();
viewer.scene.preRender.addEventListener(function () {
  const position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
  const canvasPosition = viewer.scene.cartesianToCanvasCoordinates(
    position,
    scratch,
  );
  if (Cesium.defined(canvasPosition)) {
    htmlOverlay.style.top = `${canvasPosition.y}px`;
    htmlOverlay.style.left = `${canvasPosition.x}px`;
  }
});