supermap iclient3d for cesium模型沿路径移动

news2024/9/21 4:31:10

可以直接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.coloradmin.cn/o/2142878.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

负载均衡:从理论到实践 ---day04

负载均衡 负载均衡1.什么是负载均衡2.负载均衡的分类硬件负载均衡软件负载均衡选择 3.引入负载均衡的好处 第一个Ribbon实例步骤1&#xff1a;步骤2&#xff1a;步骤3&#xff1a;步骤4&#xff1a; 问题1. 负载均衡的主要目标是什么&#xff1f;2. 负载均衡器的作用是什么&…

【云岚到家-即刻体检】-day07-2-项目介绍及准备

【云岚到家-即刻体检】-day07-2-项目介绍及准备 1 项目介绍1&#xff09;项目简介2&#xff09;界面原型3&#xff09;实战目标 2 搭建实战环境1&#xff09;服务端2&#xff09;管理端前端工程3&#xff09;用户端前端工程4&#xff09;测试 3 熟悉项目代码1&#xff09;接口文…

Linux操作系统面试题记录

一、进程与线程 1.并发和并行的区别 并发&#xff1a;一个cpu处理器处理多个任务&#xff1b; 并行&#xff1a;多个cpu处理器处理多个任务&#xff1b; 2.进程和线程是什么&#xff1f;区别&#xff1f;何时用线程何时用进程&#xff1f; Linux中其实没有进程线程之分&…

面试官:讲一讲Spring MVC源码解析

好看的皮囊千篇一律、有趣的灵魂万里挑一 文章持续更新&#xff0c;可以微信搜索【小奇JAVA面试】第一时间阅读&#xff0c;回复【资料】获取福利&#xff0c;回复【项目】获取项目源码&#xff0c;回复【简历模板】获取简历模板&#xff0c;回复【学习路线图】获取学习路线图。…

驱动器磁盘未格式化恢复实战

驱动器磁盘未格式化的深度剖析 在日常的数字生活中&#xff0c;驱动器作为数据存储的重要载体&#xff0c;承载着用户无数的珍贵资料。然而&#xff0c;当遇到“驱动器中的磁盘未被格式化”的提示时&#xff0c;这份平静往往会被瞬间打破。这一状况不仅让用户感到困惑和焦虑&a…

JZ2440开发板——S3C2440的UART的使用

以下内容源于韦东山课程的学习与整理&#xff0c;如有侵权请告知删除。 一、UART硬件简介 UART&#xff0c;全称是“Universal Asynchronous Receiver Transmitter”&#xff0c;即“通用异步收发器”&#xff0c;也就是我们日常说的“串口”。 它在嵌入式中用途非常广泛&…

LabVIEW提高开发效率技巧----VI服务器和动态调用

VI服务器&#xff08;VI Server&#xff09;和动态调用是LabVIEW中的两个重要功能&#xff0c;可以有效提升程序的灵活性、模块化和可扩展性。通过这两者的结合&#xff0c;开发者可以在运行时动态加载和调用VI&#xff08;虚拟仪器&#xff09;&#xff0c;实现更为复杂的应用…

【 html+css 绚丽Loading 】 000052 璇玑转轮

前言&#xff1a;哈喽&#xff0c;大家好&#xff0c;今天给大家分享今天给大家分享一篇文章&#xff01;并提供具体代码帮助大家深入理解&#xff0c;彻底掌握&#xff01;创作不易&#xff0c;如果能帮助到大家或者给大家一些灵感和启发&#xff0c;欢迎收藏关注哦 &#x1f…

实时数仓3.0DWD层

实时数仓3.0DWD层 DWD层设计要点&#xff1a;9.1 流量域未经加工的事务事实表9.1.1 主要任务9.1.2 思路9.1.3 图解9.1.4 代码 9.2 流量域独立访客事务事实表9.2.1 主要任务9.2.2 思路分析9.2.3 图解9.2.4 代码 9.3 流量域用户跳出事务事实表9.3.1 主要任务9.3.2 思路分析9.3.3 …

全面掌握 Jest:从零开始的测试指南(下篇)

在上一篇测试指南中&#xff0c;我们介绍了Jest 的背景、如何初始化项目、常用的匹配器语法以及钩子函数的使用。这一篇篇将继续深入探讨 Jest 的高级特性&#xff0c;包括 Mock 函数、异步请求的处理、Mock 请求的模拟、类的模拟以及定时器的模拟、snapshot 的使用。通过这些技…

办了房屋抵押经营贷,空壳公司不怕被查吗?续贷不上怎么办?

很多有房的朋友&#xff0c;想必都办理过抵押经营贷款。但是&#xff0c;当办完房屋抵押经营贷款之后&#xff0c;钱到手了&#xff0c;别光顾着乐呵&#xff0c;贷后管理可是门大学问&#xff0c;稍有不慎&#xff0c;麻烦就找上门了。咱得确保资金用得对路&#xff0c;征信亮…

windows 使用wsl安装docker

前言 很多情况下代码开发需要依赖 Linux 系统&#xff0c;比如安装 Docker 容器来实现代码隔离&#xff0c;然而问题是大部分同学的电脑都是 Windows 系统&#xff0c;这时就会出现大量报错&#xff0c;经历过的同学一定是边踩坑边落泪。 如何免费拥有一台 Linux 服务器呢&…

什么是即时通讯平台

在当今数字化时代&#xff0c;高效的沟通和协作是企业成功的关键。为了满足企业的沟通需求&#xff0c;即时通讯平台应运而生。WorkPlus作为一款企业级即时通讯平台&#xff0c;提供了丰富的功能和安全性&#xff0c;助力企业实现高效协作、数字化办公以及推动业务发展。本文将…

为什么直播要用RTMP?

为什么要选RTMP 直播使用RTMP&#xff08;Real-Time Messaging Protocol&#xff09;协议的原因主要有以下几点&#xff1a; 1. 低延迟特性 RTMP被设计为实时消息传递协议&#xff0c;通过优化传输机制&#xff0c;可以实现较低的传输延迟。这对于直播来说至关重要&#xff…

LeetCode_sql_day26(184,1549,1532,1831)

描述 184.部门工资最高的员工 表&#xff1a; Employee ----------------------- | 列名 | 类型 | ----------------------- | id | int | | name | varchar | | salary | int | | departmentId | int | -----------------…

22章 开发高效算法

1.编写一个程序&#xff0c;提示用户输入一个字符串&#xff0c;然后显示最大连续递增的有序子字符串。分析你的程序的时间复杂度。 import java.util.Scanner;public class Test {public static void main(String[] args) {System.out.println("请输入字符串&#xff1a…

这个公司可以做点什么呢?

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 屏蔽力是信息过载时代一个人的特殊竞争力&#xff0c;任何消耗你的人和事&#xff0c;多看一眼都是你的不…

国学盛典 致敬先贤 《老子与道德经》纪录片研讨会在北京善品堂国学馆圆满落幕

9月10日&#xff0c;《老子与道德经》纪录片研讨会在北京善品堂国学馆圆满落幕。中国著名表演艺术家、曾饰演央视86版电视剧《西游记》中“孙悟空”的六小龄童先生与两百余人传统文化传播者、践行者、爱好者齐聚一堂&#xff0c;共同交流。本次会议由中国文化促进会福文化工作委…

python-在PyCharm中使用PyQt5

文章目录 1. 安装 PyQt5 和QtTools2. QtDesigner 和 PyUIC 的环境配置2.1 在 PyCharm 添加 Create Tools2.2 添加 PyUIC 工具 3. 创建ui界面4. 使用python调用ui界面参考文献 1. 安装 PyQt5 和QtTools QT 是最强大的 GUI 库之一&#xff0c;PyQt5 是 Python 绑定 QT5 应用的框…

phpstudy 建站使用 php8版本打开 phpMyAdmin后台出现网页提示致命错误:(phpMyAdmin这是版本问题导致的)

报错提示&#xff1a; 解决方法&#xff1a;官网下载phpmyadmin 5.2.1版本。 下载地址&#xff1a;phpMyAdmin 将网站根目录phpMyAdmin4.8.5里面的文件换成 官网下载的5.2.1版本即可。 重启网站&#xff0c;打开phpMyAdmin后台即可&#xff08;若打不开更改 mysql密码即可&am…