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
以下为一个简单小DEMO,通过鼠标自定义画线让模型小车沿线动起来,代码如下:
var handerLinean = new Cesium.DrawHandler(viewer, Cesium.DrawMode.Line);
handerLinean.activate();
handerLinean.drawEvt.addEventListener(function(line) {
line.object.width = 7;
var length = line.object._actualPositions.length;
var start = Cesium.JulianDate.fromDate(new Date());
var stop = Cesium.JulianDate.addSeconds(start, length * 10, new Cesium.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; //时间间隔单位
var position = computeCirclularFlight(line, start, stop);
var lk = viewer.entities.add(new Cesium.Entity({
orientation: new Cesium.VelocityOrientationProperty(position),
model: new Cesium.ModelGraphics({
uri: 'ExportModel.gltf',
minimumPixelSize: 32,
maximumScale: 32,
}),
position: position
}));
});
function computeCirclularFlight(line, start, stop) {
var length = line.object._actualPositions.length;
var property = new Cesium.SampledPositionProperty();
var point = [];
var sum = 0;
for(var i = 0; i < length; i++) {
var position = line.object._actualPositions[i];
if(i > 0) {
var prepostion = line.object._actualPositions[i - 1];
var distance = Cesium.Cartesian3.distance(position, prepostion);
}
sum += distance || 0;
var time = Cesium.JulianDate.addSeconds(start, sum / 20, new Cesium.JulianDate());
if(i === length - 1) {
viewer.clock.stopTime = time;
}
property.addSample(time, position);
}
return property;
}