Cesium——如何让模型沿着设定的轨迹运动加拖尾(非czml)

2024-02-29 04:20
文章标签 模型 轨迹 cesium 运动 设定 czml 加拖尾

本文主要是介绍Cesium——如何让模型沿着设定的轨迹运动加拖尾(非czml)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 如图，需求为给出两个经纬度坐标，让模型从一个位置运动到另一个位置，代码如下：

01.设置时间轴

在创建viewer的时候要将时间轴打开（timeline）

var viewer = new Cesium.Viewer('cesiumContainer', {//UI控制baseLayerPicker: false, //右上角的图层选择按钮animation: true,       //左下角的动画仪表盘infoBox: false,         //点击要素之后显示的信息geocoder: false,        //搜索框homeButton:false,       //home按钮sceneModePicker:true,  //模式切换按钮timeline: true,         //底部的时间轴fullscreenButton: false,//右下角的全屏按钮shouldAnimate: true,navigationHelpButton: false, //右上角的帮助按钮，terrainProvider: new Cesium.createWorldTerrain({requestWaterMask: true,requestVertexNormals: true}),
})

再对时间轴进行设置，设置循环 

  start = new Cesium.JulianDate.fromDate(new Date(2022,12,15,12)); //设置具体时间//start = new Cesium.JulianDate.now(new Date());//设置为当前时间start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());  // 添加八小时，得到东八区的北京时间stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());  // 设置一个结束时间，意思是360秒之后时间结束viewer.clock.startTime = start.clone();   // 给cesium时间轴设置开始的时间viewer.clock.stopTime = stop.clone();     // 设置cesium时间轴设置结束的时间viewer.clock.currentTime = start.clone(); // 设置cesium时间轴设置当前的时间viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;  // 时间结束了，再继续重复来一遍//时间变化来控制速度 viewer.clock.multiplier = 4;// 时间速率，数字越大时间过的越快//给时间线设置边界viewer.timeline.zoomTo(start, stop);

02.得到position

我们需要通过两个经纬度坐标来设定飞机的运行轨迹，如果我们设置position的时候直接就设置起止的两个点，飞机并不会绕着地球的表面运动，而是从地球的中间穿过，因此我们需要得到这两个经纬度之间的一些插值点的坐标，获取中间插值的函数computeAirRoute如下所示，输入起止的经纬度，输出中间一系列经纬度状态点的数组：

（插值的原理简单来说就地图展开是一个平面，然后两个点之间是一个连线，我们以固定的距离在直线上取坐标）

​​​​​​// 时空状态点结构
function State() {this.lon = 0;              //经度this.lat = 0;              //纬度this.hei = 0 ;             //高度this.time = 0;             //对应的时间
}
//设定步长
var stepLength=30000;
function computeAirRoute(startLon,startLat,endLon,endLat){//首先计算给出两点之间的距离let startPoint = Cesium.Cartographic.fromDegrees(startLon,startLat)let endPoint = Cesium.Cartographic.fromDegrees(endLon,endLat)let geodesic = new Cesium.EllipsoidGeodesic();geodesic.setEndPoints(startPoint, endPoint);let distance = geodesic.surfaceDistance  let lngDiff = endLon-startLon; //起点与终端经度差let latDiff = endLat-startLat; //起点与终端纬度差let n = Math.ceil(distance / stepLength); //点的总数let a = lngDiff / n; //每步的经度差let b = latDiff / n; //每步的纬度差let airSateArray=[];let time=0;for (let u = 1; u < n; u++) {var state = new State(); //状态点state.lon = startLon + a * u;//经度state.lat = startLat + b * u;;//纬度state.time = time;state.hei=100000;airStateArray.push(state);time+=360/n;  //设定两点之间运动时间为360}return airStateArray
}

03.得到SampledPositionProperty数据

function computeFlight(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(end, source[i].lat, source[i].hei);// 添加位置，和时间对应property.addSample(time, position);}return property;
}

 04. 创建运动模型

飞机不是通过读取czml来运动的，而是采用在创建模型时设置position属性为Cesium.SampledPositionProperty数据来达到运动效果

  • availability属性设置模型与时间轴关联，其中的start和end设置的就是模型运动的起止时间
  • 通过model中的color属性设置模型颜色
  • 插值器用于在我们设定的position之间再多插入一些值，使运动轨迹更加精细
var planeModel = viewer.entities.add({// 和时间轴关联availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({start : start,stop : end})]),position: property,// 根据所提供的速度计算模型的朝向orientation: new Cesium.VelocityOrientationProperty(property),// 模型数据model: {uri: '../model/Cesium_Air.glb',minimumPixelSize: 128,maximumScale: 10000,color: getColor('RED', 1.0),//设置颜色},});//差值器planeModel.position.setInterpolationOptions({interpolationDegree: 20,interpolationAlgorithm: Cesium.LagrangePolynomialApproximation});
function getColor(colorName, alpha) {const color = Cesium.Color[colorName.toUpperCase()];return Cesium.Color.fromAlpha(color, parseFloat(alpha));
}

05.设置飞机拖尾

 飞机的拖尾同样用到上面的property数据就好啦，代码如下：

  const entityPath = viewer.entities.add({position: property,name: "path",path: {show: true,leadTime: 0,trailTime: 20,width: 6,resolution: 1,material: new Cesium.PolylineGlowMaterialProperty({glowPower: 0.3,taperPower: 0.3,color: "RED",}),},});

06.完整代码

过程并不复杂，将以上内容串起来的完整代码也放一份吧！

​​​​​​// 时空状态点结构
function State() {this.lon = 0;              //经度this.lat = 0;              //纬度this.hei = 0 ;             //高度this.time = 0;             //对应的时间
}
//设定步长
var stepLength=30000;
function computeAirRoute(startLon,startLat,endLon,endLat){//首先计算给出两点之间的距离let startPoint = Cesium.Cartographic.fromDegrees(startLon,startLat)let endPoint = Cesium.Cartographic.fromDegrees(endLon,endLat)let geodesic = new Cesium.EllipsoidGeodesic();geodesic.setEndPoints(startPoint, endPoint);let distance = geodesic.surfaceDistance  let lngDiff = endLon-startLon; //起点与终端经度差let latDiff = endLat-startLat; //起点与终端纬度差let n = Math.ceil(distance / stepLength); //点的总数let a = lngDiff / n; //每步的经度差let b = latDiff / n; //每步的纬度差let airSateArray=[];let time=0;for (let u = 1; u < n; u++) {var state = new State(); //状态点state.lon = startLon + a * u;//经度state.lat = startLat + b * u;;//纬度state.time = time;state.hei=100000;airStateArray.push(state);time+=360/n;  //设定两点之间运动时间为360}return airStateArray
}function computeFlight(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(end, source[i].lat, source[i].hei);// 添加位置，和时间对应property.addSample(time, position);}return property;
}let airStateArray=computeAirRoute(-42.3534940,51.6691952,-15.0063289,24.7925729)
var property=computeFlight( airStateArray)var planeModel = viewer.entities.add({// 和时间轴关联availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({start : start,stop : end})]),position: property,// 根据所提供的速度计算模型的朝向orientation: new Cesium.VelocityOrientationProperty(property),// 模型数据model: {uri: '../model/Cesium_Air.glb',minimumPixelSize: 128,maximumScale: 10000,color: getColor('RED', 1.0),//设置颜色},});//差值器planeModel.position.setInterpolationOptions({interpolationDegree: 20,interpolationAlgorithm: Cesium.LagrangePolynomialApproximation});const entityPath = viewer.entities.add({position: property,name: "path",path: {show: true,leadTime: 0,trailTime: 20,width: 6,resolution: 1,material: new Cesium.PolylineGlowMaterialProperty({glowPower: 0.3,taperPower: 0.3,color: "RED",}),},});
function getColor(colorName, alpha) {const color = Cesium.Color[colorName.toUpperCase()];return Cesium.Color.fromAlpha(color, parseFloat(alpha));
}

关于速度可以通过调整每一步的时间或者步长改变

PS：如果设置多个点位连续运动，还是通过插值的方式在两两点位之间添加中间点，可能会遇到在转弯的时候方向突变的问题，这主要是因为步长设置的太小了，步长设置大一些，然后通过插值设置好，在转变方向的时候就可以平滑的转向

这篇关于Cesium——如何让模型沿着设定的轨迹运动加拖尾(非czml)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/757555。

相关文章

大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

Andrej Karpathy最新采访：认知核心模型10亿参数就够了，AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人，AI大神Andrej Karpathy，曾是OpenAI联合创始人之一，特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ，宣布将长期致力于AI原生教育。 近日，Andrej Karpathy接受了No Priors（投资博客）的采访，与硅谷知名投资人 Sara Guo 和 Elad G
阅读更多...
Retrieval-based-Voice-Conversion-WebUI模型构建指南

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI（简称 RVC）模型是一个基于 VITS（Variational Inference with adversarial learning for end-to-end Text-to-Speech）的简单易用的语音转换框架。 具有以下特点 简单易用：RVC 模型通过简单易用的网页界面，使得用户无需深入了
阅读更多...
透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

引言 随着时间的发展，大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用，随着人们期望的不断增加，目标也发生了巨大的变化。在短短的几个月的时间里，人们对大模型的认识已经从对其zero-shot能力感到惊讶，转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构（例如Transformer）对海量的、多种多样的数据分布进行建模得到，它包含了大量的先验
阅读更多...
图神经网络模型介绍（1）

图神经网络模型介绍（1）

我们将图神经网络分为基于谱域的模型和基于空域的模型，并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络：谱图卷积网络、切比雪夫网络和图卷积网络。 （1）谱图卷积网络 卷积定理：函数卷积的傅里叶变换是函数傅里叶变换的乘积，即F{f*g}
阅读更多...
秋招最新大模型算法面试，熬夜都要肝完它

秋招最新大模型算法面试，熬夜都要肝完它

💥大家在面试大模型LLM这个板块的时候，不知道面试完会不会复盘、总结，做笔记的习惯，这份大模型算法岗面试八股笔记也帮助不少人拿到过offer ✨对于面试大模型算法工程师会有一定的帮助，都附有完整答案，熬夜也要看完，祝大家一臂之力 这份《大模型算法工程师面试题》已经上传CSDN，还有完整版的大模型 AI 学习资料，朋友们如果需要可以微信扫描下方CSDN官方认证二维码免费领取【保证100%免费
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...
AI Toolkit + H100 GPU，一小时内微调最新热门文生图模型 FLUX

AI Toolkit + H100 GPU，一小时内微调最新热门文生图模型 FLUX

上个月，FLUX 席卷了互联网，这并非没有原因。他们声称优于 DALLE 3、Ideogram 和 Stable Diffusion 3 等模型，而这一点已被证明是有依据的。随着越来越多的流行图像生成工具（如 Stable Diffusion Web UI Forge 和 ComyUI）开始支持这些模型，FLUX 在 Stable Diffusion 领域的扩展将会持续下去。 自 FLU
阅读更多...
SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

SWAP作物生长模型安装教程、数据制备、敏感性分析、气候变化影响、R模型敏感性分析与贝叶斯优化、Fortran源代码分析、气候数据降尺度与变化影响分析

查看原文>>>全流程SWAP农业模型数据制备、敏感性分析及气候变化影响实践技术应用 SWAP模型是由荷兰瓦赫宁根大学开发的先进农作物模型，它综合考虑了土壤-水分-大气以及植被间的相互作用；是一种描述作物生长过程的一种机理性作物生长模型。它不但运用Richard方程，使其能够精确的模拟土壤中水分的运动，而且耦合了WOFOST作物模型使作物的生长描述更为科学。 本文让更多的科研人员和农业工作者
阅读更多...
线性因子模型 - 独立分量分析（ICA）篇

线性因子模型 - 独立分量分析（ICA）篇

序言 线性因子模型是数据分析与机器学习中的一类重要模型，它们通过引入潜变量（ latent variables \text{latent variables} latent variables）来更好地表征数据。其中，独立分量分析（ ICA \text{ICA} ICA）作为线性因子模型的一种，以其独特的视角和广泛的应用领域而备受关注。 ICA \text{ICA} ICA旨在将观察到的复杂信号
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2