cesium海洋到站提示

news2024/11/15 13:59:54

项目地址: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.coloradmin.cn/o/1950944.html

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

相关文章

了解Java虚拟机(JVM)

前言&#x1f440;~ 上一章我们介绍网络原理相关的知识点&#xff0c;今天我们浅浅来了解一下java虚拟机JVM JVM&#xff08; Java Virtual Machine &#xff09; JVM内存区域划分 方法区/元数据区&#xff08;线程共享&#xff09; 堆&#xff08;线程共享&#xff09; 虚…

Nginx 配置与优化:常见问题全面解析

文章目录 Nginx 配置与优化:常见问题全面解析一、Nginx 安装与配置问题1.1 Nginx 安装失败问题描述解决方法1.2 Nginx 配置文件语法错误问题描述解决方法二、Nginx 服务启动与停止问题2.1 Nginx 无法启动问题描述解决方法2.2 Nginx 服务无法停止问题描述解决方法三、Nginx 性能…

尚硅谷vue全家桶(vue2+vue3)笔记

Vue2 一、Vue核心 01_简介 1.特点 采用组件化模式&#xff0c;提高代码复用率、且让代码更好维护。声明式编码&#xff0c;让编程人员无需直接操作DOM&#xff08;命令式编码&#xff09;&#xff0c;提高开发效率。使用虚拟DOM优秀的Diff算法&#xff0c;尽量复用DOM节点。…

【日常记录】【JS】JS中查询参数处理工具URLSearchParams

文章目录 1. 引言2. URLSearchParams2.1 URLSearchParams 的构造函数2.2 append() 方法2.3 delete() 方法2.4 entries() 方法2.5 forEach() 方法2.6 get() 方法2.7 getAll() 方法2.8 has() 方法2.9 keys() 方法2.10 set() 方法2.11 toString() 方法2.12 values() 方法 参考链接…

Pytorch深度学习实践(5)逻辑回归

逻辑回归 逻辑回归主要是解决分类问题 回归任务&#xff1a;结果是一个连续的实数分类任务&#xff1a;结果是一个离散的值 分类任务不能直接使用回归去预测&#xff0c;比如在手写识别中&#xff08;识别手写 0 − − 9 0 -- 9 0−−9&#xff09;&#xff0c;因为各个类别…

python毕业设计选题协同过滤算法在音乐推荐系统

✌网站介绍&#xff1a;✌10年项目辅导经验、专注于计算机技术领域学生项目实战辅导。 ✌服务范围&#xff1a;Java(SpringBoo/SSM)、Python、PHP、Nodejs、爬虫、数据可视化、小程序、安卓app、大数据等设计与开发。 ✌服务内容&#xff1a;免费功能设计、免费提供开题答辩P…

【进程检测】使用pywin32捕获window进程信息

需求 检测win系统依赖服务进程的运行情况&#xff0c;版本信息&#xff08;进程检测器&#xff09;检测内外网连接情况 实现 进程检测 # 使用pywin32获取进程版本信息 def get_version_info(path):try:info GetFileVersionInfo(path, \\)ms info[FileVersionMS]ls info[…

基于单片机控制的气动机械手设计

摘 要&#xff1a; 机械手拥有灵活的运动结构&#xff0c;可以在控制系统控制下完成复杂的运动&#xff0c;从而实现高效率的自动化生产方式&#xff0c;因而成为发展工业生产技术的重要方向。气动技术和单片机技术已相当成熟&#xff0c;工业应用广泛&#xff0c;该文将基于单…

使用 useRequestURL 组合函数访问请求URL

title: 使用 useRequestURL 组合函数访问请求URL date: 2024/7/26 updated: 2024/7/26 author: cmdragon excerpt: 摘要&#xff1a;本文介绍了Nuxt 3中的useRequestURL组合函数&#xff0c;用于在服务器端和客户端环境中获取当前页面的URL信息。通过示例展示了如何在页面中…

html+css 实现水波纹按钮

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

Vue 3 实现左侧列表点击跳转滚动到右侧对应区域的功能

使用 Vue 3 实现左侧列表点击跳转到右侧对应区域的功能 1. 引言 在这篇博客中&#xff0c;我们将展示如何使用 Vue 3 实现一个简单的页面布局&#xff0c;其中左侧是一个列表&#xff0c;点击列表项时&#xff0c;右侧会平滑滚动到对应的内容区域。这种布局在很多应用场景中都…

云计算实训15——shell脚本、变量、自动化安装脚本、条件判断、循环

一、shell 脚本 1.基本概念 shell脚本就是由Shell命令组成的执行文件&#xff0c;将一些命令整合到一个文件 中&#xff0c;进行处理业务逻辑&#xff0c;脚本不用编译即可运行&#xff0c;它从一定程度上减轻 了工作量&#xff0c;提高了工作效率&#xff0c;还可以批量、定…

云服务部署项目(Spring + Vue)

云计算&#xff1a;腾讯云 操作系统&#xff1a;Ubuntu 22.04.4 LTS 项目&#xff1a;若依前后端分离项目&#xff08;SpringBoot Vue&#xff09; 首先要安装基本的一些依赖环境&#xff0c;大家可以看一下我往期的文章&#xff1a; Ubuntu在线JDK Ubuntu在线安装Nginx Ubunt…

Debain安装PostgreSql

目录 Debian和Centos区别 安装PostgreSql 更新包索引&#xff1a; 安装 PostgreSQL&#xff1a; 配置自动启动和启用 PostgreSQL 服务&#xff1a; 配置postGreSql 切换到 PostgreSQL 用户&#xff1a; 访问 PostgreSQL Shell&#xff1a; 设置密码 退出 PostgreSQL …

【C++题解】1066. 字符图形2-星号直角

问题&#xff1a;1066. 字符图形2-星号直角 类型&#xff1a;嵌套循环、图形输出 题目描述&#xff1a; 打印字符图形。 输入&#xff1a; 一个整数&#xff08; 0<n<10 &#xff09;。 输出&#xff1a; 一个字符图形。 样例&#xff1a; 输入&#xff1a; 3输…

集成显卡和独立显卡有什么区别?

显卡&#xff08;Video card&#xff0c;Graphics card&#xff09;全称显示接口卡&#xff0c;又称显示适配器&#xff0c;是计算机最基本配置、最重要的配件之一。平时大家可能都听过集显和独显&#xff0c;那么这两个显卡类别都是什么意思呢&#xff1f; 集成显卡 集成显卡…

Unity UGUI 之 坐标转换

本文仅作学习笔记与交流&#xff0c;不作任何商业用途 本文包括但不限于unity官方手册&#xff0c;唐老狮&#xff0c;麦扣教程知识&#xff0c;引用会标记&#xff0c;如有不足还请斧正 本文在发布时间选用unity 2022.3.8稳定版本&#xff0c;请注意分别 前置知识&#xff1a;…

混凝土做的风机?风领新能源推出钢-超高性能混凝土体内预应力塔筒

随着全球能源结构的转型和技术的不断进步&#xff0c;陆上风电行业已正式迈入平价时代。这一里程碑式的转变不仅降低了风电项目的投资门槛&#xff0c;更激发了行业对于机组大型化的热情与追求。在这样的市场下&#xff0c;主流风机制造商纷纷推出10MW平台级别机组&#xff0c;…

VLAN通讯实验

目录 拓扑图 需求 需求分析 配置过程 1、手工配置 2、 使用DHCP获得IP地址信息 3、测试全网是否可达 拓扑图 需求 1、PC1、PC3属于VLAN 2 2、PC2、PC4属于VLAN 3 3、通过DHCP使得PC获取IP地址信息 4、全网可达 需求分析 1、先手工配置网段&#xff0c;VLAN 2为192.168.1…

杭州东网约车管理再出行方面取得的显著成效

随着科技的飞速发展&#xff0c;网约车已成为人们日常出行的重要选择。在杭州这座美丽的城市&#xff0c;网约车服务更是如雨后春笋般蓬勃发展。特别是杭州东站&#xff0c;作为杭州的重要交通枢纽&#xff0c;网约车管理显得尤为重要。近日&#xff0c;沧穹科技郑重宣告已助力…