本文只实现了轨迹跟踪的方法，加载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 ***/
},
网友评论