简介这份源码资源面向具备一定JavaScript基础、从事三维地图与地理信息可视化开发的工程师聚焦在Cesium中绘制路径导航线这一常见需求。资源通过PathLinePrimitive类演示如何定义坐标点列表并传入构造函数从而在三维地球上生成可配置颜色、宽度与透明度的导航路径适用于交通轨迹展示、飞行航线模拟、游戏角色移动路径及旅行路线规划等场景。压缩包共3个文件包含1个html示例页面、1个inscode工程配置和1个gitignore忽略规则文件整体约6KB结构轻量便于直接运行与二次修改。目前已有73人学习下载。读者可从中获取完整的路径线初始化代码、坐标点组织方式与视觉属性设置思路快速理解Cesium路径可视化的实现流程并在此基础上扩展测距、路径优化等分析功能。1. Cesium路径导航线从一条会动的线说起很多人第一次在三维地球上画导航线都是直接甩一条Polyline上去结果发现线是死的——不会流动、不会拐弯、贴着地形还会穿模。Cesium路径导航线要解决的就是这件事让一条线在三维场景里活起来能沿着真实路网走、能贴地起伏、能带方向感地流动。它适合做车辆轨迹回放、无人机航线演示、物流路径可视化这类场景。我见过太多项目把导航线做成一根静态的彩色管子用户根本看不出方向更别说判断路径是否合理。真正能用的导航线核心是三件事路径数据怎么组织、线怎么贴地、动态效果怎么加。这三件事拆开都不难难的是凑在一起还不掉帧。下面按我实际做过的顺序把每一步的参数和坑讲清楚。2. 路径数据从哪来GeoJSON转Cesium实体的最小闭环导航线的第一步不是画线是拿到一条有顺序的点串。常见来源有三种后端接口返回的经纬度数组、GeoJSON文件、或者从路网服务导出的路径规划结果。不管哪种最终都要转成Cesium能吃的Cartesian3数组。这一步看着简单但坐标系和高度处理错了后面全白搭。2.1 经纬度数组直接转Cartesian3的正确姿势最常见的做法是拿到[lng, lat]数组后直接Cesium.Cartesian3.fromDegrees(lng, lat)。但如果你有高度信息比如路径要贴地飞行就得把高度也带上。我一般会封装一个转换函数把高度缺失的情况统一补成0避免后面贴地时出现undefined。// 将后端返回的路径点数组转为 Cartesian3 数组 // points 格式: [{ lng: 116.39, lat: 39.9, height: 50 }, ...] function toCartesian3Array(points) { return points.map(p { // height 缺省时补 0避免贴地计算拿到 undefined const h typeof p.height number ? p.height : 0; return Cesium.Cartesian3.fromDegrees(p.lng, p.lat, h); }); }逻辑说明fromDegrees的第三个参数是高度单位米。如果路径点没有高度补0意味着线会落在椭球面上后面用clampToGround贴地时再抬升。参数上要注意fromDegrees默认用的是WGS84椭球如果你的数据是GCJ02或者BD09必须先做坐标纠偏否则线会整体偏移几百米这个坑后面会细说。2.2 GeoJSON转Cesium的两种路线Entity还是PrimitiveGeoJSON是最常见的路径交换格式Cesium原生支持GeoJsonDataSource一行代码就能加载。但如果你要动态改线宽、改颜色、加流动效果GeoJsonDataSource生成的Entity在数据量大时性能会崩。我的经验是路径点少于500个用Entity图省事超过500个直接走Primitive用PolylineCollection或者GroundPolylinePrimitive。// 路线AGeoJsonDataSource 快速加载适合小数据量 const dataSource await Cesium.GeoJsonDataSource.load(geojson, { stroke: Cesium.Color.CYAN, strokeWidth: 4, clampToGround: true // 关键贴地 }); viewer.dataSources.add(dataSource); // 路线B手动解析 GeoJSON 走 Primitive适合大数据量 const coords geojson.features[0].geometry.coordinates; const positions coords.map(c Cesium.Cartesian3.fromDegrees(c[0], c[1], 0)); const polyline new Cesium.PolylineGeometry({ positions: positions, width: 4, vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT });逻辑说明路线A的clampToGround: true是贴地开关但它在Entity模式下会触发地形采样数据量大时每帧都在算帧率掉得厉害。路线B手动构造PolylineGeometry配合GroundPolylinePrimitive才能既贴地又流畅。参数上width是像素宽度不是米缩放地图时线宽不变这点和二维地图一致。2.3 路径点抽稀别让一万个点拖垮浏览器实际路径数据往往密得离谱每隔几米一个点一万个点画一条线GPU直接罢工。我一般会先做抽稀用Cesium.Cartesian3.distance算相邻点距离小于阈值的点丢掉。阈值取多少城市道路取5到10米高速取20到50米看场景。// 按最小间距抽稀路径点 function simplifyPositions(positions, minDistance) { if (positions.length 2) return positions; const result [positions[0]]; for (let i 1; i positions.length; i) { const d Cesium.Cartesian3.distance(result[result.length - 1], positions[i]); if (d minDistance) { result.push(positions[i]); } } // 保证最后一个点不被丢掉 if (result[result.length - 1] ! positions[positions.length - 1]) { result.push(positions[positions.length - 1]); } return result; }逻辑说明minDistance是抽稀阈值单位米。这个函数是贪心算法保留第一个点然后往后找第一个距离超过阈值的点依次类推。注意最后要补回终点否则路径会短一截。抽稀后点数通常能降到原来的十分之一帧率提升非常明显。3. 让线贴地又好看材质、贴地与动态流动的实现路径点有了接下来是画线。但一条纯色线毫无方向感用户看不出车往哪开。导航线必须带流动效果而且得贴地。这两件事在Cesium里都有坑贴地线不能用普通Polyline流动材质又容易和贴地冲突。3.1 贴地线的三种方案对比与选型Cesium里让线贴地有三种做法Polyline加clampToGround、GroundPolylinePrimitive、以及手动采样地形高度后抬高。第一种最简单但性能最差第二种性能好但API复杂第三种最灵活但需要自己处理地形采样。方案性能贴地精度适用场景Polyline clampToGround低高少量线、演示GroundPolylinePrimitive高高大量线、生产手动采样地形中可控需要自定义抬升我一般生产环境直接用GroundPolylinePrimitive它内部走的是GPU贴地不占CPU。但要注意它不支持动态材质流动效果得另想办法。3.2 用PolylineMaterial做流动光带参数怎么调流动效果的本质是让材质纹理随时间偏移。Cesium内置了PolylineGlowMaterialProperty和PolylineDashMaterialProperty但真正像导航线的是自定义PolylineTrailMaterial。网上流传的源码很多核心就是一张渐变纹理加time偏移。// 自定义流动线材质简化版 class PolylineTrailMaterialProperty { constructor(options) { this._definitionChanged new Cesium.Event(); this._color options.color || Cesium.Color.CYAN; this._duration options.duration || 3000; // 流动周期毫秒 this._time performance.now(); } getType() { return PolylineTrail; } getValue(time, result) { result result || {}; // 关键用取模让时间循环避免数值无限增大 const t ((performance.now() % this._duration) / this._duration); result.color this._color; result.time t; return result; } }逻辑说明duration控制流动速度值越小流动越快。time是0到1的循环值传给着色器做纹理偏移。注意这里用performance.now()而不是Cesium的time因为材质更新频率和场景时钟不一定同步用真实时间更稳。着色器里用texture2D(image, vec2(fract(st.t - time), st.s))就能让纹理滚动起来。3.3 把流动材质挂到贴地线上一个绕不开的取舍GroundPolylinePrimitive不支持自定义材质这是硬限制。所以如果你既要贴地又要流动只有两条路要么用Polyline加clampToGround牺牲性能要么用GroundPolylinePrimitive加静态颜色流动效果用额外的动态点或者箭头来模拟。我一般选后者贴地线用静态半透明色上面每隔一段距离放一个移动的箭头图标视觉上也有流动感性能还好。// 贴地静态线 移动箭头模拟流动 const groundLine new Cesium.GroundPolylinePrimitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.GroundPolylineGeometry({ positions: positions, width: 6 }) }), appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType(Color, { color: Cesium.Color.CYAN.withAlpha(0.6) }) }) }); viewer.scene.primitives.add(groundLine); // 箭头用 Entity 的 billboard沿路径插值移动 const arrowEntity viewer.entities.add({ position: positions[0], billboard: { image: /assets/arrow.png, scale: 0.5, rotation: 0 // 需要根据路径方向动态算 } });逻辑说明GroundPolylinePrimitive的appearance只支持PolylineMaterialAppearance材质类型有限但颜色和透明度够用。箭头用billboard沿路径移动位置通过Cesium.Cartesian3.lerp在相邻点之间插值旋转角度用Math.atan2算方向。这个方案帧率稳定视觉上也能接受。4. 避坑指南导航线做挂了的五个血泪现场导航线这东西原理不难但细节全是坑。下面五条是我和同行踩过的真实翻车记录每条都按现象、原因、解决写清楚。4.1 线飘到天上或者钻到地下坐标系没对齐现象路径线整体偏移几百米或者高度完全不对飘在空中。原因数据源用的是GCJ02或者BD09坐标系直接当WGS84用了。国内地图服务返回的经纬度大多经过偏移Cesium只认WGS84。解决在转Cartesian3之前先做坐标纠偏用开源的coordtransform库转成WGS84再喂给Cesium。别想着在Cesium里调调不回来的。4.2 线贴地后闪烁、断层地形采样精度不够现象线贴地后一段一段的有的地方浮起来有的地方陷下去缩放时还闪。原因clampToGround依赖地形采样如果地形服务没加载完或者采样点太稀线就会跳。解决确保viewer.terrainProvider是有效的并且给线加arcType: Cesium.ArcType.GEODESIC让Cesium按测地线插值。如果还闪把viewer.scene.globe.depthTestAgainstTerrain设为true让深度测试生效。4.3 流动效果卡顿材质每帧重建现象加了流动材质后帧率从60掉到20。原因每次getValue都新建Material或者Color对象GC压力大。解决在材质属性里缓存对象getValue里复用同一个result不要每次new。另外duration别设太小小于500毫秒时更新频率过高也费性能。4.4 路径点顺序错乱数据没排序现象线画出来是乱的来回折返。原因后端返回的点串没有按行进顺序排列或者抽稀时打乱了顺序。解决抽稀前先确认点串有序抽稀算法本身是保序的但如果你用了sort按经纬度排那就全乱了。路径点只能按采集顺序或者路径规划顺序不能按坐标排序。4.5 大数据量下浏览器崩溃Entity没销毁现象切换路线时内存暴涨最后页面卡死。原因每次加载新路线都viewer.entities.add旧的没删。解决维护一个dataSource或者primitive的引用切换时先viewer.entities.removeAll()或者viewer.scene.primitives.remove(oldPrimitive)。Entity模式下还要注意viewer.dataSources.removeAll()不然DataSource也会堆积。5. 进阶用CallbackProperty做动态路径与性能验证前面讲的都是静态路径但导航线经常要动态更新——比如车辆位置实时变化线要跟着延伸。这时候CallbackProperty是利器它能让Cesium每帧调用你的函数拿最新位置。但用不好就是性能灾难因为每帧都在算。5.1 CallbackProperty的正确打开方式CallbackProperty的核心是传一个函数进去Cesium渲染时调用。我一般用它做路径的生长效果线只画到当前车辆位置。// 动态路径线只画到当前进度 let progress 0; // 0 到 1 const dynamicPositions new Cesium.CallbackProperty((time, result) { // 根据 progress 截取 positions 数组 const count Math.floor(positions.length * progress); return positions.slice(0, Math.max(count, 2)); }, false); // false 表示不每帧都重新计算只在需要时 const dynamicLine viewer.entities.add({ polyline: { positions: dynamicPositions, width: 6, material: Cesium.Color.CYAN, clampToGround: true } }); // 外部更新 progress function updateProgress(p) { progress Math.min(Math.max(p, 0), 1); }逻辑说明CallbackProperty的第二个参数isConstant设为false告诉Cesium这个值会变。slice截取数组时注意至少保留2个点否则Polyline会报错。progress由外部动画或者实时数据驱动每帧更新一次。这个方案比每帧重建Entity轻量得多但slice本身有开销路径点超过2000时建议用索引范围代替slice。5.2 性能验证用FPS和DrawCall判断方案是否合格做完导航线怎么知道性能行不行我一般看两个指标FPS和DrawCall。FPS低于30就得优化DrawCall超过1000说明图元太多。Cesium自带的viewer.scene.debugShowFramesPerSecond可以看FPSDrawCall用viewer.scene.context.drawCommandCount看。// 开启性能面板 viewer.scene.debugShowFramesPerSecond true; // 每秒打印一次 DrawCall setInterval(() { console.log(DrawCall:, viewer.scene.context.drawCommandCount); }, 1000);逻辑说明drawCommandCount是当前帧的绘制命令数数值越高GPU压力越大。导航线如果用GroundPolylinePrimitive一条线只占一个DrawCall很划算。如果用Entity的Polyline每条线可能占多个DrawCall数据量大时差距明显。我一般要求导航线场景DrawCall控制在500以内FPS稳定在45以上。5.3 一个我常备的调试习惯每次做完导航线我都会把路径点数量、抽稀阈值、材质类型、贴地方案这四个参数记在一个表格里方便对比。比如同样一条10公里的路径抽稀阈值5米时点数是800DrawCall是12FPS是58阈值20米时点数是200DrawCall是12FPS是60。差别不大但点数少了内存占用低。这个习惯帮我省了很多次为什么昨天还好今天卡了的排查时间。希望帮到你。本文还有配套的精品资源点击获取
简介这份源码资源面向具备一定JavaScript基础、从事三维地图与地理信息可视化开发的工程师聚焦在Cesium中绘制路径导航线这一常见需求。资源通过PathLinePrimitive类演示如何定义坐标点列表并传入构造函数从而在三维地球上生成可配置颜色、宽度与透明度的导航路径适用于交通轨迹展示、飞行航线模拟、游戏角色移动路径及旅行路线规划等场景。压缩包共3个文件包含1个html示例页面、1个inscode工程配置和1个gitignore忽略规则文件整体约6KB结构轻量便于直接运行与二次修改。目前已有73人学习下载。读者可从中获取完整的路径线初始化代码、坐标点组织方式与视觉属性设置思路快速理解Cesium路径可视化的实现流程并在此基础上扩展测距、路径优化等分析功能。1. Cesium路径导航线从一条会动的线说起很多人第一次在三维地球上画导航线都是直接甩一条Polyline上去结果发现线是死的——不会流动、不会拐弯、贴着地形还会穿模。Cesium路径导航线要解决的就是这件事让一条线在三维场景里活起来能沿着真实路网走、能贴地起伏、能带方向感地流动。它适合做车辆轨迹回放、无人机航线演示、物流路径可视化这类场景。我见过太多项目把导航线做成一根静态的彩色管子用户根本看不出方向更别说判断路径是否合理。真正能用的导航线核心是三件事路径数据怎么组织、线怎么贴地、动态效果怎么加。这三件事拆开都不难难的是凑在一起还不掉帧。下面按我实际做过的顺序把每一步的参数和坑讲清楚。2. 路径数据从哪来GeoJSON转Cesium实体的最小闭环导航线的第一步不是画线是拿到一条有顺序的点串。常见来源有三种后端接口返回的经纬度数组、GeoJSON文件、或者从路网服务导出的路径规划结果。不管哪种最终都要转成Cesium能吃的Cartesian3数组。这一步看着简单但坐标系和高度处理错了后面全白搭。2.1 经纬度数组直接转Cartesian3的正确姿势最常见的做法是拿到[lng, lat]数组后直接Cesium.Cartesian3.fromDegrees(lng, lat)。但如果你有高度信息比如路径要贴地飞行就得把高度也带上。我一般会封装一个转换函数把高度缺失的情况统一补成0避免后面贴地时出现undefined。// 将后端返回的路径点数组转为 Cartesian3 数组 // points 格式: [{ lng: 116.39, lat: 39.9, height: 50 }, ...] function toCartesian3Array(points) { return points.map(p { // height 缺省时补 0避免贴地计算拿到 undefined const h typeof p.height number ? p.height : 0; return Cesium.Cartesian3.fromDegrees(p.lng, p.lat, h); }); }逻辑说明fromDegrees的第三个参数是高度单位米。如果路径点没有高度补0意味着线会落在椭球面上后面用clampToGround贴地时再抬升。参数上要注意fromDegrees默认用的是WGS84椭球如果你的数据是GCJ02或者BD09必须先做坐标纠偏否则线会整体偏移几百米这个坑后面会细说。2.2 GeoJSON转Cesium的两种路线Entity还是PrimitiveGeoJSON是最常见的路径交换格式Cesium原生支持GeoJsonDataSource一行代码就能加载。但如果你要动态改线宽、改颜色、加流动效果GeoJsonDataSource生成的Entity在数据量大时性能会崩。我的经验是路径点少于500个用Entity图省事超过500个直接走Primitive用PolylineCollection或者GroundPolylinePrimitive。// 路线AGeoJsonDataSource 快速加载适合小数据量 const dataSource await Cesium.GeoJsonDataSource.load(geojson, { stroke: Cesium.Color.CYAN, strokeWidth: 4, clampToGround: true // 关键贴地 }); viewer.dataSources.add(dataSource); // 路线B手动解析 GeoJSON 走 Primitive适合大数据量 const coords geojson.features[0].geometry.coordinates; const positions coords.map(c Cesium.Cartesian3.fromDegrees(c[0], c[1], 0)); const polyline new Cesium.PolylineGeometry({ positions: positions, width: 4, vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT });逻辑说明路线A的clampToGround: true是贴地开关但它在Entity模式下会触发地形采样数据量大时每帧都在算帧率掉得厉害。路线B手动构造PolylineGeometry配合GroundPolylinePrimitive才能既贴地又流畅。参数上width是像素宽度不是米缩放地图时线宽不变这点和二维地图一致。2.3 路径点抽稀别让一万个点拖垮浏览器实际路径数据往往密得离谱每隔几米一个点一万个点画一条线GPU直接罢工。我一般会先做抽稀用Cesium.Cartesian3.distance算相邻点距离小于阈值的点丢掉。阈值取多少城市道路取5到10米高速取20到50米看场景。// 按最小间距抽稀路径点 function simplifyPositions(positions, minDistance) { if (positions.length 2) return positions; const result [positions[0]]; for (let i 1; i positions.length; i) { const d Cesium.Cartesian3.distance(result[result.length - 1], positions[i]); if (d minDistance) { result.push(positions[i]); } } // 保证最后一个点不被丢掉 if (result[result.length - 1] ! positions[positions.length - 1]) { result.push(positions[positions.length - 1]); } return result; }逻辑说明minDistance是抽稀阈值单位米。这个函数是贪心算法保留第一个点然后往后找第一个距离超过阈值的点依次类推。注意最后要补回终点否则路径会短一截。抽稀后点数通常能降到原来的十分之一帧率提升非常明显。3. 让线贴地又好看材质、贴地与动态流动的实现路径点有了接下来是画线。但一条纯色线毫无方向感用户看不出车往哪开。导航线必须带流动效果而且得贴地。这两件事在Cesium里都有坑贴地线不能用普通Polyline流动材质又容易和贴地冲突。3.1 贴地线的三种方案对比与选型Cesium里让线贴地有三种做法Polyline加clampToGround、GroundPolylinePrimitive、以及手动采样地形高度后抬高。第一种最简单但性能最差第二种性能好但API复杂第三种最灵活但需要自己处理地形采样。方案性能贴地精度适用场景Polyline clampToGround低高少量线、演示GroundPolylinePrimitive高高大量线、生产手动采样地形中可控需要自定义抬升我一般生产环境直接用GroundPolylinePrimitive它内部走的是GPU贴地不占CPU。但要注意它不支持动态材质流动效果得另想办法。3.2 用PolylineMaterial做流动光带参数怎么调流动效果的本质是让材质纹理随时间偏移。Cesium内置了PolylineGlowMaterialProperty和PolylineDashMaterialProperty但真正像导航线的是自定义PolylineTrailMaterial。网上流传的源码很多核心就是一张渐变纹理加time偏移。// 自定义流动线材质简化版 class PolylineTrailMaterialProperty { constructor(options) { this._definitionChanged new Cesium.Event(); this._color options.color || Cesium.Color.CYAN; this._duration options.duration || 3000; // 流动周期毫秒 this._time performance.now(); } getType() { return PolylineTrail; } getValue(time, result) { result result || {}; // 关键用取模让时间循环避免数值无限增大 const t ((performance.now() % this._duration) / this._duration); result.color this._color; result.time t; return result; } }逻辑说明duration控制流动速度值越小流动越快。time是0到1的循环值传给着色器做纹理偏移。注意这里用performance.now()而不是Cesium的time因为材质更新频率和场景时钟不一定同步用真实时间更稳。着色器里用texture2D(image, vec2(fract(st.t - time), st.s))就能让纹理滚动起来。3.3 把流动材质挂到贴地线上一个绕不开的取舍GroundPolylinePrimitive不支持自定义材质这是硬限制。所以如果你既要贴地又要流动只有两条路要么用Polyline加clampToGround牺牲性能要么用GroundPolylinePrimitive加静态颜色流动效果用额外的动态点或者箭头来模拟。我一般选后者贴地线用静态半透明色上面每隔一段距离放一个移动的箭头图标视觉上也有流动感性能还好。// 贴地静态线 移动箭头模拟流动 const groundLine new Cesium.GroundPolylinePrimitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: new Cesium.GroundPolylineGeometry({ positions: positions, width: 6 }) }), appearance: new Cesium.PolylineMaterialAppearance({ material: Cesium.Material.fromType(Color, { color: Cesium.Color.CYAN.withAlpha(0.6) }) }) }); viewer.scene.primitives.add(groundLine); // 箭头用 Entity 的 billboard沿路径插值移动 const arrowEntity viewer.entities.add({ position: positions[0], billboard: { image: /assets/arrow.png, scale: 0.5, rotation: 0 // 需要根据路径方向动态算 } });逻辑说明GroundPolylinePrimitive的appearance只支持PolylineMaterialAppearance材质类型有限但颜色和透明度够用。箭头用billboard沿路径移动位置通过Cesium.Cartesian3.lerp在相邻点之间插值旋转角度用Math.atan2算方向。这个方案帧率稳定视觉上也能接受。4. 避坑指南导航线做挂了的五个血泪现场导航线这东西原理不难但细节全是坑。下面五条是我和同行踩过的真实翻车记录每条都按现象、原因、解决写清楚。4.1 线飘到天上或者钻到地下坐标系没对齐现象路径线整体偏移几百米或者高度完全不对飘在空中。原因数据源用的是GCJ02或者BD09坐标系直接当WGS84用了。国内地图服务返回的经纬度大多经过偏移Cesium只认WGS84。解决在转Cartesian3之前先做坐标纠偏用开源的coordtransform库转成WGS84再喂给Cesium。别想着在Cesium里调调不回来的。4.2 线贴地后闪烁、断层地形采样精度不够现象线贴地后一段一段的有的地方浮起来有的地方陷下去缩放时还闪。原因clampToGround依赖地形采样如果地形服务没加载完或者采样点太稀线就会跳。解决确保viewer.terrainProvider是有效的并且给线加arcType: Cesium.ArcType.GEODESIC让Cesium按测地线插值。如果还闪把viewer.scene.globe.depthTestAgainstTerrain设为true让深度测试生效。4.3 流动效果卡顿材质每帧重建现象加了流动材质后帧率从60掉到20。原因每次getValue都新建Material或者Color对象GC压力大。解决在材质属性里缓存对象getValue里复用同一个result不要每次new。另外duration别设太小小于500毫秒时更新频率过高也费性能。4.4 路径点顺序错乱数据没排序现象线画出来是乱的来回折返。原因后端返回的点串没有按行进顺序排列或者抽稀时打乱了顺序。解决抽稀前先确认点串有序抽稀算法本身是保序的但如果你用了sort按经纬度排那就全乱了。路径点只能按采集顺序或者路径规划顺序不能按坐标排序。4.5 大数据量下浏览器崩溃Entity没销毁现象切换路线时内存暴涨最后页面卡死。原因每次加载新路线都viewer.entities.add旧的没删。解决维护一个dataSource或者primitive的引用切换时先viewer.entities.removeAll()或者viewer.scene.primitives.remove(oldPrimitive)。Entity模式下还要注意viewer.dataSources.removeAll()不然DataSource也会堆积。5. 进阶用CallbackProperty做动态路径与性能验证前面讲的都是静态路径但导航线经常要动态更新——比如车辆位置实时变化线要跟着延伸。这时候CallbackProperty是利器它能让Cesium每帧调用你的函数拿最新位置。但用不好就是性能灾难因为每帧都在算。5.1 CallbackProperty的正确打开方式CallbackProperty的核心是传一个函数进去Cesium渲染时调用。我一般用它做路径的生长效果线只画到当前车辆位置。// 动态路径线只画到当前进度 let progress 0; // 0 到 1 const dynamicPositions new Cesium.CallbackProperty((time, result) { // 根据 progress 截取 positions 数组 const count Math.floor(positions.length * progress); return positions.slice(0, Math.max(count, 2)); }, false); // false 表示不每帧都重新计算只在需要时 const dynamicLine viewer.entities.add({ polyline: { positions: dynamicPositions, width: 6, material: Cesium.Color.CYAN, clampToGround: true } }); // 外部更新 progress function updateProgress(p) { progress Math.min(Math.max(p, 0), 1); }逻辑说明CallbackProperty的第二个参数isConstant设为false告诉Cesium这个值会变。slice截取数组时注意至少保留2个点否则Polyline会报错。progress由外部动画或者实时数据驱动每帧更新一次。这个方案比每帧重建Entity轻量得多但slice本身有开销路径点超过2000时建议用索引范围代替slice。5.2 性能验证用FPS和DrawCall判断方案是否合格做完导航线怎么知道性能行不行我一般看两个指标FPS和DrawCall。FPS低于30就得优化DrawCall超过1000说明图元太多。Cesium自带的viewer.scene.debugShowFramesPerSecond可以看FPSDrawCall用viewer.scene.context.drawCommandCount看。// 开启性能面板 viewer.scene.debugShowFramesPerSecond true; // 每秒打印一次 DrawCall setInterval(() { console.log(DrawCall:, viewer.scene.context.drawCommandCount); }, 1000);逻辑说明drawCommandCount是当前帧的绘制命令数数值越高GPU压力越大。导航线如果用GroundPolylinePrimitive一条线只占一个DrawCall很划算。如果用Entity的Polyline每条线可能占多个DrawCall数据量大时差距明显。我一般要求导航线场景DrawCall控制在500以内FPS稳定在45以上。5.3 一个我常备的调试习惯每次做完导航线我都会把路径点数量、抽稀阈值、材质类型、贴地方案这四个参数记在一个表格里方便对比。比如同样一条10公里的路径抽稀阈值5米时点数是800DrawCall是12FPS是58阈值20米时点数是200DrawCall是12FPS是60。差别不大但点数少了内存占用低。这个习惯帮我省了很多次为什么昨天还好今天卡了的排查时间。希望帮到你。本文还有配套的精品资源点击获取
)
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
