添加动态云层

<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>

相关推荐
leobertlan3 小时前
2025年终总结
前端·后端·程序员
子兮曰4 小时前
OpenClaw架构揭秘:178k stars的个人AI助手如何用Gateway模式统一控制12+通讯频道
前端·javascript·github
Howrun7774 小时前
VSCode烦人的远程交互UI讲解
ide·vue.js·vscode
百锦再4 小时前
Reactive编程入门:Project Reactor 深度指南
前端·javascript·python·react.js·django·前端框架·reactjs
莲华君4 小时前
React快速上手:从零到项目实战
前端·reactjs教程
百锦再4 小时前
React编程高级主题:测试代码
android·前端·javascript·react.js·前端框架·reactjs
易安说AI5 小时前
Ralph Loop 让Claude无止尽干活的牛马...
前端·后端
颜酱6 小时前
图结构完全解析:从基础概念到遍历实现
javascript·后端·算法
失忆爆表症6 小时前
05_UI 组件库集成指南:Shadcn/ui + Tailwind CSS v4
前端·css·ui
小迷糊的学习记录6 小时前
Vuex 与 pinia
前端·javascript·vue.js