简介这是一份基于CesiumJS的无人机航线规划实现源码包面向三维GIS和Web前端开发者完整复刻大疆司空2的航线设计、动态渲染与交互逻辑。项目针对航线箭头渲染这一核心难点采用离屏Canvas动态生成箭头位图再通过Cesium.Primitive与Cesium.Material绑定至PolylineGeometry实现每50米插入定向箭头、随缩放调节尺寸等效果。源码包含3个文件1个HTML主文件、1个InsCode配置、1个gitignore压缩包仅8KB体积小巧但功能完整HTML文件内含坐标转换、航迹解算、交互控制等核心逻辑适合直接运行调试。目前已有50人学习下载。读者可从中获得一套可运行的三维航线Demo、Canvas箭头图元的高效实现思路以及React18控制面板与Cesium Viewer的组合范例对解决同类地图轨迹箭头渲染问题有直接参考价值。1. Cesium航线规划从画一条线到能落地的飞行任务如果你用 Cesium 做过可视化大概率已经会画折线了给个数组加个 Polyline一条航线就出现在球上。但真到了做航线规划事情完全不是这样。你要面对的是地形起伏、坐标转换、飞行姿态、速度曲线还有看起来在飞和真正能飞之间的巨大差距。Cesium 的航线规划实现核心不是绘图 API而是把经纬高数组转成一条符合飞行逻辑、能在三维场景里被正确解释的路径——再配上可运行的源码才能算数。这篇文章要拆的就是一条从坐标处理、轨迹生成、动态飞行到相机跟随的完整链路。适合已经做过 Cesium 基础开发、想深入做飞行模拟或态势展示的人也适合刚接手航线规划需求、被转弯半径航向角搞得一头雾水的入门开发者。先说结论一个能用的航线规划 Demo核心代码量不到 300 行但坑通常在你看不见的地方。2. 航线规划的数据基础坐标系、采样点与航段拆分2.1 经纬高数组只是输入不是航线几乎所有航线规划都从一组航点开始形如(lng, lat, height)。但这类原始数组直接丢给 Cesium 画线会出现三个问题高程是椭球高还是海拔高没区分、航点之间是直线还是平滑曲线没定义、转弯处的飞行姿态完全没有。换句话说原始数组只是地理参考点不是可飞航线。我一般会先把航点分成两类航路点Waypoint和转弯点Turn Point。航路点是任务要求的必经位置转弯点则是为了满足飞行性能在航路点之间插入的过渡位置。最简单的做法——在两个航路点之间按固定时间间隔插值生成一串密集采样点再用 Cesium 的样条曲线去连接这些点。这样既保证了路径贴合航路点又让转弯看起来像一个真正的飞行轨迹。// 输入两个航路点 p1、p2插值步数 steps // 输出采样点数组经纬高 function interpolateLeg(p1, p2, steps) { const points []; for (let i 0; i steps; i) { const t i / steps; const lng p1.lng (p2.lng - p1.lng) * t; const lat p1.lat (p2.lat - p1.lat) * t; const height p1.height (p2.height - p1.height) * t; points.push({ lng, lat, height }); } return points; }这段代码的逻辑很直白t从 0 到 1 线性变化每个点都是两个航路点的加权平均。steps决定这一段的采样密度——经验值是每 30 到 50 米一个点太密了轨迹平滑但性能差太疏了转弯看起来像折线。注意这里的高程是直接线性插值如果你的航线跨越地形起伏区域需要额外叠加地形高度否则飞机会穿地。2.2 为什么要转成 Cartesian3渲染与计算的统一坐标Cesium 内部的所有几何计算都基于 Cartesian3地心直角坐标经纬高只是人类友好的输入格式。航线规划的后续计算——点到点距离、航向角、转弯半径、速度方向——全部在 Cartesian3 下才稳定。有人图省事直接用经纬度算距离结果在跨半球时算出来的角度是错的这就是典型的坐标换算翻车现场。// 经纬高转 Cartesian3并计算两点间地面距离 import * as Cesium from cesium; function toCartesian(lng, lat, height) { return Cesium.Cartesian3.fromDegrees(lng, lat, height); } function distanceInMeters(a, b) { return Cesium.Cartesian3.distance(a, b); }fromDegrees默认使用 WGS84 椭球返回的是地心坐标系下的向量。Cartesian3.distance算的是三维直线距离不是地面距离但对于航线规划来说够用——飞行器的运动本来就是三维的。这里有一个容易被忽略的细节height单位是米而lng/lat是十进制度数Cesium 的 API 已经处理了单位换算但你自己写插值逻辑时千万别混。2.3 航段拆分一条航线 N 个直飞段 N-1 个转弯段拿到多条航段的采样点后不能直接连起来。因为相邻两条航段在航路点处的切线方向不同直接拼接会出现一个尖角。真实飞行是平滑转弯的所以要识别出转弯段并单独处理。识别方法很简单判断两段航向的夹角夹角大于预设阈值通常 15 度就视为转弯。// 计算两个连续航段的航向角变化量 function headingChange(p1, p2, p3) { const h1 heading(p1, p2); const h2 heading(p2, p3); let delta Math.abs(h2 - h1); if (delta 180) delta 360 - delta; // 处理跨越正北/正南的情况 return delta; } function heading(a, b) { const dLng b.lng - a.lng; const dLat b.lat - a.lat; // 纯几何估算航向不做球面修正 return (Math.atan2(dLng, dLat) * 180) / Math.PI; }这段代码是简化的平面航向计算够用但不严谨。如果航线纬度跨度大需要换成大圆航线上的起始方位角公式。不管用哪种核心思路是把航线拆成直线段 转弯段的结构后续的平滑和速度规划都基于这个结构来做。3. 轨迹生成与平滑样条插值的选型与参数3.1 为什么不用 Catmull-Rom 直接连航路点网上搜 Cesium 航线规划一半的答案会让你用CatmullRomSpline代码两三行看起来平滑漂亮。但 Catmull-Rom 样条有一个致命弱点它不保证经过中间控制点只是靠近。在可视化里这叫好看在航线规划里这叫偏航。飞行器任务要求必须经过航路点偏出去哪怕几百米也可能是事故。所以我更推荐的做法是先用线性插值把每个航段加密到足够密度再对整条密集点序列做一次平滑。常见的平滑方案是 Savitzky-Golay 滤波或者简单的滑动平均。滑动平均会把拐角处拉得太圆而 Savitzky-Golay 能在保持形状的同时消除抖动。Cesium 里没有现成的滤波工具需要自己实现或者引入数值计算库。// 对点序列做滑动平均平滑windowSize 为窗口大小 function smoothPoints(points, windowSize 5) { const result []; for (let i 0; i points.length; i) { let sumLng 0, sumLat 0, sumH 0, count 0; for (let j Math.max(0, i - windowSize); j Math.min(points.length - 1, i windowSize); j) { sumLng points[j].lng; sumLat points[j].lat; sumH points[j].height; count; } result.push({ lng: sumLng / count, lat: sumLat / count, height: sumH / count, }); } return result; }窗口大小是核心参数。我试下来windowSize 3效果最自然windowSize 5会让转弯明显变缓适合宽体机或者姿态变化慢的载荷。注意窗口太大导致航路点被吞噬——航线不再经过原始航路点。这就是平滑的代价没有免费的午餐要好看就得接受一定程度的偏差。3.2 用 Hermite 样条控制切线方向如果滑动平均精度不够另一个做法是 Hermite 样条。跟 Catmull-Rom 不同Hermite 样条需要你指定每个点处的切线方向这正好跟航向角契合。我一般会先算出每个航路点的目标航向由前后航路点决定再用 Hermite 插值生成转弯段直线段保持线性。// Hermite 插值给定 p0、p1 和两端切线方向生成中间点 function hermiteInterpolate(p0, p1, m0, m1, t) { const h00 2 * t ** 3 - 3 * t ** 2 1; const h10 t ** 3 - 2 * t ** 2 t; const h01 -2 * t ** 3 3 * t ** 2; const h11 t ** 3 - t ** 2; return { x: h00 * p0.x h10 * m0.x h01 * p1.x h11 * m1.x, y: h00 * p0.y h10 * m0.y h01 * p1.y h11 * m1.y, z: h00 * p0.z h10 * m0.z h01 * p1.z h11 * m1.z, }; }3.3 生成最终渲染轨迹合并直线与转弯把直线段的密集采样点、转弯段的 Hermite 插值点按顺序合并得到的就是完整的飞行轨迹点数组。这个数组既是画线用的数据源也是后续动态飞行仿真要逐帧读取的数据源所以建议直接用Cesium.Cartesian3[]存。function buildFlightPath(waypoints, turnThreshold 15) { const allPoints []; for (let i 0; i waypoints.length - 1; i) { const p1 waypoints[i]; const p2 waypoints[i 1]; // 直线段加密采样 const legPoints interpolateLeg(p1, p2, 20); allPoints.push(...legPoints); // 省略根据 headingChange 判断转弯并替换部分直线点为 Hermite 插值点 } return allPoints.map((p) toCartesian(p.lng, p.lat, p.height)); }这里的turnThreshold是判断转弯的夹角阈值15 度是个不错的起点。小于 15 度的航向变化基本看不出转弯直接用直线连大于 15 度才需要平滑处理。你们在实际项目中可能要根据飞行器的最大坡度角来反推这个阈值——转弯越急需要的半径越大阈值就设得越小。4. 动态飞行与相机跟随实体驱动与视线控制4.1 用 SampledPositionProperty 驱动飞机运动轨迹数据准备好了接下来让飞机动起来。Cesium 的标准做法是SampledPositionProperty——它是一个时间序列属性告诉实体在什么时刻应该出现在哪个位置。你只需要给出时间 位置的键值对列表Cesium 会自动插值计算中间姿态。function createFlightEntity(viewer, pathPoints, totalSeconds) { const positionProperty new Cesium.SampledPositionProperty(); for (let i 0; i pathPoints.length; i) { const time Cesium.JulianDate.addSeconds( viewer.clock.startTime, (totalSeconds * i) / pathPoints.length, new Cesium.JulianDate() ); positionProperty.addSample(time, pathPoints[i]); } return viewer.entities.add({ position: positionProperty, orientation: new Cesium.VelocityOrientationProperty(positionProperty), model: { uri: mini_plane.glb }, path: { width: 2, material: Cesium.Color.CYAN, leadTime: 0, trailTime: totalSeconds, }, }); }关键参数有三个totalSeconds是飞行总时长VelocityOrientationProperty会自动根据速度方向计算出朝向trailTime控制拖尾长度。把trailTime设成跟totalSeconds一样就能看到整条航迹设成 10 就只有最近 10 秒的轨迹。Cesium 默认的插值是线性插值对于高速飞行的实体姿态会显得跳。可以给SampledPositionProperty设置forwardExtrapolationType和backwardExtrapolationType但真正要平滑姿态还是得用VelocityOrientationProperty配合密集采样——这就是前面强调采样密度要够的原因。4.2 相机跟随第一人称 vs 上帝视角动态飞行最影响观感的其实是相机。上帝视角适合看全局地面覆盖第一人称视角适合看目标区域细节。Cesium 自带的viewer.trackedEntity能实现简单的实体跟随但视角锁定方式很死板。我一般会放弃内置锁定自己写一个跟随逻辑function followEntity(viewer, entity, mode FPV) { viewer.clock.onTick.addEventListener(() { const pos entity.position.getValue(viewer.clock.currentTime); if (!pos) return; if (mode FPV) { // 第一人称相机位置绑定到机头前方轻微偏移朝向沿速度方向 viewer.camera.position pos; const orientation entity.orientation.getValue(viewer.clock.currentTime); viewer.camera.setTransform(new Cesium.Matrix4()); } else { // 上帝视角相机保持在实体后上方 const offset new Cesium.Cartesian3(0, -500, 500); const newPos Cesium.Cartesian3.add(pos, offset, new Cesium.Cartesian3()); viewer.camera.lookAt(pos, new Cesium.HeadingPitchRange(0, -0.3, 800)); } }); }lookAt加HeadingPitchRange是一个比想象中好用的组合——无论飞机怎么转弯相机都能保持在一个相对位置。唯一的坑是HeadingPitchRange的 heading 是相对正北的如果你的飞机在短时间内大幅度转向相机切换方向会很突兀。解决办法是在每帧更新时重新计算相对 heading而不是固定一个值。4.3 速度曲线匀速是最省事的陷阱标准 Demo 里速度都是匀速的但真实任务中巡航段速度快、转弯段速度慢。如果你直接改totalSeconds要全航线重采样很不优雅。更好的方案是给每个采样点分配不同的时间权重——转弯段附近时间步长加大速度变慢直线段时间步长缩小速度变快。// 根据转弯角度调整每个采样点的时间权重 function timeWeight(pointIndex, headingDeltas, baseWeight 1) { const delta Math.abs(headingDeltas[pointIndex]) || 0; // 转弯越急时间权重越大即速度越慢 return baseWeight delta / 90; // 最大放大 2 倍 }这个函数返回的是时间权重构建SampledPositionProperty时把权重累加得到每个点的时间戳。实现上你可以在createFlightEntity之前先对轨迹做一次预处理算完权重再生成时间序列。注意权重的范围不要太大否则飞机会在转弯处显得卡顿。5. 避坑Cesium 航线规划实战中的五个常见问题5.1 地形穿透飞机贴着地形飞但模型却扎进山里现象轨迹在地形上方 50 米但飞机模型的底部却陷入山体。 原因航点的高程是海拔高而 Cesium 默认地形是 WGS84 椭球高二者基准面不同在山区差距可达上百米。 解决用Cesium.sampleTerrainMostDetailed去获取地形高度然后把航点高度加到地形高度之上。async function getTerrainAdjustedHeight(positions, viewer) { const terrainPositions await Cesium.sampleTerrainMostDetailed( viewer.terrainProvider, positions.map((p) Cesium.Cartographic.fromDegrees(p.lng, p.lat)) ); return positions.map((p, i) { const terrainHeight terrainPositions[i].height; return { lng: p.lng, lat: p.lat, height: p.height terrainHeight }; }); }5.2 跨 180 度经线航线显示成了一个从地球另一侧绕过去的诡异弧线现象从东经 170 度飞到西经 -170 度Cesium 画的线绕了大半个地球。 原因经纬度的线性插值不做绕圈处理170 到 -170 直接插值等于穿过了 0 度经线。 解决插值前先判断经度差是否超过 180如果超过则对目标经度加 360 再做插值。function normalizeLngInterpolation(lng1, lng2) { let diff lng2 - lng1; if (diff 180) lng2 - 360; if (diff -180) lng2 360; return lng2; }5.3 模型不转方向飞机始终朝正北飞现象飞机沿着轨迹飞行但机头永远朝向正北。 原因模型自带的朝向是正北VelocityOrientationProperty有时会因为采样间隔过大而计算不出有效速度向量。 解决把采样点加密或者不用模型改用Cesium.Billboard加rotation属性来展示方向。5.4 性能卡顿航线点数上万个页面明显掉帧现象轨迹平滑做得越好点越多旋转视角时越来越卡。 原因Cesium 的Polyline对点数敏感的尤其是动态拖尾每次都重新生成几何体。 解决把直线段用降采样合并——直线上的每 10 个点取一个转弯段保持全量拖尾用trailTime限制长度不要无限长。5.5 时间轴错乱飞行器和拖尾不同步现象飞机已经飞到终点但拖尾还在起点附近。 原因SampledPositionProperty的时间戳和 viewer 的 clock 时间基准不一致通常是startTime设置得不对。 解决统一用viewer.clock.currentTime作为时间基准createFlightEntity里的所有时间戳都基于它做偏移不要自己 new 一个JulianDate。6. 进阶把航线规划封装成工具函数与可视化飞行剖面做到这一步你已经有一个能跑的航线规划 Demo。再往下走我会推荐做三件事一是把前面的坐标转换、插值、平滑逻辑抽成一个独立的FlightPathGenerator模块输入航路点和参数输出采样点和时间序列二是加一个高度剖面图用二三维联动实时反映飞行高度变化三是把参数面板做成动态调参飞行途中改速度或转弯阈值立即重算。class FlightPathGenerator { constructor(waypoints, config) { this.waypoints waypoints; this.config config; // { totalSeconds, turnThreshold, smoothWindow, density } } generate() { const dense this.interpolateAllLegs(); const smoothed smoothPoints(dense, this.config.smoothWindow); const cartesian smoothed.map((p) toCartesian(p.lng, p.lat, p.height)); return { points: cartesian, times: this.generateTimeline(cartesian.length), }; } }封装的过程中你会发现参数的可调范围其实代表了你对飞行任务的深层理解——turnThreshold对应飞行器能承受的最大横滚角density对应导航数据的刷新率smoothWindow对应自动驾驶仪的响应带宽。把这些参数暴露出来等于是把你头脑里的经验转化成了产品里别人也能用的旋钮。最后说一个我自己的习惯不管 Demo 多简单我都会在页面上留一个重置参数按钮和一份当前航线的 JSON 导出功能。前者是调参翻车之后的后悔药后者是实机飞行前在别的工具里二次验证的数据源。很多时候航线规划的问题不是出在 Cesium 的渲染里而是初始数据本身就不合理——你导出 JSON 用别的手段检查一遍往往比在球上反复转视角更快发现问题。希望这套从坐标处理到动态飞行的链路能帮你少踩几个看不见的坑。本文还有配套的精品资源点击获取
简介这是一份基于CesiumJS的无人机航线规划实现源码包面向三维GIS和Web前端开发者完整复刻大疆司空2的航线设计、动态渲染与交互逻辑。项目针对航线箭头渲染这一核心难点采用离屏Canvas动态生成箭头位图再通过Cesium.Primitive与Cesium.Material绑定至PolylineGeometry实现每50米插入定向箭头、随缩放调节尺寸等效果。源码包含3个文件1个HTML主文件、1个InsCode配置、1个gitignore压缩包仅8KB体积小巧但功能完整HTML文件内含坐标转换、航迹解算、交互控制等核心逻辑适合直接运行调试。目前已有50人学习下载。读者可从中获得一套可运行的三维航线Demo、Canvas箭头图元的高效实现思路以及React18控制面板与Cesium Viewer的组合范例对解决同类地图轨迹箭头渲染问题有直接参考价值。1. Cesium航线规划从画一条线到能落地的飞行任务如果你用 Cesium 做过可视化大概率已经会画折线了给个数组加个 Polyline一条航线就出现在球上。但真到了做航线规划事情完全不是这样。你要面对的是地形起伏、坐标转换、飞行姿态、速度曲线还有看起来在飞和真正能飞之间的巨大差距。Cesium 的航线规划实现核心不是绘图 API而是把经纬高数组转成一条符合飞行逻辑、能在三维场景里被正确解释的路径——再配上可运行的源码才能算数。这篇文章要拆的就是一条从坐标处理、轨迹生成、动态飞行到相机跟随的完整链路。适合已经做过 Cesium 基础开发、想深入做飞行模拟或态势展示的人也适合刚接手航线规划需求、被转弯半径航向角搞得一头雾水的入门开发者。先说结论一个能用的航线规划 Demo核心代码量不到 300 行但坑通常在你看不见的地方。2. 航线规划的数据基础坐标系、采样点与航段拆分2.1 经纬高数组只是输入不是航线几乎所有航线规划都从一组航点开始形如(lng, lat, height)。但这类原始数组直接丢给 Cesium 画线会出现三个问题高程是椭球高还是海拔高没区分、航点之间是直线还是平滑曲线没定义、转弯处的飞行姿态完全没有。换句话说原始数组只是地理参考点不是可飞航线。我一般会先把航点分成两类航路点Waypoint和转弯点Turn Point。航路点是任务要求的必经位置转弯点则是为了满足飞行性能在航路点之间插入的过渡位置。最简单的做法——在两个航路点之间按固定时间间隔插值生成一串密集采样点再用 Cesium 的样条曲线去连接这些点。这样既保证了路径贴合航路点又让转弯看起来像一个真正的飞行轨迹。// 输入两个航路点 p1、p2插值步数 steps // 输出采样点数组经纬高 function interpolateLeg(p1, p2, steps) { const points []; for (let i 0; i steps; i) { const t i / steps; const lng p1.lng (p2.lng - p1.lng) * t; const lat p1.lat (p2.lat - p1.lat) * t; const height p1.height (p2.height - p1.height) * t; points.push({ lng, lat, height }); } return points; }这段代码的逻辑很直白t从 0 到 1 线性变化每个点都是两个航路点的加权平均。steps决定这一段的采样密度——经验值是每 30 到 50 米一个点太密了轨迹平滑但性能差太疏了转弯看起来像折线。注意这里的高程是直接线性插值如果你的航线跨越地形起伏区域需要额外叠加地形高度否则飞机会穿地。2.2 为什么要转成 Cartesian3渲染与计算的统一坐标Cesium 内部的所有几何计算都基于 Cartesian3地心直角坐标经纬高只是人类友好的输入格式。航线规划的后续计算——点到点距离、航向角、转弯半径、速度方向——全部在 Cartesian3 下才稳定。有人图省事直接用经纬度算距离结果在跨半球时算出来的角度是错的这就是典型的坐标换算翻车现场。// 经纬高转 Cartesian3并计算两点间地面距离 import * as Cesium from cesium; function toCartesian(lng, lat, height) { return Cesium.Cartesian3.fromDegrees(lng, lat, height); } function distanceInMeters(a, b) { return Cesium.Cartesian3.distance(a, b); }fromDegrees默认使用 WGS84 椭球返回的是地心坐标系下的向量。Cartesian3.distance算的是三维直线距离不是地面距离但对于航线规划来说够用——飞行器的运动本来就是三维的。这里有一个容易被忽略的细节height单位是米而lng/lat是十进制度数Cesium 的 API 已经处理了单位换算但你自己写插值逻辑时千万别混。2.3 航段拆分一条航线 N 个直飞段 N-1 个转弯段拿到多条航段的采样点后不能直接连起来。因为相邻两条航段在航路点处的切线方向不同直接拼接会出现一个尖角。真实飞行是平滑转弯的所以要识别出转弯段并单独处理。识别方法很简单判断两段航向的夹角夹角大于预设阈值通常 15 度就视为转弯。// 计算两个连续航段的航向角变化量 function headingChange(p1, p2, p3) { const h1 heading(p1, p2); const h2 heading(p2, p3); let delta Math.abs(h2 - h1); if (delta 180) delta 360 - delta; // 处理跨越正北/正南的情况 return delta; } function heading(a, b) { const dLng b.lng - a.lng; const dLat b.lat - a.lat; // 纯几何估算航向不做球面修正 return (Math.atan2(dLng, dLat) * 180) / Math.PI; }这段代码是简化的平面航向计算够用但不严谨。如果航线纬度跨度大需要换成大圆航线上的起始方位角公式。不管用哪种核心思路是把航线拆成直线段 转弯段的结构后续的平滑和速度规划都基于这个结构来做。3. 轨迹生成与平滑样条插值的选型与参数3.1 为什么不用 Catmull-Rom 直接连航路点网上搜 Cesium 航线规划一半的答案会让你用CatmullRomSpline代码两三行看起来平滑漂亮。但 Catmull-Rom 样条有一个致命弱点它不保证经过中间控制点只是靠近。在可视化里这叫好看在航线规划里这叫偏航。飞行器任务要求必须经过航路点偏出去哪怕几百米也可能是事故。所以我更推荐的做法是先用线性插值把每个航段加密到足够密度再对整条密集点序列做一次平滑。常见的平滑方案是 Savitzky-Golay 滤波或者简单的滑动平均。滑动平均会把拐角处拉得太圆而 Savitzky-Golay 能在保持形状的同时消除抖动。Cesium 里没有现成的滤波工具需要自己实现或者引入数值计算库。// 对点序列做滑动平均平滑windowSize 为窗口大小 function smoothPoints(points, windowSize 5) { const result []; for (let i 0; i points.length; i) { let sumLng 0, sumLat 0, sumH 0, count 0; for (let j Math.max(0, i - windowSize); j Math.min(points.length - 1, i windowSize); j) { sumLng points[j].lng; sumLat points[j].lat; sumH points[j].height; count; } result.push({ lng: sumLng / count, lat: sumLat / count, height: sumH / count, }); } return result; }窗口大小是核心参数。我试下来windowSize 3效果最自然windowSize 5会让转弯明显变缓适合宽体机或者姿态变化慢的载荷。注意窗口太大导致航路点被吞噬——航线不再经过原始航路点。这就是平滑的代价没有免费的午餐要好看就得接受一定程度的偏差。3.2 用 Hermite 样条控制切线方向如果滑动平均精度不够另一个做法是 Hermite 样条。跟 Catmull-Rom 不同Hermite 样条需要你指定每个点处的切线方向这正好跟航向角契合。我一般会先算出每个航路点的目标航向由前后航路点决定再用 Hermite 插值生成转弯段直线段保持线性。// Hermite 插值给定 p0、p1 和两端切线方向生成中间点 function hermiteInterpolate(p0, p1, m0, m1, t) { const h00 2 * t ** 3 - 3 * t ** 2 1; const h10 t ** 3 - 2 * t ** 2 t; const h01 -2 * t ** 3 3 * t ** 2; const h11 t ** 3 - t ** 2; return { x: h00 * p0.x h10 * m0.x h01 * p1.x h11 * m1.x, y: h00 * p0.y h10 * m0.y h01 * p1.y h11 * m1.y, z: h00 * p0.z h10 * m0.z h01 * p1.z h11 * m1.z, }; }3.3 生成最终渲染轨迹合并直线与转弯把直线段的密集采样点、转弯段的 Hermite 插值点按顺序合并得到的就是完整的飞行轨迹点数组。这个数组既是画线用的数据源也是后续动态飞行仿真要逐帧读取的数据源所以建议直接用Cesium.Cartesian3[]存。function buildFlightPath(waypoints, turnThreshold 15) { const allPoints []; for (let i 0; i waypoints.length - 1; i) { const p1 waypoints[i]; const p2 waypoints[i 1]; // 直线段加密采样 const legPoints interpolateLeg(p1, p2, 20); allPoints.push(...legPoints); // 省略根据 headingChange 判断转弯并替换部分直线点为 Hermite 插值点 } return allPoints.map((p) toCartesian(p.lng, p.lat, p.height)); }这里的turnThreshold是判断转弯的夹角阈值15 度是个不错的起点。小于 15 度的航向变化基本看不出转弯直接用直线连大于 15 度才需要平滑处理。你们在实际项目中可能要根据飞行器的最大坡度角来反推这个阈值——转弯越急需要的半径越大阈值就设得越小。4. 动态飞行与相机跟随实体驱动与视线控制4.1 用 SampledPositionProperty 驱动飞机运动轨迹数据准备好了接下来让飞机动起来。Cesium 的标准做法是SampledPositionProperty——它是一个时间序列属性告诉实体在什么时刻应该出现在哪个位置。你只需要给出时间 位置的键值对列表Cesium 会自动插值计算中间姿态。function createFlightEntity(viewer, pathPoints, totalSeconds) { const positionProperty new Cesium.SampledPositionProperty(); for (let i 0; i pathPoints.length; i) { const time Cesium.JulianDate.addSeconds( viewer.clock.startTime, (totalSeconds * i) / pathPoints.length, new Cesium.JulianDate() ); positionProperty.addSample(time, pathPoints[i]); } return viewer.entities.add({ position: positionProperty, orientation: new Cesium.VelocityOrientationProperty(positionProperty), model: { uri: mini_plane.glb }, path: { width: 2, material: Cesium.Color.CYAN, leadTime: 0, trailTime: totalSeconds, }, }); }关键参数有三个totalSeconds是飞行总时长VelocityOrientationProperty会自动根据速度方向计算出朝向trailTime控制拖尾长度。把trailTime设成跟totalSeconds一样就能看到整条航迹设成 10 就只有最近 10 秒的轨迹。Cesium 默认的插值是线性插值对于高速飞行的实体姿态会显得跳。可以给SampledPositionProperty设置forwardExtrapolationType和backwardExtrapolationType但真正要平滑姿态还是得用VelocityOrientationProperty配合密集采样——这就是前面强调采样密度要够的原因。4.2 相机跟随第一人称 vs 上帝视角动态飞行最影响观感的其实是相机。上帝视角适合看全局地面覆盖第一人称视角适合看目标区域细节。Cesium 自带的viewer.trackedEntity能实现简单的实体跟随但视角锁定方式很死板。我一般会放弃内置锁定自己写一个跟随逻辑function followEntity(viewer, entity, mode FPV) { viewer.clock.onTick.addEventListener(() { const pos entity.position.getValue(viewer.clock.currentTime); if (!pos) return; if (mode FPV) { // 第一人称相机位置绑定到机头前方轻微偏移朝向沿速度方向 viewer.camera.position pos; const orientation entity.orientation.getValue(viewer.clock.currentTime); viewer.camera.setTransform(new Cesium.Matrix4()); } else { // 上帝视角相机保持在实体后上方 const offset new Cesium.Cartesian3(0, -500, 500); const newPos Cesium.Cartesian3.add(pos, offset, new Cesium.Cartesian3()); viewer.camera.lookAt(pos, new Cesium.HeadingPitchRange(0, -0.3, 800)); } }); }lookAt加HeadingPitchRange是一个比想象中好用的组合——无论飞机怎么转弯相机都能保持在一个相对位置。唯一的坑是HeadingPitchRange的 heading 是相对正北的如果你的飞机在短时间内大幅度转向相机切换方向会很突兀。解决办法是在每帧更新时重新计算相对 heading而不是固定一个值。4.3 速度曲线匀速是最省事的陷阱标准 Demo 里速度都是匀速的但真实任务中巡航段速度快、转弯段速度慢。如果你直接改totalSeconds要全航线重采样很不优雅。更好的方案是给每个采样点分配不同的时间权重——转弯段附近时间步长加大速度变慢直线段时间步长缩小速度变快。// 根据转弯角度调整每个采样点的时间权重 function timeWeight(pointIndex, headingDeltas, baseWeight 1) { const delta Math.abs(headingDeltas[pointIndex]) || 0; // 转弯越急时间权重越大即速度越慢 return baseWeight delta / 90; // 最大放大 2 倍 }这个函数返回的是时间权重构建SampledPositionProperty时把权重累加得到每个点的时间戳。实现上你可以在createFlightEntity之前先对轨迹做一次预处理算完权重再生成时间序列。注意权重的范围不要太大否则飞机会在转弯处显得卡顿。5. 避坑Cesium 航线规划实战中的五个常见问题5.1 地形穿透飞机贴着地形飞但模型却扎进山里现象轨迹在地形上方 50 米但飞机模型的底部却陷入山体。 原因航点的高程是海拔高而 Cesium 默认地形是 WGS84 椭球高二者基准面不同在山区差距可达上百米。 解决用Cesium.sampleTerrainMostDetailed去获取地形高度然后把航点高度加到地形高度之上。async function getTerrainAdjustedHeight(positions, viewer) { const terrainPositions await Cesium.sampleTerrainMostDetailed( viewer.terrainProvider, positions.map((p) Cesium.Cartographic.fromDegrees(p.lng, p.lat)) ); return positions.map((p, i) { const terrainHeight terrainPositions[i].height; return { lng: p.lng, lat: p.lat, height: p.height terrainHeight }; }); }5.2 跨 180 度经线航线显示成了一个从地球另一侧绕过去的诡异弧线现象从东经 170 度飞到西经 -170 度Cesium 画的线绕了大半个地球。 原因经纬度的线性插值不做绕圈处理170 到 -170 直接插值等于穿过了 0 度经线。 解决插值前先判断经度差是否超过 180如果超过则对目标经度加 360 再做插值。function normalizeLngInterpolation(lng1, lng2) { let diff lng2 - lng1; if (diff 180) lng2 - 360; if (diff -180) lng2 360; return lng2; }5.3 模型不转方向飞机始终朝正北飞现象飞机沿着轨迹飞行但机头永远朝向正北。 原因模型自带的朝向是正北VelocityOrientationProperty有时会因为采样间隔过大而计算不出有效速度向量。 解决把采样点加密或者不用模型改用Cesium.Billboard加rotation属性来展示方向。5.4 性能卡顿航线点数上万个页面明显掉帧现象轨迹平滑做得越好点越多旋转视角时越来越卡。 原因Cesium 的Polyline对点数敏感的尤其是动态拖尾每次都重新生成几何体。 解决把直线段用降采样合并——直线上的每 10 个点取一个转弯段保持全量拖尾用trailTime限制长度不要无限长。5.5 时间轴错乱飞行器和拖尾不同步现象飞机已经飞到终点但拖尾还在起点附近。 原因SampledPositionProperty的时间戳和 viewer 的 clock 时间基准不一致通常是startTime设置得不对。 解决统一用viewer.clock.currentTime作为时间基准createFlightEntity里的所有时间戳都基于它做偏移不要自己 new 一个JulianDate。6. 进阶把航线规划封装成工具函数与可视化飞行剖面做到这一步你已经有一个能跑的航线规划 Demo。再往下走我会推荐做三件事一是把前面的坐标转换、插值、平滑逻辑抽成一个独立的FlightPathGenerator模块输入航路点和参数输出采样点和时间序列二是加一个高度剖面图用二三维联动实时反映飞行高度变化三是把参数面板做成动态调参飞行途中改速度或转弯阈值立即重算。class FlightPathGenerator { constructor(waypoints, config) { this.waypoints waypoints; this.config config; // { totalSeconds, turnThreshold, smoothWindow, density } } generate() { const dense this.interpolateAllLegs(); const smoothed smoothPoints(dense, this.config.smoothWindow); const cartesian smoothed.map((p) toCartesian(p.lng, p.lat, p.height)); return { points: cartesian, times: this.generateTimeline(cartesian.length), }; } }封装的过程中你会发现参数的可调范围其实代表了你对飞行任务的深层理解——turnThreshold对应飞行器能承受的最大横滚角density对应导航数据的刷新率smoothWindow对应自动驾驶仪的响应带宽。把这些参数暴露出来等于是把你头脑里的经验转化成了产品里别人也能用的旋钮。最后说一个我自己的习惯不管 Demo 多简单我都会在页面上留一个重置参数按钮和一份当前航线的 JSON 导出功能。前者是调参翻车之后的后悔药后者是实机飞行前在别的工具里二次验证的数据源。很多时候航线规划的问题不是出在 Cesium 的渲染里而是初始数据本身就不合理——你导出 JSON 用别的手段检查一遍往往比在球上反复转视角更快发现问题。希望这套从坐标处理到动态飞行的链路能帮你少踩几个看不见的坑。本文还有配套的精品资源点击获取
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
