cesium海洋到站提示

项目地址:Every Admin: 用于快速搭建后台管理和其他页面的项目,组件化开发,以及大屏展示.


 

<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 class="selectbox box2">

  <div class="title">

    航线站点

  </div>

  <div>

    <el-steps :space="200" :active="currentnum" finish-status="success">

      <el-step :title="item.name" v-for="(item,index) in arrsp" :key="index"  />

    </el-steps>

  </div>

</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/hycz";

import {hyczData1} from "../../../assets/hycz1";

let esc,viewer,scene;

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

});

let currents = ref(1)

let arrsp=ref([])

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

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

})

const row=(data)=>{

  if(!entity.value){

    scene.addhy({options:{startTime:"2022-03-09T23:10:00Z",modelUrl:"./济阳级护卫舰.gltf",imgUrl:"./帆船.png",stop:value1.value,track:value2.value,multip:textnum.value}},hyczData,callback)

  }else{

    scene.remove(entity.value)

    arrsp.value=[]

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

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

})

    scene.addhy({options:{startTime:"2022-03-09T23:10:00Z",modelUrl:"./济阳级护卫舰.gltf",imgUrl:"./帆船.png",stop:value1.value,track:value2.value,multip:textnum.value}},hyczData1,callback)

  }

}

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: '2016-05-05',

    name: '航线二',

    address: '民三',

  }

]

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

    }

  let   handleChange1=(val)=>{

    if(isleft.value){

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

    }

    }

const change = (val)=>{

  if(val=="海洋航行"){

    isleft.value = true

    scene.addhy({options:{startTime:"2022-03-09T23:10:00Z",modelUrl:"./济阳级护卫舰.gltf",imgUrl:"./帆船.png",stop:value1.value,track:value2.value,multip:textnum.value}},hyczData,callback)

    }

    if(val=="暂停"){

    isleft.value = false

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

    }

}

const value = ref('')


 

// const num = 0

const options = [

  {

    value: '海洋航行',

    label: '海洋航行',

  },

  {

    value: '暂停',

    label: '暂停',

  }

]

  </script>

  <style scoped>

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

  </style>

  <style>

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

  </style>

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

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

相关文章

以乐观心态拥抱生活,坚信美好终会降临

在人生的漫漫长河中,我们每个人都如同漂泊在波涛汹涌的大海上的一叶扁舟,时而遭遇狂风骤雨,时而沐浴温暖阳光。生活中的种种际遇,或喜或忧,或顺或逆,如同变幻莫测的风云,常常让我们心生焦虑与不安。然而,我要在这里郑重地告诉您:凡事您不必担心,会有个好结局的。这并…

2024年暑假ACM集训第1场

A:小青蛙跳台阶 题目描述 想必你应该做过这么一道题&#xff1a;一只小青蛙一次可以跳1级台阶&#xff0c;也可以一次跳2级台阶。求该青蛙跳上第N级台阶总共有多少种跳法&#xff1f;&#xff08;假设小青蛙的初始位置是第0级台阶&#xff09; 现在小青蛙遇到了一点麻烦&#x…

Docker快速搭建WordPress博客系统网站

WordPress 是一款广泛使用的开源内容管理系统(CMS),用于创建和管理网站和博客。 主要功能: 易于使用的界面:WordPress 提供了一个直观的后台管理界面,使用户能够轻松创建、编辑和管理网站内容。 主题和模板:WordPress 提供了各种主题和模板,可根据网站需求进行选择和自…

MQ消息队列+Lua 脚本实现异步处理下单流程

具体实现和代码可参考我以前做过的笔记&#xff1a;《黑马点评》异步秒杀优化|消息队列 回顾一下下单流程&#xff1a; 用户发起请求 会先请求Nginx,Nginx反向代理到Tomcat&#xff0c;而Tomcat中的程序&#xff0c;会进行串行工作&#xff0c; 分为以下几个操作&#xff1…

前端(1)HTML

1、标签 创建1.html文件&#xff0c;浏览器输入E:/frontheima/1.html&#xff0c;可以访问页面 页面展示 在VSCODE安装IDEA的快捷键&#xff0c;比如ctld复制一行、ctrlx剪切 <p id"p1" title"标题1">Hello,world!</p> <p id"p2"…

聊一聊知识图谱结合RAG

因为最近在做一些关于提高公司内部使用的聊天机器人的回答准确率&#xff0c;并且最近微软官方也是开源了一下graphrag的源码&#xff0c;所以想聊一聊这个知识图谱结合rag。 rag在利用私有数据增强大模型回答的领域是一种比较典型的技术&#xff0c;也就是我们提出问题的时候&…

网络安全新纪元:挑战、趋势与应对策略

引言 随着数字化时代的到来&#xff0c;网络安全不仅成为国家稳定发展的重要保障&#xff0c;也是国家安全的重要组成部分。近年来&#xff0c;网络安全领域面临着前所未有的挑战与机遇&#xff0c;一系列引人注目的趋势和预测逐渐浮出水面。本文将从网络安全的现状、面临的挑…

排序系列 之 希尔排序

&#xff01;&#xff01;&#xff01;排序仅针对于数组哦本次排序是按照升序来的哦 介绍 英文名为ShellSort&#xff0c;又称“缩小增量排序”是直接插入排序算法的一种更高效的改进版本希尔排序是把记录按下标的指定步长分组&#xff0c;然后按照每组使用直接插入排序&#…

[C++] 模板编程-02 类模板

一 类模板 template <class T或者typename T> class 类名 { .......... } 1.1 两种不同的实现 在以下的两种实现中,其实第一种叫做成员函数模板&#xff0c;并不能称为类模板因为这种实现,我们在调用时,并不需要实例化为Product这个类指定指定特定类型。 // 实现1 clas…

C++程序的UI界面闪烁问题的解决办法总结

Windows C++程序复杂的UI界面要使用多种绘图技术(使用GDI、GDI+、ddraw、D3D等绘图),并要贴图去美化,在窗口移动或者改变大小的时候可能会出现闪烁。下面罗列一下UI界面产生闪烁的几种可能的原因,并给出相应的解决办法。 1、原因一 如果熟悉显卡原理的话,调用GDI函数向屏…

【动态规划】不同路径

不同路径&#xff08;难度&#xff1a;中等&#xff09; AC代码 有点水 class Solution { public:int uniquePaths(int m, int n) {//以m为行&#xff0c;n为列&#xff0c;创建二维数组vector <vector<int>> dp(m1,vector<int>(n1));dp[0][1]1;dp[1][0]1;…

内网渗透—内网穿透工具NgrokFRPNPSSPP

前言 主要介绍一下常见的隧道搭建工具&#xff0c;以此来达到一个内网穿透的目的。简单说一下实验滴环境吧&#xff0c;kali作为攻击机&#xff0c;winserver2016作为目标靶机。 kali 192.168.145.171 winserver2016 10.236.44.127 显然它们处于两个不同的局域网&#xff0c…

Android 软键盘挡住输入框

Android原生输入法软键盘挡住输入框,网上各种解法,但不起效。 输入框都是被挡住了,第二张图的小点,实际就是输入法的光标。 解法: packages\inputmethods\LatinIME\java\res\values-land config.xml <!-- <fraction name="config_min_keyboard_height"&g…

第12周 分布式锁:Redisson框架应用(❤❤❤❤❤)

第12-2周 Redisson分布式锁框架 1. 整合Redisson1.1 依赖1.2 方式一:通过配置类配置Redisson1.3 应用简单应用看门狗模式可重入锁公平锁联锁红锁(已弃用)读写锁信号量(限流作用)闭锁**********************************************************官方文档 1. 整合Redisson 1.1…

JavaWeb--Servlet和JSP的基本使用

JavaWeb--Servlet和JSP的基本使用 文章说明servlet和jsp的发展历程最早的手动拼接html页面的servlet使用示例采用jsp技术进行交互与展示页面标签jsp与servlet共同使用、分层处理示例项目下载 文章说明 介绍了javaWeb中Servlet和JSP的基本使用&#xff0c;尽管它们的技术相对比较…

【python中级】 pyinstaller打包可执行程序的说明

【python中级】 pyinstaller打包可执行程序的说明 1.背景2.文档3.总结1.背景 相关博客: 【python中级】 pyinstaller打包python应用程序(1) https://blog.csdn.net/jn10010537/article/details/111058613【python中级】 pyinstaller打包cv.dnn.readNet(xml,bin)推理代码失…

Spring Boot集成Redis与Lua脚本:构建高效的分布式多规则限流系统

文章目录 Redis多规则限流和防重复提交记录访问次数解决临界值访问问题实现多规则限流先确定最终需要的效果编写注解&#xff08;RateLimiter&#xff0c;RateRule&#xff09;拦截注解 RateLimiter 编写lua脚本UUID时间戳编写 AOP 拦截 总结 Redis多规则限流和防重复提交 市面…

Unity在虚拟现实(VR)游戏开发中的优势

Unity引擎是一个功能强大的游戏开发平台&#xff0c;它在虚拟现实(VR)游戏开发中展现出了许多显著的优势。以下是Unity在VR游戏开发中的主要优势&#xff1a; 跨平台支持 Unity引擎支持将游戏部署到多个平台&#xff0c;包括PC、控制台、移动设备、VR/AR设备等。这种跨平台能…

在CentOS 7上安装和使用PostgreSQL的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 关系数据库管理系统是许多网站和应用程序的关键组成部分。它们提供了一种结构化的方式来存储、组织和访问信息。 PostgreSQL&…

每天一个数据分析题(四百五十)- 数据清洗

数据在真正被使用前需进行必要的清洗&#xff0c;使脏数据变为可用数据。下列不属于“脏数据”的是&#xff08;&#xff09; A. 重复数据 B. 错误数据 C. 交叉数据 D. 缺失数据 数据分析认证考试介绍&#xff1a;点击进入 题目来源于CDA模拟题库 点击此处获取答案 数据…