当前位置: 首页 > news >正文

Cesium 显示经纬高

文章目录

    • 需求
    • 分析

需求

页面展示经、纬度和高

在这里插入图片描述

分析

  • html
<div id="latlng_show" style="width:340px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;"><div style="width:100px;height:30px;float:left;"><font size="3" color="white">经度:<span id="longitude_show"></span></font></div><div style="width:100px;height:30px;float:left;"><font size="3" color="white">纬度:<span id="latitude_show"></span></font></div><div style="width:140px;height:30px;float:left;"><font size="6" color="white">视角高:<span id="altitude_show"></span>km</font></div>
</div>
  • js
<!-- 经纬度实时显示 -->
/*** 经纬度显示*/
function getLonLat() {var longitude_show = document.getElementById("longitude_show");var latitude_show = document.getElementById("latitude_show");longitude_show.innerHTML = "0";latitude_show.innerHTML = "0";var canvas = viewer.value.scene.canvas;//具体事件的实现var ellipsoid = viewer.value.scene.globe.ellipsoid;var handler = new Cesium.ScreenSpaceEventHandler(canvas);handler.setInputAction(function (movement) {//捕获椭球体,将笛卡尔二维平面坐标转为椭球体的笛卡尔三维坐标,返回球体表面的点var cartesian = viewer.value.camera.pickEllipsoid(movement.endPosition,ellipsoid);if (cartesian) {//将笛卡尔三维坐标转为地图坐标(弧度)var cartographic =viewer.value.scene.globe.ellipsoid.cartesianToCartographic(cartesian);//将地图坐标(弧度)转为十进制的度数var lat_String = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);var log_String = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);var alti_String = (viewer.value.camera.positionCartographic.height / 1000).toFixed(2);longitude_show.innerHTML = log_String;latitude_show.innerHTML = lat_String;}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

相关文章:

Cesium 显示经纬高

文章目录 需求分析 需求 页面展示经、纬度和高 分析 html <div id"latlng_show" style"width:340px;height:30px;position:absolute;bottom:40px;right:200px;z-index:1;font-size:15px;"><div style"width:100px;height:30px;float:left;…...

专访 Hyper Oracle:可编程的 zkOracle 打造未来世界的超算

许多 Web3 应用在实现的过程中&#xff0c;常常会遇到基础设施方面的限制&#xff0c;包括去中心化自动化、预言机、链上信息搜索等问题。绝大部分区块链的中间件网络都是依赖于节点质押来保证节点执行的诚实性&#xff0c;这样的模式会产生诸多衍生问题&#xff0c;例如安全性…...

ThreadLocal存放当前用户

用户信息必须由后端获取&#xff0c;不能通过前端传入的id是不可信的&#xff0c;&#xff0c;可能会出现越权的问题&#xff0c;&#xff0c;&#xff0c;怎么通过后端获取当前登录用户&#xff0c;&#xff0c;&#xff0c; 就需要将User 和 当前线程绑定在一起&#xff0c;&…...

es入门实战

创建索引 PUT /hotel/ { “mappings”:{ “properties”:{ “title”:{ “type”:“text” }, “city”:{ “type”:“keyword” }, “price”:{ “type”:“double” } } } } 给索引写入数据 POST /hotel/_doc/001 { “title”:“好再来大酒店”, “city”:“东京”, “pri…...

c++系列之指针

今天不是做题系列&#xff0c;是知识系列啦。 说到指针&#xff0c;我们初学这一定会气的牙痒痒把&#xff0c;笔者也是&#xff0c;这么我好久而不得呀&#xff0c;今天来让我们聊聊指针。 其一 首先&#xff0c;我们明确的知道&#xff0c;假如我们开一个变量&#xff0c;…...

网络安全:挑战与防护策略

一、引言 随着科技的快速发展&#xff0c;互联网已经成为我们生活和工作的重要组成部分。然而&#xff0c;随着网络技术的不断升级&#xff0c;网络安全问题也日益凸显。网络攻击、数据泄露、身份盗用等问题&#xff0c;不仅威胁到个人隐私&#xff0c;也对企业和国家的安全构…...

AI 插件:未来的浏览器、前端与交互

想象一下&#xff0c;你在浏览器中粘贴一个 URL&#xff0c;这个 URL 不仅仅是一个网址&#xff0c;而是一个功能强大、能执行多种任务的 AI 插件。这听起来像是未来的事情&#xff0c;但实际上&#xff0c;这种变革已经悄悄进行中。 1. 插件的魅力与局限性 当我第一次接触到…...

R包开发-2.1:在RStudio中使用Rcpp制作R-Package(更新于2023.8.23)

目录 0-前言 1-在RStudio中创建R包项目 2-创建R包 2.1通过R函数创建新包 2.2在RStudio通过菜单来创建一个新包 2.3关于R包创建的说明 3-添加R自定义函数 4-添加C函数 0-前言 目标&#xff1a;在RStudio中创建一个R包&#xff0c;这个R包中包含C函数&#xff0c;接口是Rc…...

土豆叶病害识别(图像连续识别和视频识别)

效果视频&#xff1a;土豆叶病害识别&#xff08;Python代码&#xff0c;pyTorch框架&#xff0c;视频识别&#xff09;_哔哩哔哩_bilibili 代码运行要求&#xff1a;Torch库>1.13.1&#xff0c;其它库无版本要求 1..土豆叶数据集主要包好三种类别&#xff08;Early_Blight…...

三、JVM监控及诊断工具-GUI篇

目录 一、工具概述二、jconsole&#xff08;了解即可&#xff09;1、基本概述2、启动3、三种连接方式4、作用 三、Visual VM 一、工具概述 二、jconsole&#xff08;了解即可&#xff09; 1、基本概述 从Java5开始&#xff0c;在JDK中自带的Java监控和管理控制台用于对JVM中内…...

3211064 - 错误消息 AA634 出现在 T-cd AW01N 或 T-cd AFAR 中

症状 通过 T-cd AW01N 打开资产或在 T-cd AFAR 中重新计算资产值时&#xff0c;出现以下错误消息&#xff1a; AA634 在范围 01 中普通折旧的更正大于累计折旧 环境 SAP R/3SAP R/3 EnterpriseSAP ERP SAP ERP 中心组件SAP ERP 的 SAP 增强包SAP ERP&#xff08;SAP HANA 版…...

k3s or RKE2 helm安装报错dial tcp 127.0.0.1:8080: connect: connection refused

1.报错&#xff1a; Error: INSTALLATION FAILED: Kubernetes cluster unreachable: Get "http://127.0.0.1:8080/version": dial tcp 127.0.0.1:8080: connect: connection refused 2.问题原因&#xff1a; 1.因为helm默认使用k8s的配置文件&#xff0c;默…...

网络安全应急响应预案演练

制定好的应急响应预案&#xff0c;只做培训还不够&#xff0c;还需要通过实战演 练来提高应对网络突发事件的行动力&#xff0c;针对网络突发事件的假想情 景&#xff0c;按照应急响应预案中规定的职责和程序来执行应急响应任务。 根据出现的新的网络攻击手段或其他特殊情况…...

Redis 的混合持久化

RDB 相比于 AOF&#xff0c;数据恢复的速度更快&#xff0c;因为是二进制数据&#xff0c;直接加载进内存即可&#xff0c;但是 RDB 的频率不好把握。 如果频率太低&#xff0c;在两次快照期间服务器发生宕机&#xff0c;可能会丢失较多的数据如果频率太高&#xff0c;频繁写入…...

ElasticSearch总结

ES是什么 ES是一个天生支持分布式的搜索、聚合分析的存储引擎 基于Java开发 基于Lucene的开源分布式搜索引擎 ELK &#xff1a; elasticSearch Logstah Kibana 加入 Beats 后 ELK 改为 &#xff1a;Elastic stack ES解决了什么问题 ES解决的核心问题 &#xff1a; 1.海量数…...

手写数字识别之损失函数

目录 交叉熵 手写数字识别之损失函数 分类任务的损失函数 Softmax函数 交叉熵的简单理解&#xff1a;真实分布与非真实分布的交叉&#xff0c;完全对应&#xff0c;熵为0 交叉熵的代码实现 交叉熵 给定一个策略, 交叉熵就是在该策略下猜中颜色所需要的问题的期望值。更普…...

sleep () 和 wait () 有什么区别?

在Java中&#xff0c;sleep() 和 wait() 是两个用于处理多线程的方法&#xff0c;它们具有不同的作用和用途。 sleep()&#xff1a; sleep() 是 Thread 类的一个静态方法&#xff0c;用于暂停当前线程的执行一段指定的时间。它会阻塞当前线程&#xff0c;不会让其他线程获得执…...

第一百二十七回 空安全

文章目录 概念介绍使用方法示例代码 我们在上一章回中介绍了级联操作符相关的内容&#xff0c;本章回中将介绍 空安全.闲话休提&#xff0c;让我们一起Talk Flutter吧。 概念介绍 在编译语言中都有空指针或者空对象(null)&#xff0c;它们会引起程序的异常。在移动开发中如果…...

js判断类型:typeof Object.prototype.toString instanceof constructor有什么区别?一文讲清楚

相信很多小伙伴在使用js的过程中&#xff0c;经常会需要对js的数据类型进行判断&#xff0c;而js中可以对数据类型进行判断的方法有很多种&#xff0c;最常见的有typeof、Object.prototype.toString、instanceof、constructor这四种&#xff0c;那么他们有什么区别呢&#xff1…...

uview ui 1.x ActonSheet项太多,设置滚动

问题&#xff1a;ActionSheet滚动不了。 使用uview ui &#xff1a;u-action-sheet, 但是item太多&#xff0c;超出屏幕了&#xff0c; 查了一下文档&#xff0c;并没有设置滚动的地方。 官方文档&#xff1a;ActionSheet 操作菜单 | uView - 多平台快速开发的UI框架 - uni-a…...

深入浅出:JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

uniapp 字符包含的相关方法

在uniapp中&#xff0c;如果你想检查一个字符串是否包含另一个子字符串&#xff0c;你可以使用JavaScript中的includes()方法或者indexOf()方法。这两种方法都可以达到目的&#xff0c;但它们在处理方式和返回值上有所不同。 使用includes()方法 includes()方法用于判断一个字…...

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...