Cesium 车辆跟踪事件气泡弹窗追随

展示图：

功能思路：

（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