展示图:
功能思路:
(1)设置创建时钟组件JulianDate,该时间组件很重要,不仅是用来追踪路线使用,还要监听每个时间点到达的坐标位置。
(2)气泡的实时根据坐标刷新,上一篇有说到,根据当前时间返回当前坐标值。
(3)鼠标左键监听事件换成了时钟帧数调用监听事件viewer.clock.onTick.addEventListener,根据路线图的每次的时间刻度调用实现气泡追踪。
部分代码:
创建path路线图
//路线参数 处理
var positionData = paramObj.data.Coordinates;
Intervals = 0; //间隔时间
for (var i = 0; i < positionData.length; i++) {
var time = Cesium.JulianDate.addSeconds(starttime, Intervals, new Cesium.JulianDate());
var data = positionData[i];
var position = Cesium.Cartesian3.fromDegrees(data.x, data.y, 20);
property.addSample(time, position);
Intervals += paramObj.setTime.multiplier;
}
var stoptime = Cesium.JulianDate.addSeconds(starttime, Intervals, new Cesium.JulianDate()); //总停止秒数
//时钟 设置
viewer.clock.startTime = starttime.clone();
viewer.clock.stopTime = stoptime.clone();
viewer.clock.currentTime = starttime.clone();
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; //Loop at the end
viewer.clock.multiplier = paramObj.setTime.multiplier;
entity = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: starttime,
stop: stoptime
})]),
position: property,
orientation: new Cesium.VelocityOrientationProperty(property),
billboard: {
image: paramObj.imgurl,
},
path: {
resolution: paramObj.resolution,
material: new Cesium.PolylineGlowMaterialProperty({ //线的材质
glowPower: 0.5,
color: Cesium.Color.YELLOW
}),
width: 5,
leadTime: 0,
trailTime: Intervals,
}
});
时钟帧数监听函数
//时间实时函数
function Stoptime(){
var position = entity.position.getValue(viewer.clock.currentTime);
var paramObj = {
id: 'trackPopUpContent',
HTMLdiv: '<div class="leaflet-popup-content-wrapper" style="background:#FFF;">' +
'<div id="trackPopUpLink" class="leaflet-popup-content" style="max-width:300px;max-height:500px"><h5>纬度:10,<br>经度:20</h5></div>' +
'</div>',
Offset: {
x: 0,
y: 0
},
coordinate: position, //笛卡尔坐标参数
lineStyle: {
Linewidth: 3,
Lineheight: 25,
Linebackground: '#409EFF'
},
CircleStyle: {
Circleradius: 8,
Circlecolor: '#409EFF'
},
heighthidenum:10000,//高度隐藏值
}
//固定弹窗 位置
PopupCoordinatePositioning(paramObj);
//当执行了时间停止监听的函数后,务必移除监听事件,因为时间一直在停止状态,函数将被一直执行
//viewer.clock.onStop.removeEventListener(Stoptime);
}
路线停止后的开启函数
//开启
function start(){
var stoptime = Cesium.JulianDate.addSeconds(starttime, Intervals, new Cesium.JulianDate());
viewer.clock.stopTime=stoptime.clone();
var popupchildrens=document.getElementById("bubbleContent").children;
for(var i=0;i<popupchildrens.length;i++){
var childrenid=popupchildrens[i].id;
//popupchildrens[i].style.display="none";
$("#" + childrenid).remove(); //移除
}
}
提醒
示例代码不是很完善
person.png
示例完整代码的资源下载
https://download.csdn.net/download/qq_35984445/18748487