前言人生一迹，谨以此记录Cesium相关系列知识问题提出：加载动态模型+实时往返轨迹线？（重点在于实时往返轨迹线）一、Cesium加载高德底图本步骤的目的呢？是为了解决由于网络问题，导致的cesium地球显示不出来的bug，非常影响观感和调试体验。本文采用高德源，有机会更一个关于各种地图源切换的文章，毕竟底图是万物之本。 let imageryLayers = viewer.imageryLayers; let map = new Cesium.UrlTemplateImageryProvider({ url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", //高德地图 minimumLevel: 3, maximumLevel: 16, }); imageryLayers.addImageryProvider(map); 二、场景定位先定位到数据以及模型的最佳视角范围内，以便于后续调试。此处的中心点坐标以及方向hpr参数，可以通过坐标及视角拾取得到，后续文章会更新。注意：延迟2s，是为了等待场景跳转动画完毕，以便于观察到模型从起点开始移动，不会因为场景动画而影响观看。 viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(112.402664,34.621038,4798.56), orientation :{ heading : Cesium.Math.toRadians(351.9), pitch : Cesium.Math.toRadians(-85.7), roll :0.0 } }); setTimeout(2000) 三、轨迹数据结构轨迹点数据，采用数组方式存储，每个元素代表一个轨迹点信息，每个轨迹点信息采用对象形式存储，其中time表示时间秒数， longitude为轨迹点经度，latitude表示轨迹点纬度。注意：time表示累加时间（即后轨迹点的time必须大于前轨迹点的time），下列数据意思为：A-B耗时5s，A-B-C耗时10s [ { time: 0, longitude: 112.40641179342809, latitude: 34.6280090036493 }, //A { time: 5, longitude: 112.39561868811835, latitude:34.61691889996022 }, //B { time: 10, longitude: 112.38948151752913, latitude: 34.6286049476503 }, //C { time: 15, longitude: 112.38948151752913, latitude: 34.6286049476503 }, //C { time: 20, longitude: 112.39561868811835, latitude:34.61691889996022 }, //B { time: 25, longitude: 112.40641179342809, latitude: 34.6280090036493 }, //A ] 四、动态模型（模型按照轨迹数据进行运动） 4.1 时间模块设置此步骤主要是Cesium的时间轴相关设置，包含起始时间、终止时间等 // 起始时间(设置为当前时间) var start = Cesium.JulianDate.fromDate(new Date()); // 终止时间（计算方式，起始时间+30为整个轨迹的总时长） var stop = Cesium.JulianDate.addSeconds(start, 30, new Cesium.JulianDate()); // 设置时间轴开始及结束时间 viewer.clock.startTime = start.clone(); viewer.clock.stopTime = stop.clone(); // 设置时间轴当前时间为起始时间 viewer.clock.currentTime = start.clone(); // 设置时间轴自动播放 viewer.clock.shouldAnimate = true; // 设置到达结束时间后的行为：LOOP_STOP（时间循环）；UNBOUNDED（时间继续）；CLAMPED（时间暂停） viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 设置时间轴播放的速度 viewer.clock.multiplier = 1; 4.2 轨迹位置插值模块此步骤主要是Cesium中Property大类中的SampledPositionProperty小类的用法，Property作为Cesium重要类，用法颇深，值得深入研究，有兴趣可以查看大佬vtxf的介绍:[Cesium的Property机制总结]（ zhuanlan.zhihu.com/p/50534090）注意：由于返程算法问题，请勿使用其他插值算法（ Cesium.LagrangePolynomialApproximation，Cesium.HermitePolynomialApproximation），否则会导致返程算法出问题。若只往程为了讲究路线丝滑，可以采取其他插值算法。 // 设置简单位置属性 var positionSampler = new Cesium.SampledPositionProperty(); //差值器(预防拐弯突兀等问题) positionSampler.setInterpolationOptions({ interpolationDegree: 1, interpolationAlgorithm: Cesium.LinearApproximation }); // 循环写入时间与位置联系 for (var i = 0; i < positionData.length; i++) { var data = positionData[i]; var time = new Cesium.JulianDate.addSeconds(start, data.time, new Cesium.JulianDate()); var position = new Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude); positionSampler.addSample(time, position); } 4.3 加载模型（按轨迹数据移动）加载模型部分，利用简单的Cesium中Entity加载即可。注意：模型比例大小，模型方向 var run_entity = viewer.entities.add({ name: 'run', model: { uri: "Data/chick.glb", show: true, scale: 1000, //根据不同模型去设置不同放大比例 }, position: positionSampler, // 设置模型方向（时刻保持路线正前方） orientation : new Cesium.VelocityOrientationProperty(positionSampler) }); 五、实时往返轨迹（往：轨迹一直保持新增，返：重复轨迹会消失）此处逻辑为本文重点，此处也可以进行更改为自己所需的功能，后续有说明。首先讲解下两个算法，一：获取当前时间点下已走过的轨迹点数组（即往程）。二：删除返程时间点下的冗余轨迹点（即返程） 5.1 构建轨迹管线模型此步骤为重点中的中点，实时轨迹线是通过CallbackProperty类与动态模型联系，和上文中的SampledPositionProperty类同样，都隶属于Property大类。CallbackProperty类就是一个回调函数，因此可以加入自己所需要的任何功能，回调函数中的参数为time时间 var line_entity = viewer.entities.add({ name: 'line', polylineVolume: { positions: new Cesium.CallbackProperty( (time) => { var runPos = run_entity.position.getValue(time); if(!runPos) return var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(tarpos); var lon = Cesium.Math.toDegrees(cartographic.longitude); var lat = Cesium.Math.toDegrees(cartographic.latitude); let linePos = _getLastPoint(time) linePos = _isRepeatPoint([lon,lat],pos).flat() linePos.push(lon) linePos.push(lat) return Cesium.Cartesian3.fromDegreesArray(linePos) }, false), shape: computeCircle(6.0), material: Cesium.Color.RED, } }) 5.2 获取当前时间点已走过的轨迹数组原理：通过输入当前时间，计算起始时刻与当前时间的时间差，利用轨迹点的累计时间去对比，时间差大于轨迹点时间，则证明该点已经走过，否则未走过。 function _getLastPoint(time) { const timeDifference = Cesium.JulianDate.secondsDifference(time, start); let currentTime = 0 let lastPointList = [] for (let i = 1; i < positionData.length; i++) { currentTime = positionData[i].time if (timeDifference < currentTime) { lastPointList.push([positionData[i - 1].longitude,positionData[i - 1].latitude]) break } else { lastPointList.push([positionData[i - 1].longitude,positionData[i - 1].latitude]) } } return lastPointList } [code] ### **5.3 获取当前时间点已走过两遍的轨迹数组（即从返程数组里去除往程数组）** 原理：通过输入当前时间，计算起始时刻与当前时间的时间差，利用轨迹点的累计时间去对比，时间差大于轨迹点时间，则证明该点已经走过，否则未走过。判断方法：首先让轨迹数组组成轨迹线段，然后去判断当前时间点是都在轨迹线段上，若在，则证明该轨迹线段的终点应删除，若不在，则保留（注意该方法部分特殊情况会有瑕疵） [code] // 判断管线点组中是否有冗余点，有冗余点则删除冗余点后的元素 // 输入：轨迹点，管线点组 function _isRepeatPoint(point, posList) { if(posList.length == 1) return posList.flat() for (let i = 1; i < posList.length; i++) { //斜率不存在 if (posList[i][0] == posList[i - 1][0]) { if(point[0] == posList[i][0]){ posList.splice(i) return posList.flat() } } else { // 斜率为0 if(posList[i][1] == posList[i-1][1]){ if(point[1] == posList[i][1]){ posList.splice(i) return posList.flat() } } else { // 正常斜截式 k = (posList[i][1]-posList[i-1][1])/(posList[i][0]-posList[i-1][0]) b = posList[i][1] - k\*posList[i][0] if (point[1].toFixed(4) == (k\*point[0] + b).toFixed(4)) { posList.splice(i) return posList.flat() } } } } return posList.flat() } 六、全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态模型+实时往返轨迹线demo</title> <link rel="stylesheet" href="./Cesium/Widgets/widgets.css"> <script type="text/javascript" src="./Cesium/Cesium.js"></script> </head> <body> <div id="cesiumContainer"></div> <script type="text/javascript"> let viewer = new Cesium.Viewer('cesiumContainer'); // 更换底图 let imageryLayers = viewer.imageryLayers; let map = new Cesium.UrlTemplateImageryProvider({ url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", //高德地图 minimumLevel: 3, maximumLevel: 16, }); imageryLayers.addImageryProvider(map); //添加地图贴图 // 场景定位 viewer.camera.flyTo({ destination : Cesium.Cartesian3.fromDegrees(112.402664,34.621038,4798.56), orientation :{ heading : Cesium.Math.toRadians(351.9), pitch : Cesium.Math.toRadians(-85.7), roll :0.0 } }); setTimeout(2000) // 定义中转点数据 var positionData = [ { time: 0, longitude: 112.40641179342809, latitude: 34.6280090036493 }, //A { time: 5, longitude: 112.39561868811835, latitude:34.61691889996022 }, //B { time: 10, longitude: 112.38948151752913, latitude: 34.6286049476503 }, //C { time: 15, longitude: 112.38948151752913, latitude: 34.6286049476503 }, //C { time: 20, longitude: 112.39561868811835, latitude:34.61691889996022 }, //B { time: 25, longitude: 112.40641179342809, latitude: 34.6280090036493 }, //A ]; // 起始时间 var start = Cesium.JulianDate.fromDate(new Date()); // 计算位置差值 var positionSampler = new Cesium.SampledPositionProperty(); //差值器(预防拐弯突兀等问题) positionSampler.setInterpolationOptions({ interpolationDegree: 1, interpolationAlgorithm: Cesium.LinearApproximation }); for (var i = 0; i < positionData.length; i++) { var data = positionData[i]; var time = new Cesium.JulianDate.addSeconds(start, data.time, new Cesium.JulianDate()); var position = new Cesium.Cartesian3.fromDegrees(data.longitude, data.latitude); positionSampler.addSample(time, position); } // 创建一个模型对象 var fireMan_entity = viewer.entities.add({ name: 'model', model: { uri: "Data/chick_run.glb", show: true, scale: 2000, }, position: positionSampler, orientation : new Cesium.VelocityOrientationProperty(positionSampler) }); // 创建一个轨迹线对象 var fireHose_entity = viewer.entities.add({ name: 'line', polylineVolume: { positions: new Cesium.CallbackProperty( (time) =>{ var tarpos = fireMan_entity.position.getValue(time); if(!tarpos) return var cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(tarpos); var lon = Cesium.Math.toDegrees(cartographic.longitude); var lat = Cesium.Math.toDegrees(cartographic.latitude); let pos = _getLastPoint(time) pos = _isRepeatPoint([lon,lat],pos).flat() pos.push(lon) pos.push(lat) return Cesium.Cartesian3.fromDegreesArray(pos) }, false), shape: computeCircle(20.0), material: Cesium.Color.RED, } }) // 设置视角跟随物体运动，并显示信息框 // viewer.trackedEntity = fireMan_entity; // 定义时钟参数 var stop = Cesium.JulianDate.addSeconds(start, 30, new Cesium.JulianDate()); viewer.clock.startTime = start.clone(); viewer.clock.stopTime = stop.clone(); viewer.clock.currentTime = start.clone(); viewer.clock.shouldAnimate = true; viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; viewer.clock.multiplier = 1; // 判断当前时间下，经过的中转点，构成管线点组 function _getLastPoint(time) { const timeDifference = Cesium.JulianDate.secondsDifference(time, start); let currentTime = 0 let lastPointList = [] for (let i = 1; i < positionData.length; i++) { currentTime = positionData[i].time if (timeDifference < currentTime) { lastPointList.push([positionData[i - 1].longitude,positionData[i - 1].latitude]) break } else { lastPointList.push([positionData[i - 1].longitude,positionData[i - 1].latitude]) } } return lastPointList } // 判断管线点组中是否有冗余点，有冗余点则删除冗余点后的元素 // 输入：轨迹点，管线点组 function _isRepeatPoint(point, posList) { if(posList.length == 1) return posList.flat() for (let i = 1; i < posList.length; i++) { //斜率不存在 if (posList[i][0] == posList[i - 1][0]) { if(point[0] == posList[i][0]){ posList.splice(i) return posList.flat() } } else { // 斜率为0 if(posList[i][1] == posList[i-1][1]){ if(point[1] == posList[i][1]){ posList.splice(i) return posList.flat() } } else { // 正常斜截式 k = (posList[i][1]-posList[i-1][1])/(posList[i][0]-posList[i-1][0]) b = posList[i][1] - k\*posList[i][0] if (point[1].toFixed(4) == (k\*point[0] + b).toFixed(4)) { posList.splice(i) return posList.flat() } } } } return posList.flat() } // 计算轨迹管道函数 function computeCircle(radius) { const positions = []; for (let i = 0; i < 360; i++) { const radians = Cesium.Math.toRadians(i); positions.push( new Cesium.Cartesian2( radius \* Math.cos(radians), radius \* Math.sin(radians) ) ); } return positions; } </script> </body> </html>

动态模型+实时往返轨迹线

vip888

前言

人生一迹，谨以此记录Cesium相关系列知识

问题提出：加载动态模型+实时往返轨迹线？

（重点在于实时往返轨迹线）

一、Cesium加载高德底图

本步骤的目的呢？是为了解决由于网络问题，导致的cesium地球显示不出来的bug，非常影响观感和调试体验。本文采用高德源，有机会更一个关于各种地图源切换的文章，毕竟底图是万物之本。


let imageryLayers = viewer.imageryLayers;

let map = new Cesium.UrlTemplateImageryProvider({

url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}", //高德地图

minimumLevel: 3,

maximumLevel: 16,

});

imageryLayers.addImageryProvider(map);

二、场景定位

先定位到数据以及模型的最佳视角范围内，以便于后续调试。此处的中心点坐标以及方向hpr参数，可以通过坐标及视角拾取得到，后续文章会更新。

注意：延迟2s，是为了等待场景跳转动画完毕，以便于观察到模型从起点开始移动，不会因为场景动画而影响观看。


viewer.camera.flyTo({

destination : Cesium.Cartesian3.fromDegrees(112.402664,34.621038,4798.56),

orientation :{

    heading : Cesium.Math.toRadians(351.9),

    pitch : Cesium.Math.toRadians(-85.7),

    roll :0.0

}

});

setTimeout(2000)