div随轨迹运动 ·cssElementTrack· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Cesium Entity 高层实体 API效果说明本案例演示div随轨迹运动效果Cesium飞行轨迹跟踪弹窗示例在飞行器沿轨迹移动时显示一个跟随的弹窗显示当前位置信息核心用到 Cesium。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Viewer聚合 Scene、Camera、Clock 与渲染循环是 Cesium 应用入口。Entity面向点线面/模型/标签的高层 API与 Primitive 相比更适合交互与属性驱动。阅读下方完整源码时建议从init/load/animate三条主线入手再深入 shader 与工具函数。实现步骤创建 Viewer配置地形/影像若案例需要并设置初始相机在requestAnimationFrame循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as Cesium from cesium/**Cesium飞行轨迹跟踪弹窗示例在飞行器沿轨迹移动时显示一个跟随的弹窗显示当前位置信息*/ // 初始化区域 /**获取Cesium容器元素type {HTMLElement}*/ const box document.getElementById(box) /**初始化Cesium Viewer实例type {Cesium.Viewer}*/ const viewer new Cesium.Viewer(box, { animation: false, // 启用动画器件 baseLayerPicker: false, // 是否显示图层选择器右上角图层选择按钮 baseLayer: Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(GLOBAL_CONFIG.getLayerUrl())), fullscreenButton: false, // 是否显示全屏按钮右下角全屏选择按钮 timeline: false, // 是否显示时间轴 infoBox: false, // 是否显示信息框 }) // 隐藏Cesium Logo viewer._cesiumWidget._creditContainer.style.display none; // 启用地形深度测试确保正确渲染 viewer.scene.globe.depthTestAgainstTerrain false /**设置相机初始视角将视角定位到飞行轨迹中心区域*/ viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees(123, 34.32, 100000), // 目标位置 duration: 0 // 飞行时间秒 }) // 弹窗元素创建区域 /**创建CSS元素 - 跟踪信息弹窗用于显示飞行器的实时位置信息type {HTMLDivElement}*/ const trackInfoElement document.createElement(div) // 设置弹窗样式白底黑字带阴影和圆角 Object.assign(trackInfoElement.style, { backgroundColor: rgba(255, 255, 255, 0.9), // 白色半透明背景 color: black, // 黑色文字 padding: 8px 12px, // 内边距 borderRadius: 6px, // 圆角 fontWeight: bold, // 粗体文字 fontSize: 14px, // 字体大小 fontFamily: Arial, sans-serif, // 字体族 zIndex: auto, position: absolute, transform: translate(-50%, -110%), // 使元素中心对齐定位点上方 textAlign: center, minWidth: 150px // 最小宽度 }) // 将弹窗元素添加到CSS容器中 box.appendChild(trackInfoElement)// 飞行轨迹数据区域 /**定义飞行轨迹点包含一系列经纬度和高度坐标用于构建飞行路径type {Array }*/ const flightPositions [ Cesium.Cartesian3.fromDegrees(122.50, 34.70, 10000), // 终点 Cesium.Cartesian3.fromDegrees(123.46, 33.92, 10000), // 起点北京附近 ] // 飞行器实体创建区域 /**创建飞行路线实体在地图上可视化显示飞行轨迹type {Cesium.Entity}*/ const flightPath viewer.entities.add({ name: 飞行路线, polyline: { positions: flightPositions, // 路线点坐标 width: 3, // 线条宽度 material: Cesium.Color.RED, // 蓝色半透明材质 clampToGround: false // 不贴地 } }) /**创建飞行器模型实体使用采样位置属性和速度方向属性实现沿轨迹移动type {Cesium.Entity}*/ const myPoint viewer.entities.add({ position: new Cesium.SampledPositionProperty(), // 采样位置属性 point: { pixelSize: 10, color: Cesium.Color.YELLOW, }, })// 飞行路径设置区域 /**获取飞行器位置属性用于设置轨迹点type {Cesium.SampledPositionProperty}*/ const position myPoint.position /**每个轨迹点之间的时间间隔秒type {number}*/ const timeStep 20 /**创建时间序列为每个轨迹点分配时间通过在不同时间点采样位置实现平滑移动效果*/ for (let i 0; i flightPositions.length; i) { // 计算当前点的时间戳 const time Cesium.JulianDate.addSeconds( viewer.clock.startTime, // 起始时间 i * timeStep, // 时间偏移 new Cesium.JulianDate() // 结果时间 ) // 为该时间点添加位置采样 position.addSample(time, flightPositions[i]) } viewer.clock.shouldAnimate true // 启动动画 // 监听场景更新事件 viewer.scene.preUpdate.addEventListener(updateTrackInfoPosition) function updateTrackInfoPosition() { // 获取飞行器在当前时间的精确位置 const currentPosition myPoint.position.getValue(viewer.clock.currentTime) // 如果飞行器位置存在更新弹窗位置 if (currentPosition) { // 将地球上的三维位置转换为屏幕坐标 const windowCoord Cesium.SceneTransforms.worldToWindowCoordinates( viewer.scene, // 场景对象 currentPosition // 世界坐标 ) // 如果坐标转换成功更新弹窗位置和内容 if (windowCoord) { // 设置弹窗在屏幕上的位置 trackInfoElement.style.left windowCoord.x px trackInfoElement.style.top windowCoord.y px trackInfoElement.style.display block // 将笛卡尔坐标转换为地理坐标经纬度 const cartographic Cesium.Cartographic.fromCartesian(currentPosition) // 格式化地理坐标信息 const longitude Cesium.Math.toDegrees(cartographic.longitude).toFixed(6) // 经度 const latitude Cesium.Math.toDegrees(cartographic.latitude).toFixed(6) // 纬度 const height cartographic.height.toFixed(0) // 高度 // 更新弹窗内容显示实时位置信息 trackInfoElement.innerHTML 经度: ${longitude}°纬度: ${latitude}°高度: ${height}米} else { // 坐标转换失败时隐藏弹窗 trackInfoElement.style.display none } } else { // 飞行器位置不存在时隐藏弹窗 trackInfoElement.style.display none } }完整源码GitHub小结本文提供div随轨迹运动完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库