CesiumJS 案例 P23:计算距离(Cartesian3 方式、EllipsoidGeodesic 方式)

news2024/11/5 14:36:54

CesiumJS

  • CesiumJS 是一个开源的 JavaScript 库,它用于在网页中创建和控制 3D 地球仪(地图)
  1. CesiumJS 官网:https://www.cesium.com/

  2. CesiumJS 下载地址:https://www.cesium.com/platform/cesiumjs/

  3. CesiumJS API 文档:https://cesium.com/learn/cesiumjs/ref-doc/index.html


一、计算距离(Cartesian3)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>距离 - 计算距离(Cartesian3)</title>
        <link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            html,
            body {
                width: 100%;
                height: 100%;
            }

            .container {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
    </body>

    <script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
    <script>
        const viewer = new Cesium.Viewer("container");

        const point1 = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883);
        const point2 = Cesium.Cartesian3.fromDegrees(-76.59777, 41.03883);

        const distance = Cesium.Cartesian3.distance(point1, point2);

        console.log("距离为(米):", distance);
    </script>
</html>

二、计算距离(EllipsoidGeodesic)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>距离 - 计算距离(EllipsoidGeodesic)</title>
        <link rel="stylesheet" href="../js/Cesium-1.112/Build/Cesium/Widgets/widgets.css" />
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            html,
            body {
                width: 100%;
                height: 100%;
            }

            .container {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="container"></div>
    </body>

    <script src="../js/Cesium-1.112/Build/Cesium/Cesium.js"></script>
    <script>
        const viewer = new Cesium.Viewer("container");

        const calculateDistance = (start, end) => {
            const geodesic = new Cesium.EllipsoidGeodesic();
            geodesic.setEndPoints(start, end);
            return geodesic.surfaceDistance;
        };

        const point1 = Cesium.Cartographic.fromDegrees(-75.59777, 40.03883);
        const point2 = Cesium.Cartographic.fromDegrees(-76.59777, 41.03883);

        const distance = calculateDistance(point1, point2);

        console.log("距离为(米):", distance);
    </script>
</html>

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

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

相关文章

Java I/O流详解

文章目录 I/O流概念I/O流的分类字节流&#xff08;Byte Streams&#xff09;字节字节流概述方法主要类和继承关系示例代码字节流读取文件 字符流字符流概述子类Reader1.FileReader&#xff1a;2.CharArrayReader&#xff1a;3.StringReader&#xff1a;4.InputStreamReader&…

基于Multisim数字频率计频率范围0-9999HZ电路(含仿真和报告)

【全套资料.zip】数字频率计仿真电路设计Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.采用纯数字电路&#xff0c;非单片机。 2.频率计测量的频率范围0-9999HZ。 3.使用数码管进行频…

Python画笔案例-095 绘制鼠标画笔

1、绘制 鼠标画笔 通过 python 的turtle 库绘制 鼠标画笔,如下图: 2、实现代码 绘制 鼠标画笔,以下为实现代码: """鼠标画笔.py本程序可以用鼠标指针在屏幕上画画儿。 """ import turtlescreen = turtle.getscreen() screen.setup(

【温酒笔记】SPI

1. SPI基础 物理层 片选线 &#xff1a;选中拉低SCK: 时钟线MOSI:主出从入MISO:主入从出 协议层 CPOL:时钟极性&#xff1a;空闲电平高低 CPHA:时钟相位&#xff1a;第一个还是第二个边沿采样 2. 示例SPI-W25Q16 (见模组分类下文章)

mac电脑设置crontab定时任务,以及遇到的问题解决办法

crontab常用命令 crontab -u user&#xff1a;用来设定某个用户的crontab服务&#xff1b; crontab file&#xff1a;file是命令文件的名字,表示将file做为crontab的任务列表文件并载入crontab。如果在命令行中没有指定这个文件&#xff0c;crontab命令将接受标准输入&#xf…

MySQL中,如何定位慢查询?定位到的慢SQL如何分析?

目录 1. 慢查询发生的场景&#xff1f; 2. MySQL中&#xff0c;如何定位慢查询&#xff1f; 2.1 详细解释 3. 定位到的慢SQL如何分析&#xff1f; 3.1 详细说明 1. 慢查询发生的场景&#xff1f; 2. MySQL中&#xff0c;如何定位慢查询&#xff1f; 介绍一下当时产生问题…

大数据新视界 -- 大数据大厂之提升 Impala 查询效率:索引优化的秘籍大揭秘(上)(3/30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

Nico,从零开始干掉Appium,移动端自动化测试框架实现

开头先让我碎碎念一波~去年差不多时间发布了一篇《 UiAutomator Nico&#xff0c;一个基于纯 adb 命令实现的安卓自动化测试框》&#xff08;https://testerhome.com/topics/37042&#xff09;&#xff0c; 由于种种原因 (详见此篇帖子) 当时选择了用纯 adb 命令来实现安卓自动…

小样本语义分割(HDMNet网络)

小样本语义分割&#xff08;HDMNet网络&#xff09; 摘要HDMNet 解决的问题本文贡献HDMNet 模型1. 特征提取2. 解耦下采样和匹配模块&#xff08;分层匹配结构&#xff09;2.1. 粗粒度到细粒度解码器2.2 . 自注意力模块2.3. 相关性模块 3. 损失函数 总结 摘要 小样本语义分割&…

layui 自定义验证单选框必填

对于输入框类型必填验证&#xff0c;只需要在 input 输入框加入 lay-verify "required" 即可。但对于单选按钮这种特殊的该怎么办呢&#xff1f;layui 为我们提供了自定义验证。 1. 在单选按钮上添加自定义验证的名称 2. 验证规则如下 // 单选框自定义验证form.ve…

植物神经紊乱别担心,这些运动让你重拾健康与平衡✨

在这个快节奏、高压力的时代&#xff0c;植物神经紊乱似乎已经成为现代人的“隐形杀手”。焦虑、失眠、心跳过速、呼吸不规律……这些症状不仅影响了我们的日常生活&#xff0c;更在无声中侵蚀着我们的身心健康。但别担心&#xff0c;通过科学合理的运动&#xff0c;我们可以有…

第1篇 引言

一、AIGC概念 1、AIGC定义 AIGC&#xff0c;即生成式人工智能&#xff08;Artificial Intelligence Generated Content&#xff09;&#xff0c;是指利用人工智能技术自动生成或辅助创作内容的过程和结果。 简单来说&#xff1a;过去&#xff0c;写文章、画张图、唱首歌、弄个…

2. 从服务器的主接口入手

Webserver 的主函数 main.cpp&#xff0c;完成了哪些功能&#xff1f; #include "config.h"int main(int argc, char *argv[]) {string user "";string passwd "";string databasename "";Config config;config.parse_arg(argc, a…

向量数据库 PieCloudVector 进阶系列丨打造音乐推荐系统

在上一篇内容中&#xff0c;我们介绍了 PieCloudVector 如何助力构建基于图片数据的商品推荐系统&#xff0c;详细描述从数据集的准备到数据向量化处理&#xff0c;再到向量数据的存储和相似性搜索的完整流程。本文将进一步探讨如何将 PieCloudVector 应用于音频数据&#xff0…

python之数据结构与算法(数据结构篇)-- 栈

一、栈的概念 这里我们不去了解教科书上面的“教条概念”&#xff0c;其实“栈”的概念和古代的时候的“客栈”是有异曲同工之妙的。 在这里我们把客栈看成“栈”&#xff0c;旅客看作“栈元素” 1.当旅客进来住店时&#xff0c;叫做“入栈”&#xff1b; 2.当旅客退房时&#…

Java调用chatgpt

目前openai的chatgpt在国内使用有一定难度&#xff0c;不过国内的大模型在大部分情况下已经不弱于chatgpt&#xff0c;而且还更便宜&#xff0c;又能解决国内最敏感的内容安全问题。本文后续以spring ai调用国内chatgpt厂商实现为例&#xff0c;讲解怎么构建一个java调用chatgp…

web前端多媒体标签设置(图片,视频,音频)以及图片热区(usemap)的设置

多媒体标签运用 在HTML中有以下常见多媒体标签&#xff1a; <img> &#xff08;图像标签&#xff09; - 作用&#xff1a;用于在网页中嵌入图像。 - 示例&#xff1a; <img src"image.jpg" alt"这是一张图片"> 。其中 src 属性指定图像的…

安卓开发之数据库的创建与删除

目录 前言&#xff1a;基础夯实&#xff1a;数据库的创建数据库的删除注意事项 效果展示&#xff1a;遇到问题&#xff1a;如何在虚拟机里面找到这个文件首先&#xff0c;找到虚拟机文件的位置其次&#xff0c;找到数据库文件的位置 核心代码&#xff1a; 前言&#xff1a; 安…

基于SSM+微信小程序的订餐管理系统(点餐2)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM微信小程序的订餐管理系统实现了管理员和用户。管理端实现了 首页、个人中心、用户管理、菜品分类管理、菜品信息管理、订单信息管理、配送信息管理、菜品评价管理、订单投诉管理、…

《AI在企业战略中的关键地位:以微软和阿里为例》

内容概要 在当今商业环境中&#xff0c;人工智能&#xff08;AI&#xff09;的影响力如滔滔洪水&#xff0c;愈演愈烈。文章将揭示AI在企业战略中的崛起&#xff0c;尤其以微软和阿里巴巴为代表的企业&#xff0c;这两家科技巨头通过不同方式&#xff0c;将智能技术融入其核心…