Cesium 一个时间轴绑定多个模型

【Cesium专栏-热力图实现】时间轴序列化动态更新 最近在搞气象数据的可视化,包括降雨、风速、湿度、气温等等的一系列结果可视化,后面会一一记录在本专栏中。这篇文章,主要讲如何实现热力图,针对温度进行可视化展示。针对青海流域的气象结果可视化,时间轴序列变化,解决了切换闪动的bug。自己参考的别人的一些代码,封装的cesiumHeatmap.js。 阅读详情

 let data = [];

        data[0] = [{

            longitude: 116.405419,

            latitude: 39.918034,

            height: 0,

            time: 0

        }, {

            longitude: 116.405419,

            latitude: 39.918034,

            height: 0,

            time: 40

        }, {

            longitude: 116.2821,

            latitude: 39.918145,

            height: 0,

            time: 70

        }, {

            longitude: 115.497402,

            latitude: 39.344641,

            height: 70000,

            time: 100

        }, {

            longitude: 107.942392,

            latitude: 29.559967,

            height: 70000,

            time: 280

        }, {

            longitude: 106.549265,

            latitude: 29.559967,

            height: 0,

            time: 360

        }];

        data[1] = [{

            longitude: 115.497402,

            latitude: 39.918034,

            height: 0,

            time: 0

        }, {

            longitude: 115.497402,

            latitude: 39.918034,

            height: 0,

            time: 100

        }, {

            longitude: 115.497402,

            latitude: 39.918034,

            height: 10,

            time: 120

        }, {

            longitude: 117.034586,

            latitude: 39.881202,

            height: 0,

            time: 140

        }, {

            longitude: 116.340088,

            latitude: 38.842224,

            height: 70000,

            time: 200

        }, {

            longitude: 113.489176,

            latitude: 23.464017,

            height: 70000,

            time: 280

        }, {

            longitude: 113.262084,

            latitude: 23.13901,

            height: 0,

            time: 360

        }];

        data[2] = [{

            longitude: 118.838979,

            latitude: 32.073514,

            height: 0,

            time: 0

        }, {

            longitude: 118.838979,

            latitude: 32.073514,

            height: 0,

            time: 20

        }, {

            longitude: 118.838979,

            latitude: 32.073514,

            height: 0,

            time: 200

        }, {

            longitude: 118.438838,

            latitude: 32.03777,

            height: 0,

            time: 240

        }, {

            longitude: 117.802406,

            latitude: 31.91231,

            height: 70000,

            time: 280

        }, {

            longitude: 104.043645,

            latitude: 35.993845,

            height: 70000,

            time: 300

        }, {

            longitude: 101.807224,

            latitude: 36.660972,

            height: 0,

            time: 320

        }];


 

        for (let i = 0; i < data.length; i++) {

            let property = cm.computeFlight(data[i]);

            var pos = { longitude: data[i][0].longitude, latitude: data[i][0].latitude, height: data[i][0].height }

            let planeModel = cm.CreateSingleModel(pos, "model" + i, '../Apps/SampleData/models/CesiumAir/Cesium_Air.glb', 64);

            planeModel.position = property;

            planeModel.orientation = new Cesium.VelocityOrientationProperty(property);

        }

 //创建model

        this.CreateSingleModel = function (position, id, modelurl, minimumPixelSize) {

            let mode = this.viewer.entities.add({

                position: Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, position.height),

                id: id,

                model: {

                    uri: modelurl,

                    minimumPixelSize: minimumPixelSize,

                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000000),

                },

                availability:new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({

                    start: viewer.clock.startTime,

                    stop: viewer.clock.stopTime

                })]),

                path: {

                    leadTime: 0,

                    trailTime: 360,

                    resolution: 1,

                    material: new Cesium.PolylineGlowMaterialProperty({

                        glowPower: 1,

                        color: Cesium.Color.YELLOW,

                    }),

                    width: 1,

                    show: true

                },

            })

            //console.log("点:", point.label);

            return mode;

        }

        //计算飞行

        //@param source 数据坐标

        //@returns {SampledPositionProperty}

        this.computeFlight= function (source) {

            // 取样位置 相当于一个集合

            let property = new Cesium.SampledPositionProperty();

            for (let i = 0; i < source.length; i++) {

                let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate());

                let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].latitude, source[i].height);

                // 添加位置,和时间对应

                property.addSample(time, position);

            }

            return property;

        }

        //清除单个模型

        this.ClearModel = function (mode) {

            this.viewer.entities.remove(mode);//清除所有

            //var de = viewer.entities.getById("point001");

            //viewer.entities.remove(de);

        }

Cesium进阶-利用时间轴模拟历史轨迹 Cesium如何利用时间轴模拟历史轨迹 阅读详情

相关推荐

Cesium快速入门到精通系列教程十五:时间系统

Cesium 1.93的时间系统以JulianDate为基石,通过Clock驱动场景动态变化,结合TimeLine提供用户交互能力,完美支撑了地球科学可视化、实时模拟等复杂需求。开发者需掌握时间属性绑定与流速控制,以实现流畅的时空动态效果。

duansamve的博客 1375

cesium entity与时间轴关联(添加运动轨迹)

将entity 方法与时间轴相关联,添加运动轨迹

God's asylum的博客 3748

Cesium场景之卫星轨道展示

动画的执行都是与时间有关的,从什么时间开始,到什么时间结束。而Cesium使用了不同于我们js常用的时间规范,需要用到。是指示在 Cesium 中添加或描述对象动画时使用的 Julian Date 格式的时间标签。Julian Date 是以天为单位计数的相对格林尼治标准时间的一种计时法。所以以下代码意思我们以当前时间为基准,6分钟内执行动画。但是速率是10.// 定义开始时间////把js中的时间转换为JulianDate时间,东八区时间// 定义结束时间,360秒后。

LLCN的博客 4431

Cesium时间轴修改

//cesium时钟时间格式化 function CesiumTimeFormatter(datetime, viewModel) { var julianDT = new Cesium.JulianDate(); Cesium.JulianDate.addHours(datetime, 8, julianDT); var gregorianDT = Cesium.JulianDate.toGregorianDate(julianDT); let hour = grego.

欢迎来到源码的世界 3073

避坑指南:Cesium时间轴控制轮船轨迹的5个常见问题及解决方案

本文深入解析了Cesium时间轴控制轮船轨迹时常见的模型方向异常、轨迹跳跃及时间同步问题,并提供了从原理到实践的完整解决方案。重点探讨了VelocityOrientationProperty的陷阱、实时数据与时间轴的同步策略,以及如何利用WebSocket实现平滑的轨迹可视化,帮助开发者有效避坑。

weixin_29209801的博客 374

Cesium飞行动画避坑指南:SampledPositionProperty时间轴配置的5个常见错误

本文详细解析了Cesium飞行动画中SampledPositionProperty时间轴配置的5个常见错误,包括时间速率设置、时间区间绑定、采样点时间戳计算等关键问题。通过实战案例和解决方案,帮助开发者避免飞行航线动画中的典型陷阱,提升开发效率。

Faith, Simpleness, Transparency, Innovation 430

cesium 使用时间轴显示轮船实时位置轨迹,通过粒子系统添加轮船尾浪效果

cesium 通过websocket接收轮船实时位置,通过粒子系统添加轮船尾浪效果 啊~ 宝宝儿们,我是一个前端小白白,最近呢,在尝试做一个GIS效果,就是webscoket接收后台传递过来的轮船实时位置,一秒钟推送一次,传递过来的信息包括了轮船的id、轮船经度和纬度、以及轮船的方向角度。要求使用cesium实时展示轮船的位置和朝向。但是我之前没有接触过cesium,根本不会,文档都是英文的,我都不会看,然后我连基本的操作和概念都不会,不知道正经应该怎么整,所以就瞎搞,好在实现了一些效果,然后呢就记录一

“跟他人学,和自己比” 1万+

cesium粒子效果——船舰水花效果

粒子所需图片地址链接:链接:https://pan.baidu.com/s/1-9bi9UAyWp9TruX1HL0Krw。3.添加模型让模型按照绑定的位置飞行。1.用clock组件创建时间线。直接上代码 详细步骤看上篇文章。2.时间轴和船的位置信息绑定。4.创建粒子系统--水花效果。5.让粒子实时跟随模型移动。

m0_63701303的博客 1262

【Cesium 开发实战教程】第四篇:动态数据可视化:实时 GPS 轨迹与时间轴控制

Cesium 默认的时间轴(Timeline)和动画控件(Animation)样式较简单,实际项目中常需要自定义样式或添加控制按钮(如 “回到起点”“加速播放”)。理解和的工作原理;实现历史轨迹回放(时间轴控制 + 方向自动计算);实现实时轨迹更新(模拟 WebSocket 推送 + 动态加点);实现动态样式变化(不同时间区间显示不同状态);自定义时间控制按钮,解决性能与同步问题。下一篇预告。

爱好分享,不设VIP文章 1847

【Cesium创造属于你的地球】实现地球展示、灵活进行坐标转换、视角切换

大家好,我是AIC山鱼!👉这是我的🐋作为优快云博主和前端优质创作者✍,我致力于为大家带来新颖、脱俗且有趣的内容。🐱我还创建了,这是一个独特的社区🏠,🕺🏻为大家提供了一个交流和分享的空间。🌲在山鱼社区中,我推出了一个名为"松鼠计划"的活动,这是一个不断更新的活动,旨在将有趣、有启发性的书籍送给社区成员已经参加活动的人。我相信通过阅读和知识的分享,我们可以拓宽视野、激发思维,并获得更多的启示总之,我是AIC山鱼,一个充满新意、与众不同且有趣的优快云博主和前端优质创作者👈。

zhaochen1127的博客 6672

120:vue+cesium 粒子跟随移动的飞机喷射火焰

本示例介绍如何在vue+cesium中实现粒子喷射,跟随着飞机移动而移动。实现思路是 1.用clock组件创建时间线 2.时间轴和飞机的位置信息绑定 3.添加模型并让模型按照绑定的位置飞行 4.创建粒子系统 5.让粒子实时跟随模型移动

大剑师兰特的GIS世界 1176

cesium开发&加载倾斜模型

这次我们测试使用倾斜模型数据,主要是使用cesiumlab实验室工具将osgb数据转为json格式的倾斜模型,然后加载,但是在加载的时候需要特别注意的是这次模型的位置矩阵。否则可能会出现当数据已经处理好了,但是由于模型数据数据并不在视角内。以为没有加载成功。下面是使用cesium控件可以动态调整模型的高度一个demo。 &lt;!DOCTYPE html&gt; &lt;html lang="...

yGIS 5623

Cesium实现在3D模型上的点运动

Cesium是一款强大的开源JavaScript库,用于创建基于Web的地理信息系统(GIS)应用程序。它提供了丰富的功能,包括在地球上可视化3D模型和数据的能力。本文将介绍如何使用Cesium在3D模型上实现点的运动效果,并提供相应的源代码示例。首先,确保您已经引入了Cesium库。您可以从Cesium官方网站(https://cesium.com/downloads/ ↗)下载Cesium库文件,并将其包含在您的HTML文件中。为了在3D模型上实现点的运动,我们需要创建一个Cesium场景,并在场景中添

BnxBackend的博客 559

supermap iclient3d for cesium模型沿路径移动

可以直接settimeout隔一段时间直接设置位置属性,但是得到的结果模型不是连续的移动,如果想要连续的移动,就需要设置一个时间轴,然后给模型传入不同时间时的位置信息,然后就可以了。飞机整体代码这样,这里有个小坑,原生cesium你要绑定时间轴还需要设置availability,但是supermap这个没有,你加上就没有图像了。但是刚开始机头的朝向并不是速度的方向,所以一直会偏差,查询之后,发现有点复杂,初学者还是暂时放弃,初学做的不好,后面学多了会做好看的。想让模型跟随移动方向切换方向。

2301_77133858的博客 682

Cesium自主漫游实现指南:时间轴驱动相机路径飞行

三维地理信息系统(GIS)中,相机路径漫游是数字孪生与智慧城市可视化的基础能力。通过时间轴驱动相机位置与姿态,借助SampledPositionProperty等插值机制,开发者无需每帧手动计算,即可实现平滑的路径飞行。Cesium作为开源三维地球引擎,提供了完整的时钟体系与相机控制接口,使漫游过程可回放、可调速、可循环。该技术在园区巡检、无人机航拍模拟、预案推演等场景有广泛应用。然而,路径数据密度、时间戳绑定、高度匹配与朝向平滑是影响漫游质量的关键因素。本文从原理出发,对比实体跟踪与相机直接控制两种实现方

weixin_29042035的博客 258

60.(cesium篇)cesium叠加3D模型(glb模型,gltf模型).zip

下载如有问题,可私信博主。下载前建议先查看博客内容,其地址为:https://blog.youkuaiyun.com/QQ98281642/article/details/121602331

【Cesium零基础入门教程】第八课:使用Cesium.js库创建一个3D地球视图,加载一个GLTF飞机模型(3D模型)

本文展示了使用Cesium.js加载gITF格式模型的代码示例:初始化支持阴影的3D视图,在指定经纬度(114.30°,30.50°)200米高度放置飞机模型,设置最小尺寸200像素和最大缩放5000倍,并自动聚焦到模型。代码演示了坐标系转换、模型显示控制等关键功能,适用于Web三维可视化开发。

yaogis888的博客 1797

MoveIt避坑指南:UR机械臂编程中常见的5个错误及解决方法

本文针对UR机械臂与MoveIt集成开发中的常见问题,总结了五个典型错误及其解决方案,包括关节限位设置、坐标系混淆、规划器选择、运动学求解器配置以及线程资源管理。重点分析了正逆运动学求解错误的原因,并提供了调整容忍度、显式指定坐标系、选择合适规划器及优化IK配置等实用代码示例,帮助开发者提升编程效率与系统稳定性。

root9的博客 433

cesium仿真推演

红蓝对抗

GIS 2938

研一小白投稿SCI:Applied Intelligence从提交到Under Review的保姆级避坑指南

本文为研一学生提供Applied Intelligence期刊投稿的详细指南,涵盖格式校验、状态解析及审稿回应策略。特别强调声明文件、LaTeX模板的常见错误及应对方法,帮助新手避开高频踩坑点,提升投稿成功率。

weixin_29230805的博客 493

Agentic AI上下文工程架构终极指南:全面解决智能体理解问题

在开始架构设计前,我们需要先明确两个核心概念——Agentic AI和上下文工程。Agentic AI(智能体AI)是具备自主目标、环境交互、任务分解能力的AI系统。自主性:不需要人类逐步指令,能自己规划任务(比如“帮我订机票”→自动分解为“查航班→选座位→填信息→支付”);动态性:能根据环境变化调整行为(比如订机票时发现航班延误,自动改签到下一班);连续性:能记住历史交互(比如“上次你说喜欢靠窗位,这次帮你预留了”)。

AI开发架构师 1116
上一篇: vscode新建自己第一个页面
下一篇: Cesium 时间轴绑定事件列表
考班格
博客等级 码龄16年 135粉丝 256原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值