SuperMap iClient3D for WebGL教程 轨迹动画(一) -Entity

WuYK

在WebGL中,模型数据是非常重要的一环。我们可以通过切缓存来加载各式各样的模型来构建三维场景。但是实际应用中,我们不仅存在像高楼这样的"静态模型",还具有汽车这样的"动态模型"。那么我们如何让模型"动起来"呢?

其实大致上可以分为三种形式:
==一:通过Entity添加模型,利用Entity的时间节点属性来实现动态效果==

==二:通过Kml添加模型,通过设置Kml文件的节点参数来实现动态效果==

==三:通过DynamicLayer3D添加模型,通过该动态图层实现动态效果==

  **本篇文章主要介绍如何通过Entity实现动态效果**

一.设置场景时间

    var start = Cesium.JulianDate.fromDate(new Date());
var stop = Cesium.JulianDate.addSeconds(start, 30, new Cesium.JulianDate());
   viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();        
viewer.clock.multiplier = 1;

二.设置时间节点参数

首先初始化SampledPositionProperty()类

var property = new Cesium.SampledPositionProperty();

再通过

property.addSample(time, position)

依次添加位置节点与对应的时间节点,通过Cesium自带的property机制去响应

三.加载模型

viewer.entities.add(new Cesium.Entity({
orientation: new Cesium.VelocityOrientationProperty(property),
model: new Cesium.ModelGraphics({
  uri: 'ExportModel.gltf',
}),
position: property
}));

由上述代码可以看出,主要有三个参数实现。
1.orientation //表示模型的方向,此处用的是根据位置时间点计算自适应方向
2.model //模型地址,目前只能加载Gltf格式模型
3.position //设置模型的位置,此处用的是SampledPositionProperty

以下为一个简单小

varhanderLinean =newCesium.DrawHandler(viewer, Cesium.DrawMode.Line);
handerLinean.activate();
handerLinean.drawEvt.addEventListener(function(line) {
line.object.width = 7;
varlength = line.object._actualPositions.length;
varstart = Cesium.JulianDate.fromDate(newDate());
varstop = Cesium.JulianDate.addSeconds(start, length * 10,newCesium.JulianDate());
console.log(length);
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; //小车运动一次后停止,不循环
viewer.clock.multiplier = 1; //时间间隔单位
varposition = computeCirclularFlight(line, start, stop);
varlk = viewer.entities.add(newCesium.Entity({
orientation:newCesium.VelocityOrientationProperty(position),
model:newCesium.ModelGraphics({
uri: 'ExportModel.gltf',
minimumPixelSize: 32,
maximumScale: 32,
}),
position: position
}));
});
functioncomputeCirclularFlight(line, start, stop) {
varlength = line.object._actualPositions.length;
varproperty =newCesium.SampledPositionProperty();
varpoint = [];
varsum = 0;
for(vari = 0; i < length; i++) {
varposition = line.object._actualPositions[i];
if(i > 0) {
varprepostion = line.object._actualPositions[i - 1];
vardistance = Cesium.Cartesian3.distance(position, prepostion);
}
sum += distance || 0;
vartime = Cesium.JulianDate.addSeconds(start, sum / 20,newCesium.JulianDate());
if(i === length - 1) {
viewer.clock.stopTime = time;
}
property.addSample(time, position);
}
returnproperty;
}