实现思路
- 通过加载 czml 文件，生成卫星
- 获取卫星实体的位置，建立连线
- 监听卫星位置，若发生变化，则刷新连线
问题解决
连线动态变化
- setInterval() 可以监听每一帧画面
- 或者说当启动场景后，setInterval() 每一帧都会被调用
连线闪烁
- 直接设置连线位置，或者删除连线后重新添加都会造成闪烁
- 通过使用 CallbackProperty() 可以避免闪烁
完整实现代码
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer("cesiumContainer");
viewer.scene.debugShowFramesPerSecond = true;
let czmlDataSourcePromise = Cesium.CzmlDataSource.load('./TestData/test.czml')
viewer.zoomTo(czmlDataSourcePromise);
let czml;
let llh_old;
czmlDataSourcePromise.then(function (dd) {
czml = dd;
viewer.dataSources.add(czml);
viewer.clock.multiplier = 1000;
var entity_2 = czml.entities.getById("Satellite/BEIDOU 2");
var entity_3 = czml.entities.getById("Satellite/BEIDOU 3");
var position_2 = entity_2.position.getValue(viewer.clock.currentTime);
var position_3 = entity_3.position.getValue(viewer.clock.currentTime);
let cartographic_2 = Cesium.Cartographic.fromCartesian(position_2);
let cartographic_3 = Cesium.Cartographic.fromCartesian(position_3);
let llh = [
parseFloat(Cesium.Math.toDegrees(cartographic_2.longitude).toFixed(4)),
parseFloat(Cesium.Math.toDegrees(cartographic_2.latitude).toFixed(4)),
parseFloat(cartographic_2.height),
parseFloat(Cesium.Math.toDegrees(cartographic_3.longitude).toFixed(4)),
parseFloat(Cesium.Math.toDegrees(cartographic_3.latitude).toFixed(4)),
parseFloat(cartographic_3.height)
]
llh_old = llh;
console.log(llh_old.toString())
var purpleArrow = viewer.entities.add({
id: 'purpleArrow',
name: "Purple straight arrow at height",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(llh),
width: 10,
arcType: Cesium.ArcType.NONE,
material: new Cesium.PolylineArrowMaterialProperty(
Cesium.Color.CYAN
),
},
});
})
setInterval(function () {
if (czml != null) {
var entity_2 = czml.entities.getById("Satellite/BEIDOU 2");
var entity_3 = czml.entities.getById("Satellite/BEIDOU 3");
var position_2 = entity_2.position.getValue(viewer.clock.currentTime);
var position_3 = entity_3.position.getValue(viewer.clock.currentTime);
let cartographic_2 = Cesium.Cartographic.fromCartesian(position_2);
let cartographic_3 = Cesium.Cartographic.fromCartesian(position_3);
let llh = [
parseFloat(Cesium.Math.toDegrees(cartographic_2.longitude).toFixed(4)),
parseFloat(Cesium.Math.toDegrees(cartographic_2.latitude).toFixed(4)),
parseFloat(cartographic_2.height),
parseFloat(Cesium.Math.toDegrees(cartographic_3.longitude).toFixed(4)),
parseFloat(Cesium.Math.toDegrees(cartographic_3.latitude).toFixed(4)),
parseFloat(cartographic_3.height)
]
if (llh.toString() != llh_old.toString()) {
console.log('执行操作')
viewer.entities.getById('purpleArrow').polyline.positions =
new Cesium.CallbackProperty(function () {
return Cesium.Cartesian3.fromDegreesArrayHeights(llh)
}, false)
llh_old = llh;
}
}
})
</script>
</body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
