supermap iclient3d for cesium模型沿路径移动

news/2024/9/24 20:55:40/

可以直接settimeout隔一段时间直接设置位置属性,但是得到的结果模型不是连续的移动,如果想要连续的移动,就需要设置一个时间轴,然后给模型传入不同时间时的位置信息,然后就可以了。

开启时间轴

     let start = Cesium.JulianDate.fromDate(new Date());  // 设置时间轴当前时间为开始时间start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate())//东八区let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate()) viewer.clock.startTime = start.clone()// 设置时钟当前时间viewer.clock.currentTime = start.clone()// 设置时钟结束时间viewer.clock.stopTime = stop.clone();// 数字越大时间过的越快viewer.clock.multiplier = 10// 循环执行viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

想让模型跟随移动方向切换方向

 orientation : new Cesium.VelocityOrientationProperty(position)

但是刚开始机头的朝向并不是速度的方向,所以一直会偏差,查询之后,发现有点复杂,初学者还是暂时放弃,

飞机整体代码这样,这里有个小坑,原生cesium你要绑定时间轴还需要设置availability,但是supermap这个没有,你加上就没有图像了

  var plane=new Cesium.Entity({position:property,model: {uri:"src/assets/gltf/plane/scene.gltf",minimumPixelSize: 128, //模型最小像素maximumScale: 200, //模型最大放大倍数},orientation: new Cesium.VelocityOrientationProperty(property)})viewer.entities.add(plane)function computeFlight(source:any) {let property = new Cesium.SampledPositionProperty();for (let i = 0; i < source.length; i++) {//时间间隔let time = Cesium.JulianDate.addSeconds(start, source[i][2], new Cesium.JulianDate);//坐标和高度let position = Cesium.Cartesian3.fromDegrees(source[i][0], source[i][1], 600);property.addSample(time, position);}return property;
}

在后面加一条轨迹线

const entityPath = new Cesium.Entity({position: property,path: {show: true,leadTime: 0,trailTime: 30,width: 6,resolution: 1,material:Cesium.Color.YELLOW,},});

初学做的不好,后面学多了会做好看的

总的代码

<template><div class="PartOneBox"><div id="cesiumContainer"></div></div>
</template><script setup lang='ts'>
import { ref, reactive,onMounted} from 'vue'const plane1Position=[[104.173,30.822,0],[104.178,30.837,100],[104.19,30.837, 200],[104.185,30.82,300],[104.173,30.822,400],]let start = Cesium.JulianDate.fromDate(new Date());  // 设置时间轴当前时间为开始时间start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());   // 开始时间加8小时改为北京时间let stop = Cesium.JulianDate.addSeconds(start, 400, new Cesium.JulianDate());   // 设置结束时间为开始时间加400秒onMounted(async()=>
{let viewer = new Cesium.Viewer('cesiumContainer')// 设置时钟开始时间viewer.clock.startTime = start.clone();// 设置时钟当前时间viewer.clock.currentTime = start.clone();// 设置时钟结束时间viewer.clock.stopTime = stop.clone();// 时间速率,数字越大时间过的越快,设置1好像是和实际时间一样viewer.clock.multiplier = 20// 循环执行,到达终止时间,重新从起点时间开始viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;var labelImagery = new Cesium.TiandituImageryProvider({mapStyle: Cesium.TiandituMapsStyle["IMG_C"],//天地图全球中文注记服务token: "你的" //由天地图官网申请的密钥});viewer.imageryLayers.addImageryProvider(labelImagery);viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(104.18,30.83,3500)})var geo  = new Cesium.Entity({position:Cesium.Cartesian3.fromDegrees(104.18,30.83,1650),wall:{positions:Cesium.Cartesian3.fromDegreesArrayHeights([104.173,30.822,400,104.178,30.837,400,104.19,30.837, 400,104.185,30.82,400,104.173,30.822,400,]),material:Cesium.Color.RED.withAlpha(.4),outline: true,},polyline:{positions:Cesium.Cartesian3.fromDegreesArrayHeights([104.18,30.83,0,104.18,30.83,1600]),material:Cesium.Color.BLUE,width:5},label: {text: "好的大学没有围墙!!", font: "14px sans-serif", showBackground: true,backgroundColor:new Cesium.Color(50,50,50,.6)},})let property = computeFlight(plane1Position) var plane=new Cesium.Entity({position:property,model: {uri:"src/assets/gltf/plane/scene.gltf",minimumPixelSize: 128, //模型最小像素maximumScale: 200, //模型最大放大倍数},orientation: new Cesium.VelocityOrientationProperty(property)})const entityPath = new Cesium.Entity({position: property,path: {show: true,leadTime: 0,trailTime: 30,width: 6,resolution: 1,material:Cesium.Color.YELLOW,},});viewer.entities.add(geo)viewer.entities.add(plane)viewer.entities.add(entityPath)})
function computeFlight(source:any) {let property = new Cesium.SampledPositionProperty();for (let i = 0; i < source.length; i++) {//时间间隔let time = Cesium.JulianDate.addSeconds(start, source[i][2], new Cesium.JulianDate);//坐标和高度let position = Cesium.Cartesian3.fromDegrees(source[i][0], source[i][1], 600);property.addSample(time, position);}return property;
}</script><style scoped lang='scss'>
.PartOneBox
{width:1200px;height:1000px;margin:50px auto;position:relative;.cesiumContainer{width:100%;height:100%;}
}</style>


http://www.ppmy.cn/news/1529966.html

相关文章

QT开发:深入详解 Qt 核心类:QMap的基本概念和使用方法

目录 1. 基本概念 2. QMap 的特性 3. 基本使用方法 3.1 创建和初始化 QMap 3.2 添加和访问元素 3.3 查找和删除元素 3.4 遍历 QMap 4. 深入功能 4.1 QMap 的键排序 4.2 QMap 的多键支持 4.3 查找所有值 . 性能考虑 6. 总结 参考文档 1. 基本概念 QMap 是 Qt 框架…

c/c++八股文

c基础 一、指针和引用的区别 定义方式: 指针是通过 * 操作符定义的变量,用于存储另一个变量的地址。例如: int* p &x;引用是通过 & 操作符定义的别名,直接引用另一个变量。例如: int& r x; 内存占用: 指针是一个独立的变量,占用一定的内存空间。引用不是独立的…

spring:spring 中的初始化操作

参考 https://www.jb51.net/program/322735nvy.htmhttps://blog.csdn.net/weixin_40511641/article/details/136843198

一文读懂SpringCLoud

一、前言 只有光头才能变强 认识我的朋友可能都知道我这阵子去实习啦&#xff0c;去的公司说是用SpringCloud(但我觉得使用的力度并不大啊~~)… 所以&#xff0c;这篇主要来讲讲SpringCloud的一些基础的知识。(我就是现学现卖了&#xff0c;主要当做我学习SpringCloud的笔记吧&…

CSS 的元素显示模式简单学习

目录 1. 元素显示模式 1.1 概述 1.2 块元素 1.3 行元素 1.4 行内块元素 1.5 元素显示模式总结 2. 元素显示模式转换 3. 单行文字垂直居中 4. 案例演示 1. 元素显示模式 1.1 概述 1.2 块元素 1.3 行元素 1.4 行内块元素 1.5 元素显示模式总结 2. 元素显示模式转换 3. 单…

FME学习笔记

读取数据 方法一&#xff1a;add reader 通过读模块来进行数据的读取 方法二&#xff1a;FeatureReader Parameters 通过转换器来进行数据的读取 可以通过空间范围进行筛选 在FME中&#xff0c;所有数据处理都要用到的&#xff0c;绝对的重点&#xff1a;转换器&#xff…

4、论文阅读:基于深度学习和成像模型的水下图像增强

基于深度学习和成像模型的水下图像增强 前言介绍物理成像模型光学成像原理数学公式深度学习方法Backscatter Estimation Module(反向散射估计模块)Direct-transmission Estimation Module(直接传输估计模块)训练方法前言 现在的主要挑战是水下机器人捕获的图像颜色失真。水…

新一代图像生成E2E FT:深度图微调突破

文章地址&#xff1a;Fine-Tuning Image-Conditional Diffusion Models is Easier than You Think 项目主页&#xff1a;https://gonzalomartingarcia.github.io/diffusion-e2e-ft/ 代码地址&#xff1a;https://github.com/VisualComputingInstitute/diffusion-e2e-ft 机构&am…