cesium軌跡追蹤

本文只實現(xiàn)了軌跡跟蹤的方法,加載cesium初始化自行配置,目前推送以定時器實現(xiàn),實踐可以通過websocket推送接收數(shù)據(jù),
注:
timeStep(目標為定值,全局變量,也自行可計算)
multiplier(設定播放速度)
其他本文中出現(xiàn)的變量如果沒有找到初始值,全局自定義即可。

//
creatModelDemo() {
var that = this
// 測試數(shù)據(jù)
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:循環(huán);CLAMPED:到達暫停;UNBOUNDED:到達后退
viewer.clock.shouldAnimate = true //啟動動畫
// 定義位置狀態(tài)
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 =
      '經(jīng)度:' +
     lng +
      '</br>' +
      '緯度:' +
      lat
    return title
    // return Cesium.Cartesian3.fromRadians(
    //     midpointCartographic.longitude,
    //     midpointCartographic.latitude
    // );
  }
  that.lineArr = [] //保存軌跡線數(shù)據(jù)
  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, //放大倍數(shù)
      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) {  //此處用屬性回調(diào)函數(shù),直接設置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) //加入軌跡集合

  // 實體跟蹤
  // 視角監(jiān)測
  // viewer.scene.preUpdate.addEventListener(that.traceHandler) //第一人稱
  // addEventListener和removeEventListener進行綁定和解綁
  // viewer.scene.preUpdate  在更新或者呈現(xiàn)場景之前立即觸發(fā)
  // viewer.scene.postUpdate 在場景更新后以及渲染場景之前立即觸發(fā)
  // viewer.scene.preRender 在場景更新后以及渲染場景之前觸發(fā)
  // viewer.scene.postRender 在渲染場景后立即觸發(fā)
  // 目標監(jiān)控跟隨
  // viewer.trackedEntity = that.vehicleEntity
  // 調(diào)整監(jiān)控視角
  // that.vehicleEntity.viewFrom = new Cesium.Cartesian3(Cesium.Math.toRadians(-0), Cesium.Math.toRadians(-0), 1500000)
  /***用定時器模擬數(shù)據(jù)推送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)
  /***用定時器模擬數(shù)據(jù)推送end ***/
},
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容