cesium轨迹追踪

本文只实现了轨迹跟踪的方法，加载cesium初始化自行配置，目前推送以定时器实现，实践可以通过websocket推送接收数据，
注：
timeStep(目标为定值，全局变量，也自行可计算）
multiplier（设定播放速度）
其他本文中出现的变量如果没有找到初始值，全局自定义即可。

//
creatModelDemo() {
var that = this
// 测试数据
that.trackList = [
{ lon: 120, lat: 30 },
{ lon: 120.1, lat: 31 },
{ lon: 120.2, lat: 29 },
{ lon: 120.3, lat: 25 },
{ lon: 120.4, lat: 31 },
{ lon: 120.5, lat: 27 },
{ lon: 120.6, lat: 32 },
{ lon: 120.7, lat: 30 },
]
that.start = Cesium.JulianDate.fromDate(new Date(2021, 10, 11, 15)) //开始时间new Date(2021, 10, 11, 15)中国标准时间
// var stop = Cesium.JulianDate.fromDate(new Date(2021, 10, 11, 16));
// that.timeStep = (endTime -startTime)/that.trackList.length-1 //时间间隔
var totalSeconds = that.timeStep * (that.trackList.length - 1) //总时长
var stop = Cesium.JulianDate.addSeconds(
that.start,
totalSeconds,
new Cesium.JulianDate()
) //结束时间
viewer.clock.startTime = that.start.clone() //定义clock开始时间
viewer.clock.currentTime = that.start.clone() //定义clock开始时间
viewer.clock.stopTime = stop.clone() //定义clock结束时间
// 定义动画播放类型
viewer.clock.multiplier = that.multiplier
viewer.clock.clockStep = Cesium.ClockStep.TICK_DEPENDENT
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED //LOOP_STOP:循环;CLAMPED:到达暂停;UNBOUNDED：到达后退
viewer.clock.shouldAnimate = true //启动动画
// 定义位置状态
that.positionProperty = new Cesium.SampledPositionProperty()
// 插值
that.positionProperty.setInterpolationOptions({
interpolationDegree: 1,
interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
})
// todo
function getMidpoint(time, result) {
// console.log(that.vehicleEntity.position.getValue(time, result),"获取当前位置")
// Get the end position from the polyLine's callback.
var endPoint = that.vehicleEntity.position.getValue(time, result)
// console.log(endPoint)
var ellipsoid = viewer.scene.globe.ellipsoid
// var cartesian3=new Cesium.cartesian3(x,y,z);
var cartographic = ellipsoid.cartesianToCartographic(endPoint)
var lat = Cesium.Math.toDegrees(cartograhphic.latitude)
var lng = Cesium.Math.toDegrees(cartograhpinc.longitude)
var alt = cartographic.height
// console.log(lat, lng, alt)
// endCartographic = Cesium.Cartographic.fromCartesian(endPoint);

    // geodesic.setEndPoints(startCartographic, endCartographic);
    // var midpointCartographic = geodesic.interpolateUsingFraction(
    //     0.5,
    //     scratch
    // );
    // console.log(midpointCartographic)
    var title =
      '经度:' +
     lng +
      '</br>' +
      '纬度:' +
      lat
    return title
    // return Cesium.Cartesian3.fromRadians(
    //     midpointCartographic.longitude,
    //     midpointCartographic.latitude
    // );
  }
  that.lineArr = [] //保存轨迹线数据
  for (let i = 0; i < that.trackList.length; i++) {
    var dataPoint = that.trackList[i]
    let lng = parseFloat(dataPoint.lon)
    let lat = parseFloat(dataPoint.lat)
    let height = parseFloat(dataPoint.height)
      ? parseFloat(dataPoint.height)
      : 0
    var position = Cesium.Cartesian3.fromDegrees(lng, lat, height)
    that.lineArr.push(dataPoint.lon)
    that.lineArr.push(dataPoint.lat)
    that.lineArr.push(0)
    // 每个位置与时间绑定
    var time = Cesium.JulianDate.addSeconds(
      that.start,
      that.timeStep * i,
      new Cesium.JulianDate()
    )
    that.positionProperty.addSample(time, position)
  }

  // 添加模型.
  that.vehicleEntity = viewer.entities.add({
    id: 'myModel',
    availability: new Cesium.TimeIntervalCollection([
      new Cesium.TimeInterval({ start: that.start, stop: stop }),
    ]),
    position: that.positionProperty,
    orientation: new Cesium.VelocityOrientationProperty(
      that.positionProperty
    ), // Automatically set the vehicle's orientation to the direction it's facing.
    model: {
      show: true,
      uri: this.getModelType(targetType), //如果为bgltf则为.bgltf
      modelMatrix: 168,
      minimumPixelSize: 68,
      scale: 1.0, //放大倍数
      runAnimations: true,
    },

    path: {
      show: true,
      leadTime: 0,
      trailTime: 3600 * 24 * 360,
      width: 2,
      // resolution: 600,
      // material: Cesium.Color.fromCssColorString("#9FD4FF"),
      material: Cesium.Color.YELLOW.withAlpha(1),
      // material: new Cesium.PolylineGlowMaterialProperty({
      //   // glowPower: 1,
      //   color: Cesium.Color.YELLOW.withAlpha(1),
      // }),
      // material: new Cesium.CallbackProperty(function (time,result) {  //此处用属性回调函数，直接设置extrudedHeight会致使闪烁。
      //   console.log()
      // })
    },
    label: {
      // text: new Cesium.CallbackProperty(getMidpoint, false),
      text: '22',
      font: '20px sans-serif',
      showBackground: true,
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      pixelOffset: new Cesium.Cartesian3(0, -50, 80),
      // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
      //   0.0,
      //   1500000.0
      // ),
      // eyeOffset: new Cesium.Cartesian3(-100, -203.5, -200),
    },
  })
  that.hdLineTypeEntities.push(that.vehicleEntity) //加入轨迹集合

  // 实体跟踪
  // 视角监测
  // viewer.scene.preUpdate.addEventListener(that.traceHandler) //第一人称
  // addEventListener和removeEventListener进行绑定和解绑
  // viewer.scene.preUpdate  在更新或者呈现场景之前立即触发
  // viewer.scene.postUpdate 在场景更新后以及渲染场景之前立即触发
  // viewer.scene.preRender 在场景更新后以及渲染场景之前触发
  // viewer.scene.postRender 在渲染场景后立即触发
  // 目标监控跟随
  // viewer.trackedEntity = that.vehicleEntity
  // 调整监控视角
  // that.vehicleEntity.viewFrom = new Cesium.Cartesian3(Cesium.Math.toRadians(-0), Cesium.Math.toRadians(-0), 1500000)
  /***用定时器模拟数据推送start ***/
  var i = 0
  var obj = { lon: 120, lat: 30 }
  if (that.timerInterval) {
    clearInterval(that.timerInterval)
    that.timerInterval = null
  }
  that.timerInterval = setInterval(function () {
    i++
    obj = { lon: 120 + i, lat: 30 }
    if (i > 10) {
      obj = { lon: 121, lat: 30 + i }
    }
    that.trackList.push(obj)
    //重新计算总时长，赋值结束时间
    var totalSeconds = that.timeStep * (that.trackList.length - 1)
    var stop = Cesium.JulianDate.addSeconds(
      that.start,
      totalSeconds,
      new Cesium.JulianDate()
    )
    // 更新clock结束时间
    viewer.clock.stopTime = stop
    // 更新模型可见的结束时间
    that.vehicleEntity.availability.get(0).stop = stop
    // 当前时间赋值
    viewer.clock.currentTime = viewer.clock.currentTime
    // viewer.clock.shouldAnimate = true;//启动动画
    //重新赋值位置点与时间绑定 
  var height =0;
   var position = Cesium.Cartesian3.fromDegrees(that.trackList[that.trackList.length-1].lon, that.trackList[that.trackList.length- 
  1].lat, height)
   var time = Cesium.JulianDate.addSeconds(
        that.start,
        that.timeStep * that.trackList.length-1,
        new Cesium.JulianDate()
      )
      that.positionProperty.addSample(time, position)
    //更新位置点
    that.vehicleEntity.position = that.positionProperty
    that.vehicleEntity.material = Cesium.Color.YELLOW
  }, 3000)
  /***用定时器模拟数据推送end ***/
},