本文只實現(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 ***/
},