1. 加载 3d Tiles数据 (上章节讲过不多说)
主要是提醒一点, 有时候直接加载 这个建筑模型很模糊,设置maximumScreenSpaceError这个属性 清晰度会高很多。
在Cesium中,maximumScreenSpaceError参数用于控制瓦片渲染的时机。当视角固定不动的时候,该参数越小,子瓦片渲染越早。也就是说,设置较小的 maximumScreenSpaceError,就可以在较远距离就可以进行子瓦片的渲染。该参数的大小需要开发者对可视化设备进行评估再做设定。如果是显卡性能较好的设备,如台式机、工作站,就可以使用较小的maximumScreenSpaceError,以求达到最佳的可视化效果;如果是显卡性能较差的设备,如移动设备,则可以尽量调大maximumScreenSpaceError,保证可视化和交互的流畅体验。
const initModel = () => {
Cesium.Cesium3DTileset.fromUrl("xxx.json", { maximumScreenSpaceError: 1 }).then(function (tileset) {
})
}
2. 制定移动路线
运动的逻辑就是需要 多个坐标点组成的一条线 ,每一个坐标点都会设置一个时间点,所以我们需要计算出每个点与初始点间隔多少时间
const makeWay = () => {
let collection = new Cesium.SampledPositionProperty();
let start = Cesium.JulianDate.now(); // 开始时间
let alltime = 5000 // 总时长比如 5000秒
let stop = Cesium.JulianDate.addSeconds(start, alltime, new Cesium.JulianDate()) // 结束时间
// 开始采样 stepTime 就是 每个点与初始点间隔多少时间 单位秒
pointArr.value.forEach(ele => {
collection.addSample(Cesium.JulianDate.addSeconds(start, ele.stepTime, new Cesium.JulianDate()), ele.posi);
})
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // 到时间就结束 ,如果设置成 循环播放 时间段为0 的时候电脑直接死机
return { collection, start, stop }
3. 模型沿轨迹运动
const initWorker = () => {
let { collection, start, stop } = makeWay()
let gltf = 'http:xxx/gongren.glb'
entity = viewer.entities.add({
// 实体可用性,在指定时间内返回有效数据
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
// 位置信息随时间变化property
position: collection,
// 实体方向
orientation: new Cesium.VelocityOrientationProperty(collection),
model: {
uri: gltf,
scale: 3,
minimumPixelSize: 20, //最小模型像素大小就是无限缩放 最小能看到多大
},
// 轨迹路径
path: {
resolution: 1,
width: 2,
material: Cesium.Color.RED,
},})
viewer.trackedEntity = entity
}
运动暂停、继续 可以通过设置 viewer.clock.shouldAnimate 为 true 或者false。