经纬志
首页 / Cesium / 使用示例

HTML 浮层标注

把世界坐标换算成画布坐标,让普通网页元素跟着三维场景移动。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

坐标换算

cartesianToCanvasCoordinates 返回画布内的像素坐标,超出视锥或在地球背面时返回 undefined,用它控制浮层的显示与隐藏。

为什么用 DOM

网页元素能放任意 HTML、响应点击、用 CSS 做动画。三维场景里的标注做不到这些,用浮层叠加是常见做法,代价是每帧要同步一次位置。

接口返回值说明
cartesianToCanvasCoordinatesCartesian2 / undefined世界坐标转画布像素
preRender事件在渲染前更新位置
scene.canvas.clientWidth像素画布 CSS 宽度

浮层没有深度信息,被建筑挡住时依然显示在最上层;需要真实遮挡时应改用实体标注。