路线导航 ·Route Nav· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么Cesium Entity 高层实体 API效果说明本案例演示路线导航效果基于 WebGL 实现「路线导航」可视化效果附完整可运行源码核心用到 Cesium。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Viewer聚合 Scene、Camera、Clock 与渲染循环是 Cesium 应用入口。Entity面向点线面/模型/标签的高层 API与 Primitive 相比更适合交互与属性驱动。阅读下方完整源码时建议从init/load/animate三条主线入手再深入 shader 与工具函数。实现步骤创建 Viewer配置地形/影像若案例需要并设置初始相机在requestAnimationFrame循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as Cesium from cesiumconst box document.getElementById(box)const viewer new Cesium.Viewer(box, {animation: false,//是否创建动画小器件左下角仪表baseLayerPicker: false,//是否显示图层选择器右上角图层选择按钮baseLayer: false, // 不显示默认图层fullscreenButton: false,//是否显示全屏按钮右下角全屏选择按钮timeline: false,//是否显示时间轴infoBox: false,//是否显示信息框})const layer Cesium.ImageryLayer.fromProviderAsync(Cesium.ArcGisMapServerImageryProvider.fromUrl(GLOBAL_CONFIG.getLayerUrl()))viewer.imageryLayers.add(layer)const list [ { longitude: 116.3877535895933, latitude: 39.917986883763334, height: 5 }, { longitude: 116.3879258383737, latitude: 39.91794008705796, height: 5 }, { longitude: 116.38861928968578, latitude: 39.91781284391525, height: 5 }, { longitude: 116.38869191428421, latitude: 39.91818495388228, height: 5 } ]const cartesianPoints list.map(item { const { longitude, latitude, height } item return Cesium.Cartesian3.fromDegrees(longitude, latitude, height) })// CatmullRomSpline 插值 const catmullRomSpline new Cesium.CatmullRomSpline({ points: cartesianPoints, times: cartesianPoints.map((_, index) index / (cartesianPoints.length - 1)) })const numPoints 1000 // 插值点数量 const interpolatedPoints [] for (let i 0; i numPoints; i) { const t i / (numPoints - 1) const point catmullRomSpline.evaluate(t) interpolatedPoints.push(point) }viewer.entities.add({ name: 路线, polyline: { positions: interpolatedPoints, width: 1, material: Cesium.Color.RED } })// 添加无人机 const entity viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(list[0].longitude, list[0].latitude, 7), model: { uri: FILE_HOST /models/uav.glb }, viewFrom: new Cesium.Cartesian3(0, -20, 10) // 设置第三人称视角偏移后方20米上方10米 }) viewer.trackedEntity entity // 设置相机跟随飞机// 动画 const start Cesium.JulianDate.fromDate(new Date()) // 设置起始时间 const speedFactor 50 // 设置速度因子值越大速度越快 let stop Cesium.JulianDate.addSeconds(start, interpolatedPoints.length / speedFactor, new Cesium.JulianDate())function setProperty(t1, t2) { const property new Cesium.SampledPositionProperty() for (let i 0; i interpolatedPoints.length; i) property.addSample(Cesium.JulianDate.addSeconds(t1, i / speedFactor, new Cesium.JulianDate()), interpolatedPoints[i]) entity.position property entity.orientation new Cesium.VelocityOrientationProperty(property) entity.availability new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({ start: t1, stop: t2 })]) }setProperty(start, stop)// 监听飞机的位置属性当飞机到达终点时重新设置位置属性 viewer.clock.onTick.addEventListener(function (clock) { if (Cesium.JulianDate.compare(clock.currentTime, stop) 0) { const newStart Cesium.JulianDate.clone(stop); stop Cesium.JulianDate.addSeconds(newStart, interpolatedPoints.length / speedFactor, new Cesium.JulianDate()); setProperty(newStart, stop) } })viewer.clock.shouldAnimate true // 开始动画完整源码GitHub小结本文提供路线导航完整 Cesium.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Cesium.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库
