Cesium 空间量算——生成点位坐标

文章目录

    • 需求
    • 分析
      • 1. 点击坐标点实现
      • 2. 输入坐标实现

需求

用 Cesium 生成点位坐标,并明显标识

分析

以下是我的两种实现方式
第一种是坐标点击实现
第二种是输入坐标实现

1. 点击坐标点实现

在这里插入图片描述

//点位坐标getLocation() {this.hoverIndex = 0;let that = this;this.viewer.screenSpaceEventHandler.setInputAction(function(movement) {var position = viewer.scene.pickPosition(movement.position);var cartographicPos = Cesium.Cartographic.fromCartesian(position);var lonDegree = Cesium.Math.toDegrees(cartographicPos.longitude);var latDegree = Cesium.Math.toDegrees(cartographicPos.latitude);var text = "经度:" + lonDegree.toFixed(6);text += "\n纬度:";text += latDegree.toFixed(6);text += "\n高度:";text += cartographicPos.height.toFixed(2);text += "米";var labelEntity = viewer.entities.add({position: Cesium.Cartesian3.clone(position),billboard: {position: Cesium.Cartesian3.clone(position),verticalOrigin: Cesium.VerticalOrigin.BOTTOM,image: "/static/images/spaceComputed/menu_icon_lv1_1_trenddraw.png",},label: {text: text,font: "18px sans-serif",horizontalOrigin: Cesium.HorizontalOrigin.LEFT,verticalOrigin: Cesium.VerticalOrigin.BASELINE,style: Cesium.LabelStyle.FILL_AND_OUTLINE,fillColor: Cesium.Color.WHITE,outlineColor: Cesium.Color.RED,outlineWidth: 1.0,heightReference: Cesium.HeightReference.NONE,pixelOffset: new Cesium.Cartesian2(18.0, -18)},});that.pointLocationLabels.push(labelEntity);}, Cesium.ScreenSpaceEventType.LEFT_CLICK);},

2. 输入坐标实现

以下是一个简单的 Cesium 输入生成点位坐标的demo,包含了一个用于输入经纬度和高度的表单和一个用于显示地图的div容器:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Cesium Demo</title><script src="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>#cesiumContainer {width: 800px;height: 500px;margin: 10px auto;}form {width: 800px;margin: 10px auto;text-align: center;}input[type="text"], input[type="number"] {width: 100px;margin-right: 10px;}input[type="submit"] {padding: 5px 10px;background-color: #4CAF50;color: #fff;border: none;cursor: pointer;}</style>
</head>
<body><div id="cesiumContainer"></div><form method="post">经度:<input type="text" name="lon" id="lon">纬度:<input type="text" name="lat" id="lat">高度:<input type="number" name="height" id="height"><input type="submit" value="生成点位"></form><script>var viewer = new Cesium.Viewer('cesiumContainer');var entity;function addPoint(lon, lat, height) {if (entity) {viewer.entities.remove(entity);}entity = viewer.entities.add({name: 'Point',position: Cesium.Cartesian3.fromDegrees(lon, lat, height),point: {pixelSize: 10,color: Cesium.Color.YELLOW}});viewer.zoomTo(entity);}document.querySelector('form').addEventListener('submit', function (event) {event.preventDefault();var lon = parseFloat(document.querySelector('#lon').value);var lat = parseFloat(document.querySelector('#lat').value);var height = parseFloat(document.querySelector('#height').value) || 0;addPoint(lon, lat, height);});</script>
</body>
</html>

在上述代码中,我们创建了一个用于输入经纬度和高度的表单和一个用于显示地图的div容器,通过Cesium.Viewer对象实现了创建地图的功能。当用户填写表单并提交时,我们调用addPoint函数生成点位坐标,并将地图缩放到包含点位的视野范围内。

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

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

相关文章

板子接线图

1.ST-LINK V2接线 2.对抗板子刷蓝牙固件 接USB转TTL&#xff0c;用镊子短接两个孔 2.对抗板子用串口测试蓝牙AT命令 短接白色箭头&#xff0c;接TX&#xff0c;RX&#xff0c;电源

brpc 学习(一)M1 MacOS构建方法

tags: brpc categories: brpc 写在前面 实习阶段初次接触到 RPC 这样一种协议, 以及 brpc 这样一个很棒的框架, 但是当时没时间认真深入学习, 就是围绕使用 demo 开发, 还是有点不知其所以然的, 最近抽空来学习一下 brpc, 首要的一点就是在开发机上构建项目, 并且能够跑起来,…

Debezium系列之:Debezium采集Mysql数据库,数据库时间字段值的变化

Debezium系列之:Debezium采集Mysql数据库,数据库时间字段值的变化 一、背景二、创建时间字段表三、设置数据库时区四、UTC时区时间字段值变化五、北京时区时间字段值变化一、背景 Debezium使用UTC时区来发出时间列,可以通过使用 CustomConverter来使用任意时区发出时间列。使…

MongoDB【部署 04】Windows系统实现MongoDB多磁盘存储

Windows系统实现多磁盘存储 1.为什么2.多磁盘存储2.1 数据库配置2.2 文件夹磁盘映射2.3 创建新的数据集 3.总结 1.为什么 这里仅针对只有一台Windows系统服务器的情景&#xff1a; 当服务器存储不足时&#xff0c;或者要接入更多的数据&#xff0c;就会挂载新磁盘&#xff0c…

边缘计算AI智能安防监控视频平台车辆违停算法详解与应用

随着城市车辆保有量呈现高速增长趋势&#xff0c;交通拥堵、违章行为也日益泛滥。因为车辆未停放在指定区域导致的车位浪费、占用/堵塞交通要道、车辆剐蹭等问题层出不穷。通过人工进行违法停车的监控&#xff0c;不仅让监控人员工作负荷越来越大&#xff0c;而且存在发现不及时…

信息化发展51

部署交付 1 、软件开发完成后&#xff0c; 必须部署在最终用户的正式运行环境&#xff0c; 交付给最终用户使用&#xff0c; 才能为用户创造价值。 2 、软件部署是一个复杂过程&#xff0c; 包括从开发商发放产品&#xff0c; 到应用者在他们的计算机上实际安装并维护应用的所…

Lua学习笔记:词法分析

前言 本篇在讲什么 Lua的词法分析 本篇需要什么 对Lua语法有简单认知 对C语法有简单认知 依赖Visual Studio工具 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码内容 ★提高阅读体验★ &#x1f449; ♠ 一级标题…

SpringAOP补充-通知获取类型

JoinPoint 是 ProceedingJoinPoint 的父类。 getArgs()是JoinPoint获取原方法返回值的函数。 preceed()是ProceedingJoinPoint获取原方法返回值的函数。

【Java】Servlet API

Servlet API HttpServlet核心方法Servlet生命周期 HttpServletRequest核心方法 HttpServletResponse核心方法 HttpServlet 我们写 Servlet 代码的时候, 首先第一步就是先创建类, 继承自 HttpServlet, 并重写其中的某些方法. 核心方法 方法名称调用时机init在 HttpServlet 实…

近三年各领域数字孪生相关政策汇编(可下载)

自2021年国家“十四五”规划纲要提出“探索建设数字孪生城市”以来&#xff0c;国家发展和改革委员会、工业和信息化部、住房和城乡建设部、水利部、农业农村部等部门纷纷出台政策&#xff0c;大力推动数字孪生在千行百业的落地发展。这些政策不仅为数字孪生的应用提供了广阔的…

计算机网络高频面试题集锦

问题1&#xff1a;谈一谈对OSI七层模型和TCP/IP四层模型的理解&#xff1f; 回答点&#xff1a;七层模型每层对应的作用及相关协议、为什么分层、为什么有TCP/IP四层模型 参考&#xff1a; 1、OSI七层参考模型是一个ISO组织所提出的一个标准参考分层模型&#xff0c;它按照数…

Python自动化小技巧23——PDF文件拆分为单独页面(PyMuPDF)

其实编辑PDF用Adobe就行&#xff0c;它功能超级齐全&#xff0c;可是这玩意要收费...去弄免费破解版&#xff0c;找资源又得半天&#xff0c;所以用python来拆分PDF文件吧&#xff0c;可以批量化处理。 至于为什么不用WPS.....别问&#xff0c;问就是不想开会员。 脚本代码 先…

39 | selenium基础架构,UI测试架构

什么是测试基础架构&#xff1f; 测试基础架构指的是&#xff0c;执行测试的过程中用到的所有基础硬件设施以及相关的软件设施。因此&#xff0c;我们也把测试基础架构称之为广义的测试执行环境。通常来讲&#xff0c;测试基础架构主要包括以下内容&#xff1a; 执行测试的机器…

机器学习第十一课--K-Means聚类

一.聚类的概念 K-Means算法是最经典的聚类算法&#xff0c;几乎所有的聚类分析场景&#xff0c;你都可以使用K-Means&#xff0c;而且在营销场景上&#xff0c;它就是"King"&#xff0c;所以不管从事数据分析师甚至是AI工程师&#xff0c;不知道K-Means是”不可原谅…

MATLAB | R2023b更新了哪些好玩的东西?

R2023b来啦&#xff01;&#xff01;废话不多说看看新版本有啥有趣的玩意和好玩的特性叭&#xff01;&#xff01;依旧把绘图放最前面叭&#xff0c;有图的内容看的人多。。 1 调色板 MATLAB终于不只有一套配色了&#xff0c;诸君且看&#xff1a; y [3 5 7 9 11; 2 5 6 8 1…

uniapp确认提示框;uniapp判断输入框值是否符合正常手机号,身份证号

确认提示框 UniApp 中&#xff0c;你可以使用 uni.showModal 方法来创建确认提示框。以下是一个示例&#xff1a; <template><view class"container"><button click"showAuthModal">显示确认提示框</button></view> </…

【问题记录】解决“命令行终端”和“Git Bash”操作本地Git仓库时出现 中文乱码 的问题!

环境 Windows 11 家庭中文版git version 2.41.0.windows.1 问题情况 在使用 “命令行终端” 和 “Git Bash” 在本地Git仓库敲击命令时&#xff0c;对中文名称文件显示一连串的数字&#xff0c;如下所示&#xff1a;这种情况通常是由于字符编码设置不正确所引起的 解决办法 设置…

什么是分布式锁?他解决了什么样的问题?

相信对于朋友们来说&#xff0c;锁这个东西已经非常熟悉了&#xff0c;在说分布式锁之前&#xff0c;我们来聊聊单体应用时候的本地锁&#xff0c;这个锁很多小伙伴都会用 ✔本地锁 我们在开发单体应用的时候&#xff0c;为了保证多个线程并发访问公共资源的时候&#xff0c;…

网络编程day05(IO多路复用)

今日任务&#xff1a; TCP多路复用的客户端、服务端&#xff1a; 服务端代码&#xff1a; #include <stdio.h> #include <sys/types.h> #include <sys/socket.h> #include <arpa/inet.h> #include <netinet/in.h> #include <unistd.h> …

uniapp 内容展开组件

uni-collapse折叠面板并不符合需求&#xff0c;需要自己写一个。 效果展示&#xff1a; 代码&#xff1a; &#xff08;vue3版本&#xff09; <template><view class"collapse-view"><view class"collapse-content"><swiper:autopl…