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,一经查实,立即删除!

相关文章

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;也就是我们提出问题的时候&…

排序系列 之 希尔排序

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

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…

JavaWeb--Servlet和JSP的基本使用

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

好书推荐 -- 《精通推荐算法》

新书发布&#xff0c;京东限时15天内5折优惠&#xff0c;半天即可送到。 图书封底有读者微信群&#xff0c;作者也在群里&#xff0c;任何技术、offer选择和职业规划的问题&#xff0c;都可以咨询。 《精通推荐算法》&#xff0c;限时半价&#xff0c;半日达https://u.jd.com…

以flask为后端的博客项目——星云小窝

以flask为后端的博客项目——星云小窝 文章目录 以flask为后端的博客项目——星云小窝前言一、星云小窝项目——项目介绍&#xff08;一&#xff09;二、星云小窝项目——项目启动&#xff08;二&#xff09;三、星云小窝项目——项目结构&#xff08;三&#xff09;四、谈论一…

Stable Diffusion 使用详解(3)---- ControlNet

背景 炼丹师在AI绘画的过程中&#xff0c;由于Stable Diffusion的原理是水滴式的扩散作图原理&#xff0c;其实在前面也有提到&#xff0c;他的发挥是‘不稳定’的&#xff0c;因为你没有办法做到精确控制&#xff0c;只能说是大致符合你的预期。你不能总依赖抽卡固定随机数种…

web学习笔记(八十三)git

目录 1.Git的基本概念 2.gitee常用的命令 3.解决两个人操作不同文件造成的冲突 4.解决两个人操作同一个文件造成的冲突 1.Git的基本概念 git是一种管理代码的方式&#xff0c;广泛用于软件开发和版本管理。我们通常使用gitee&#xff08;码云&#xff09;来云管理代码。 …

重生之我当程序猿外包

第一章 个人介绍与收入历程 我出生于1999年&#xff0c;在大四下学期进入了一家互联网公司实习。当时的实习工资是3500元&#xff0c;公司还提供住宿。作为一名实习生&#xff0c;这个工资足够支付生活开销&#xff0c;每个月还能给父母转1000元&#xff0c;自己留2500元用来吃…

前端开发知识(三)-javascript(对象)

一、JS对象 包括JS已经定义的对象&#xff0c;如&#xff0c;Array,Sting &#xff0c;DOM&#xff0c;BOM等&#xff0c;其中&#xff0c;JSON是用户自定义对象&#xff08;除对象外&#xff0c;还有文本&#xff09;&#xff0c;其他是JS定义 1.Array&#xff1a;数组 数…

Java从入门到精通 (十一) ~ 操作系统、进程和线程

无论做什么&#xff0c;请记住都是为你自己而做&#xff0c;这样就毫无怨言&#xff01;今天&#xff0c;我为自己而活&#xff01;今天&#xff0c;又是美丽的一天&#xff01;早安&#xff0c;朋友&#xff01; 目录 前言 一、操作系统 1. 概念 2. 操作系统的基本功能 3…

@RequiredArgsConstructor详解

RequiredArgsConstructor详解 一、什么是RequiredArgsConstructor? RequiredArgsConstructor是Lombok的一个注解&#xff0c;简化了我们对Autowired书写&#xff0c;我们在写Controller层或者Service层的时候&#xff0c;总是需要注入很多mapper接口或者service接口&#xf…

Java-----栈

目录 1.栈&#xff08;Stack&#xff09; 1.1概念 1.2栈的使用 1.3栈的模拟实现 1.4栈的应用场景 1.5栈、虚拟机栈、栈帧有什么区别呢 1.栈&#xff08;Stack&#xff09; 1.1概念 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操…

EEtrade:区块链是什么

区块链&#xff0c;这个近年来频繁出现在我们视野中的术语&#xff0c;已经从一个技术小众圈的词汇&#xff0c;逐渐演变为全球关注的焦点。从比特币的诞生&#xff0c;到如今在金融、供应链、物联网等领域的广泛应用&#xff0c;区块链技术正在深刻地改变着我们的生活。那么&a…