cesium实现模型动态移动效果

最新推荐文章于 2024-09-12 16:10:10 发布

右弦GISer

最新推荐文章于 2024-09-12 16:10:10 发布

阅读量1w

点赞数 7

分类专栏： cesium 文章标签： gis cesium

本文链接：https://blog.csdn.net/weixin_45782925/article/details/123430335

版权

cesium 专栏收录该内容

122 篇文章 868 订阅

订阅专栏

该博客介绍了如何在Cesium中利用CallbackProperty动态更新模型位置，以实现类似动画的效果。作者通过Cartesian3的lerp方法计算模型在两个坐标之间的线性插值，结合回调函数实现动态位置更新，从而在没有timeline控件的情况下创建模型移动动画。

摘要由CSDN通过智能技术生成

文章目录

Cesium实战系列文章总目录：传送门

1.实现效果

在这里插入图片描述

2.实现方法

2.1实现思路

（1）官方沙盒示例参考：传送门
官方示例中需要弃用timeline和animate来确定不同时刻模型的位置，进而实现动画。

但是本人在开发中，禁用了timeline控件，所以就不能动态设置时刻及其位置。

因此在这里采用回调函数CallbackProperty来动态更新模型的位置。
（2）动态更新模型位置
使用Cartesian3的lerp方法：传送门
计算起点与终点之间一定比例的线性插值坐标。
在这里插入图片描述

2.2具体代码

具体实现代码如下：

 let startPosition = new Cesium.Cartesian3.fromDegrees(120.14046454, 30.27415039);
 let endPosition = new Cesium.Cartesian3.fromDegrees(120.16701991, 30.27648221);
 let factor = 0;

 // 添加模型
 const vehicleEntity = viewer.entities.add({
     position: new Cesium.CallbackProperty(function() {
         if (factor > 5000) {
             factor = 0;
         }
         factor++;
         // 动态更新位置
         return Cesium.Cartesian3.lerp(startPosition, endPosition, factor / 5000.0, new Cesium.Cartesian3());
     }, false),
     model: {
         uri: "../.././icons/hz/model/car.glb",
         scale: 1000.0,
     },
 });

 viewer.trackedEntity = vehicleEntity;