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