添加动态云层

news2024/9/22 14:37:18


 

<template>

  <div class="topbox">

    xx卫星管理

  </div>

  <div class="selectbox">

    <div class="title">

      卫星列表

    </div>

    <el-table :data="tableData" style="width: 100%;height:230px;" @row-click="row">

      <el-table-column prop="date" label="日期"/>

      <el-table-column prop="name" label="卫星名"/>

      <el-table-column prop="address" label="类型" />

    </el-table>

</div>

<div style="color:#ffffff;position:absolute;top:90px;right:10px;z-index:100;">

  速度:<el-input-number v-model="currents" :min="1" :max="100" @change="handleChange" />

</div>

  <div id="container" class="mainMap2"></div>

  </template>

  <script setup lang="ts">

import { ref, onMounted} from 'vue';

import {hyczData} from "../../../assets/fj";

let esc,viewer,scene;

let addurl ;

onMounted(async () => {

   esc = new easyCesium.init();

  //  默认加载本地静态图片

    viewer = esc.init({url:"./baseImage.jpg",Cesium:Cesium,id:"container"});

    esc.utils().tools({val:"高程"})

    scene = esc.scenes()

    scene.hideTime()

    addurl = esc.addUrl();

});

let currents = ref(1)

let arrsp=ref([])

hyczData.forEach((item,index)=>{

  arrsp.value.push({name:"站点"+(index+1),lt:item})

})

let tles =    {

          "code": "xyz",

          "index": 0,

         

          "name": "xyz-000000",

          "startTime": "2018-09-15 08:00:00",

          "endTime": "2018-09-15 20:00:00"

        };

         let gltf = "./beidou.gltf";

         let imgurl = './satellite.png';

        let time = new Date(tles.startTime);

                          let pathColor=Cesium.Color.fromCssColorString("#00ff0f")

                          let labelColor = Cesium.Color.fromCssColorString("#00ffff")

                          let endTime = 24

                          const option = {

                            text: tles.name,

                            startTime: time,

                            BoardUri: imgurl,

                            BoardShow: false,

                            font: "5px sans-serif", // 卫星名称字体和字号大小

                            pathColor: [pathColor.red * 255, pathColor.green * 255, pathColor.blue * 255, 255],

                            pathWidth:  1,

                            model: gltf,

                            modelScale: 500,

                            labelColor: [labelColor.red * 255, labelColor.green * 255, labelColor.blue * 255, 255],

                            stepNum: 360,

                            time: endTime

                        };

                        const tle = {

                            tle1: "1 50000U 18001B   21349.00000000  .00000000  00000-0  30000-3 0   111",

                            tle2:  "2 50000  97.4085  63.8633 0004624 104.1156 214.7760 15.25669381  2222",

                        };

   


 

const row=(data)=>{

  if(!entity.value){

    let czml = addurl.getCzml(tle,option);

    let add = addurl.addEntity(czml);

    add.then(res=>{

    })

  }

  if(data.name=="添加云层"){

    esc.utils().tools({viewer:viewer,val:"动态云",url:"./earth_cloud.png",step:0.1})

  }

}

const tableData = [

  {

    date: '2016-05-03',

    name: '星一',

    address: '民一',

  },

  {

    date: '2016-05-02',

    name: '星三',

    address: '民二',

  },

  {

    date: '2016-05-04',

    name: '星二',

    address: '民三',

  },

  {

    date: '2016-05-05',

    name: '星二',

    address: '民三',

  },

  {

    date: '2016-05-02',

    name: '星三',

    address: '民二',

  },

  {

    date: '2016添加云层-05-04',

    name: '添加云层',

    address: '添加云层',

  },

  {

    date: '添加云层-05-05',

    name: '添加云层1',

    address: '添加云层1',

  }

]

let isleft = ref(false)

let textnum = ref(1)

let value1 = ref(true)

let value2 = ref(true)

let entity = ref(null)

let currentnum = ref(1)

let callback=(res)=>{

  if(res.entity){

    entity.value = res.entity

  }

  if(res.num){

    currentnum.value = res.num+1

  }

    }

    let   handleChange=(val)=>{

        scene.status({options:{multip:currents.value}})

        esc.utils().tools({viewer:viewer,val:"动态云",url:"./earth_cloud.png",step:currents.value})

    }

  let   handleChange1=(val)=>{

    if(isleft.value){

      scene.status({options:{status:value1.value,multip:textnum.value,entity:entity.value,track:value2.value}})

    }

    }

const change = (val)=>{

}

const value = ref('')


 

// const num = 0

const options = [

]

  </script>

  <style scoped>

  @import url("../../../assets/css/scene.css");

  </style>

  <style>

  @import url("../../../assets/css/scenet.css");

  </style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1946895.html

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

相关文章

基于 HTML+ECharts 实现的大数据可视化平台模板(含源码)

构建大数据可视化平台模板&#xff1a;基于 HTML 和 ECharts 的实现 大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示&#xff0c;团队可以快速理解复杂的数据模式&#xff0c;发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一…

配置SSH公钥互信

目录 第一台主机&#xff1a;servera&#xff08;172.25.250.101&#xff09; 第一步&#xff1a;查看 . ssh目录下面是否为空 第二步&#xff1a;输入命令ssh-keygen 第三步&#xff1a; 再看查看一下. ssh目录 第四步&#xff1a; 输入命令 ssh-copy-id root172.25.250…

KubeSphere核心实战_kubesphere全功能安装_启用kubesphere的热插拔插件---分布式云原生部署架构搭建037

然后我们开始安装kubesphere,首先进入官网点击kubernetes安装 可以看到对应的,条件说kubernetes要在1.20.x以上,我们的是 1.20.9,然后cpu硬件满足,然后,默认存储类型,上一节我们安装好了 然后就可以开始,去下载两个配置文件可以看到上面的两个配置文件 这两个文件,上面是直接…

【React】package.json 文件详解

文章目录 一、package.json 文件的基本结构二、package.json 文件的关键字段1. name 和 version2. description3. main4. scripts5. dependencies 和 devDependencies6. repository7. keywords8. author 和 license9. bugs 和 homepage 三、package.json 文件的高级配置1. 配置…

《Java初阶数据结构》----4.<线性表---Stack栈和Queue队列>

前言 大家好&#xff0c;我目前在学习java。之前也学了一段时间&#xff0c;但是没有发布博客。时间过的真的很快。我会利用好这个暑假&#xff0c;来复习之前学过的内容&#xff0c;并整理好之前写过的博客进行发布。如果博客中有错误或者没有读懂的地方。热烈欢迎大家在评论区…

<数据集>抽烟识别数据集<目标检测>

数据集格式&#xff1a;VOCYOLO格式 图片数量&#xff1a;4860张 标注数量(xml文件个数)&#xff1a;4860 标注数量(txt文件个数)&#xff1a;4860 标注类别数&#xff1a;1 标注类别名称&#xff1a;[smoking] 使用标注工具&#xff1a;labelImg 标注规则&#xff1a;对…

高三了,无计算机基础能学计算机吗?

高三阶段学习计算机编程是完全可行的&#xff0c;即使你没有任何计算机基础。我收集制作一份C语言学习包&#xff0c;对于新手而言简直不要太棒&#xff0c;里面包括了新手各个时期的学习方向&#xff0c;包括了编程教学&#xff0c;数据处理&#xff0c;通信处理&#xff0c;技…

mysql面试(五)

前言 本章节从数据页的具体结构&#xff0c;分析到如何生成索引&#xff0c;如何构成B树的索引结构。 以及什么是聚簇索引&#xff0c;什么是联合索引 InnoDB数据结构 行数据 我看各种文档中有好多记录数据结构的&#xff0c;但是这些都是看完就忘的东西。在这里详细讲也没…

【进阶篇-Day12:JAVA中stream流、File类的介绍】

目录 1、stream流1.1 stream流的作用1.2 stream流的思想1.3 获取stream流对象1.4 stream流中间操作方法1.5 stream流终结操作方法1.6 stream收集操作1.7 stream的综合案例 2、File类2.1 File类创建文件对象2.2 File类的常用方法2.3 File类的创建和删除方法2.4 File类的遍历方法…

volatile与JMM

目录 volatile特点volatile内存语义volatile为什么可以保证可见性和有序性呢&#xff1f;内存屏障屏障分类粗分两种屏障细分四种屏障 volatile特性案例说明如何正确使用volatile总结 volatile特点 被volatile修饰的变量有2大特点&#xff1a;可见性和有序性&#xff08;禁重排…

nginx even块的配置

events 块是 Nginx 配置文件 (nginx.conf) 中的重要部分&#xff0c;用于配置与事件处理相关的参数。它主要定义了 Nginx 服务器如何处理客户端连接&#xff0c;以及控制工作进程的行为。这些配置对于优化服务器性能和稳定性至关重要。 accept_mutex 设置Nginx网络连接序列化 …

leetcode-二分查找算法总结

最朴素二分查找算法&#xff1a; 最朴素二分查找算法: 最基础的一道题:基于有序数组的二分查找--. - 力扣&#xff08;LeetCode&#xff09; 基本流程: 1:实际上二分查找不一定非得要有序&#xff0c;能否使用二分查找的关键是是否具有二段性. 2:基于有序数组的二分查找算…

jetbrains 、IntelliJ IDEA、PyCharm 等工具英语音译读音

本心、输入输出、结果 文章目录 jetbrains 、IntelliJ IDEA、PyCharm 等工具英语音译读音前言jetbrains 、IntelliJ IDEA、PyCharm 等工具英语音译读音jetbrains 、IntelliJ IDEA、PyCharm 等工具英语音译读音 编辑 | 简简单单 Online zuozuo 地址 | https://blog.csdn.net/qq_…

谷粒商城实战笔记-55-商品服务-API-三级分类-修改-拖拽数据收集

文章目录 一&#xff0c;拖拽后结点的parentCid的更新二&#xff0c;拖拽后结点的父节点下所有结点的sort排序属性的变化更新排序的逻辑代码分析 三&#xff0c;拖拽后结点及其子节点catLevel的变化判断是否需要更新 catLevel获取拖动后的新节点 更新 catLevel完整代码 这一节的…

服务器数据恢复—V7000存储硬盘故障脱机的数据恢复案例

服务器存储数据恢复环境&#xff1a; 某品牌P740小型机AIXSybaseV7000磁盘阵列柜&#xff0c;磁盘阵列柜中有12块SAS机械硬盘&#xff08;其中包括一块热备盘&#xff09;。 服务器存储故障&#xff1a; 磁盘阵列柜中有一块磁盘出现故障&#xff0c;运维人员用新硬盘替换掉故障…

【安当产品应用案例100集】003-基于SSL VPN架构,通过ASP Radius认证机制强化远程办公

SSL VPN远程安全接入技术&#xff0c;想必大家都已有所耳闻。简而言之&#xff0c;这项技术允许你在家中或其他远程位置&#xff0c;通过安全、可靠的途径访问公司内部的网络资源&#xff0c;从而实现无缝、无差别的远程办公体验。它作为企业远程访问的优选方案&#xff0c;其简…

SpringBoot热部署重启关闭(DevTools)

一、DevTools依赖 1、DevTools简介 在Spring Boot项目中&#xff0c;spring-boot-devtools模块提供了多种开发时的便利功能&#xff0c;其中最显著的是restart和livereload特性&#xff0c;它们分别用于应用代码的热重启和前端资源的即时重载。 devtools依赖&#xff1a; &l…

UCOSIII 时间片轮调度接口OS_SchedRoundRobin详解

时间片轮调度&#xff08;Round-Robin Scheduling&#xff09;是一种常见的任务调度算法&#xff0c;它将CPU时间片均匀地分配给每个任务&#xff0c;确保每个任务在一定时间内能够获得CPU资源。这种调度方式适用于需要公平分配CPU时间的系统&#xff0c;特别是在有多个相同优先…

叶再豪老师-【番外篇-主升三域】课程

文章目录 1.番外篇1.1番外篇:【道篇】1.1.1 课程目录1.1.2 大道至简1.1.3 欲速则不达&#xff0c;见小利则大事不成1.1.4 强弱转换规律1.1.5 创战法以和道&#xff0c;成为简单快乐的投资者1.1.6 融合道&#xff0c;服务众生&#xff0c;离苦得乐 1.2 番外篇:【势篇】1.2.1 顺势…

Adobe国际认证详解-从零开始学做视频剪辑

从零开始学做视频剪辑&#xff0c;是许多初学者面临的挑战。在这个数字媒体时代&#xff0c;视频剪辑已经成为一种重要的技能&#xff0c;无论是个人爱好还是职业发展&#xff0c;掌握视频剪辑技能都是非常有价值的。 视频剪辑&#xff0c;简称“剪辑”&#xff0c;是视频制作过…