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

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;
				}