CSS 元素 ·CSS DOM Overlay· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么不用 Entity用原生 HTML做信息面板postRender每帧把世界坐标投影到屏幕像素SceneTransforms.worldToWindowCoordinates坐标转换背面/过远时隐藏 DOM效果说明北京坐标处有一个可点击的蓝色边框 div「2dDOM」随相机移动始终钉在地标上方过远或转到地球背面时自动隐藏。核心概念Cesium 内置HtmlOverlay / InfoBox等方案本案例演示最小自实现地理坐标 (Cartesian3)↓ worldToWindowCoordinates 屏幕像素 (x, y) ↓ CSS transform: translate DOM 定位容器层级const css2dContainer document.createElement(div);Object.assign(css2dContainer.style, { position: absolute, top: 0, left: 0, pointerEvents: none, // 容器穿透子元素可单独开启 zIndex: 1, }); box.appendChild(css2dContainer);postRender 同步viewer.scene.postRender.addEventListener(() {const windowCoord Cesium.SceneTransforms.worldToWindowCoordinates( viewer.scene, position ); if (windowCoord) { DOM.style.transform translate(${windowCoord.x}px, ${windowCoord.y - offsetHeight}px); } // 距离过远则隐藏 const maxDistance ...; DOM.style.display distance maxDistance ? none : block; });::: tip 与 Three.js CSS2DRenderer 对比 思路相同每帧投影 translate。Cesium 需自己算maxDistance处理背面。 :::实现步骤在 Viewer 容器外再套一层css2dContainer创建样式化 div设置pointerEvents: all以响应点击setCss2dDom(viewer, DOM, [lon, lat, height])注册 postRender返回 destroy 函数移除 DOM 并取消监听代码要点import * as Cesium from cesiumconst box document.getElementById(box)// 创建一个专门用于放置2dDOM的容器 const css2dContainer document.createElement(div)Object.assign(css2dContainer.style, {position: absolute,top: 0,left: 0,pointerEvents: none,zIndex: 1,})box.appendChild(css2dContainer)const viewer new Cesium.Viewer(box, {animation: false,//是否创建动画小器件左下角仪表baseLayerPicker: false,//是否显示图层选择器右上角图层选择按钮baseLayer: false, // 不显示默认图层fullscreenButton: false,//是否显示全屏按钮右下角全屏选择按钮timeline: false,//是否显示时间轴infoBox: false,//是否显示信息框})const url GLOBAL_CONFIG.getLayerUrl()const layer Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(url))viewer.imageryLayers.add(layer)// 创建2dDOM const DOM document.createElement(div)// 样式 Object.assign(DOM.style, {width: 100px,height: 30px,border: 1px solid blue,color: white,fontSize: 20px,cursor: pointer})DOM.innerHTML 2dDOMsetCss2dDom(viewer, DOM, [116.46, 39.92, 0]) // 设置2dDOM 移动viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(116.46, 39.92), point: { pixelSize: 10 } }) // 创建测试点viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(116.46, 39.92, 10000000) }) // 定位/设置2dDOM 移动/ function setCss2dDom(viewer, DOM, position) {if (!position) returnif (!(position instanceof Cesium.Cartesian3)) position Cesium.Cartesian3.fromDegrees(...position)Object.assign(DOM.style, {pointerEvents: all,zIndex: auto,})const { offsetHeight } DOMconst { camera, scene } viewercss2dContainer.appendChild(DOM)const destroy viewer.scene.postRender.addEventListener(() {const windowCoord Cesium.SceneTransforms.worldToWindowCoordinates(viewer.scene, position)if (windowCoord) {DOM.style.transform translate(${windowCoord.x}px, ${windowCoord.y - offsetHeight}px)}const maxDistance scene.globe.ellipsoid.cartesianToCartographic(camera.position).height scene.globe.ellipsoid.maximumRadiusCesium.Cartesian3.distance(camera.position, position) maxDistance ? DOM.style.display none : DOM.style.display block})return () {viewer.css2dContainer.removeChild(DOM)destroy()}}完整源码GitHub小结本文提供CSS 元素完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库