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

Cesium实现鹰眼图和主地图联动

news 来源：原创 2025/9/13 12:21:36

本文是vue+ts实现的，想要转为react,只需要修改以下几部分内容

1. 将 reactive 定义的数据直接改写为 let定义

2. 将 watch 监听的内容改成对应的监听写法

3. 将 ref 定义的字段改写为对应的写法

该模块实现的功能：

通过点击鹰眼图的某一位置，对应主地图切换到对应的经纬度位置

在主地图中拖拽，鹰眼图中的点也跟着变化

实现鹰眼图的原理

1. 要获取左上角和右下角的经纬度，用来确定当前区域的一个范围。

2. 要通过点击鹰眼图，将坐标转换为主地图中的经纬度。通过公式计算

3. 在主地图中拖拽，将经纬度转换为鹰眼图中的坐标，来实现点的对应

1.获取主地图区域的左上角，右下角的经纬度

经纬度是WGS84格式


const coord1 = reactive({latitude: 29.67098,longitude: 106.48518,
});
const coord2 = reactive({latitude: 29.66891,longitude: 106.48912,
});

2.计算经纬度的差值，算一下差值是几比几，决定鹰眼图的大小

// 差值
const difference = reactive({longitude: Math.abs(coord1.longitude - coord2.longitude),latitude: Math.abs(coord1.latitude - coord2.latitude),
});

3. 创建鹰眼图,鹰眼图的宽高要根据经纬度的宽高比来决定

<div id="eye"><div class="dot" id="move-dot"></div>
</div>

4. 坐标转经纬度，经纬度转坐标有一个公式

公式解释：

我们用的经纬度是左上角的经纬度，因为eye的div左上角对应的是坐标系的（0，0）

求的主地图的经度 = eye点击的x坐标 * (经度的差值 / eye的高度) + 左上角的经度

5. 监听eye的点击函数

onMounted(() => {// createMainCesium(); // 1.创建主地图，省略handlerMoveDot(); // 2.定义鼠标移动事件
});// 创建点击函数
function handlerMoveDot() {const eyeBox = document.getElementById("eye");const dot = document.getElementById("move-dot");if (eyeBox && dot) {eyeBox.addEventListener("click", (e) => {moveX.value = e.offsetX;moveY.value = e.offsetY;dot.style.left = moveX.value + "px";dot.style.top = moveY.value + "px";});}
}// dot的变化更新主地图的经纬度
watch([moveX, moveY], () => {const longitude =moveX.value * (difference.longitude / 164) + coord1.longitude;const latitude = coord1.latitude - moveY.value * (difference.latitude / 173);const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, 500);viewerRef.value.camera.flyTo({destination: position,duration: 2.0,// 相机的角度，自行调整，不需要先注释orientation: {heading: 2 * Math.PI,pitch: -1 * (Math.PI / 6),roll: 2 * Math.PI,},});
});

截至目前为止，实现了坐标转经纬度

接下来，实现经纬度转坐标

1. 页面一进来，计算主地图左上角、右下角的经纬度中心，来显示在鹰眼图对应的位置

这段代码放到渲染完viewer之后

 const cartographic = getCartographicCenter();dotInitPosition(cartographic);

// 初始化页面是找经纬度的中心
function getCartographicCenter() {const centerLongitude = (coord1.longitude + coord2.longitude) / 2;const centerLatitude = (coord1.latitude + coord2.latitude) / 2;return {longitude: centerLongitude,latitude: centerLatitude,};
}// 笛卡尔坐标转换屏幕坐标,用作dot的初始位置
function dotInitPosition(cartesian: ScreenPosition) {let x, y;x = (cartesian.longitude - coord1.longitude) * (164 / difference.longitude);y = (coord1.latitude - cartesian.latitude) * (173 / difference.latitude);const dot = document.getElementById("move-dot");if (dot) {dot.style.left = x + "px";dot.style.top = y + "px";}
}

2. 监听在主地图上移动的函数

onMounted(() => {handlerMoveView(); // 3.定义地图的鼠标移动事件
});// 监听地图的移动事件
function handlerMoveView() {const viewer = viewerRef.value;const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction((e) => {// 这里如果获取不到值，百度一下，换其他方式拿经纬度 const ray = viewer.camera.getPickRay(e.position);if (ray?.origin) {const cartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(ray?.origin,);const longitude = Cesium.Math.toDegrees(cartographic.longitude);const latitude = Cesium.Math.toDegrees(cartographic.latitude);// 计算公式还用初始化的那个就行dotInitPosition({ longitude, latitude });}}, Cesium.ScreenSpaceEventType.LEFT_UP);
}

Cesium实现鹰眼图和主地图联动

本文是vuets实现的，想要转为react,只需要修改以下几部分内容 1. 将 reactive 定义的数据直接改写为 let定义 2. 将 watch 监听的内容改成对应的监听写法 3. 将 ref 定义的字段改写为对应的写法该模块实现的功能： 通过点击鹰眼图的某一位置&#xf…...

编程日记 2025/9/13 12:21:36

文件IO6（开机动画的显示原理/触摸屏的原理与应用）

开机动画的显示原理 ⦁ 基本原理一般电子产品在开机之后都会加深用户印象，一般开机之后都会播放一段开机动画（视频、GIF…），不管哪种采用形式，内部原理都是相同，都是利用人类的眼睛的视觉暂留效应实现的…...

编程日记 2025/9/10 0:30:54

Linux内核分页——线性地址结构

每个进程通过一个指针（即进程的mm_struct→pgd）指向其专属的页全局目录（PGD），该目录本身存储在一个物理页框中。这个页框包含一个类型为pgd_t的数组，该类型是与架构相关的数据结构，定义在<as…...

编程日记 2025/9/7 14:40:50

每日算法-250411

这是我今天的 LeetCode 刷题记录和心得，主要涉及了二分查找的应用。 3143. 正方形中的最多点数题目简述: 思路本题的核心思路是二分查找。解题过程为什么可以二分？ 我们可以对正方形的半边长 len 进行二分。当正方形的半边长 len 越大时&…...

编程日记 2025/9/11 17:55:07

虚幻基础：碰撞帧运算

能帮到你的话，就给个赞吧 😘 文章目录碰撞碰撞盒线段检测帧运算：每个程序流就是一帧的计算结果速度过快时(10000)，导致每帧移动过大(83)，从而导致碰撞盒错过而没有碰撞速度快的碰撞要用线段检测碰撞碰撞盒线段检…...

编程日记 2025/9/13 12:17:55

AI反检测如何在TikTok养号中发挥关键作用？

在 TikTok 这个全球性的短视频平台上，账号的养成和管理成为了创作者和品牌不可忽视的一环。随着平台对内容和账号行为的监管越来越严格，传统的养号方法已经难以适应新的挑战。在这一背景下，AI 反检测技术应运而生，它通过模拟人类行…...

编程日记 2025/9/13 12:19:08

鸿蒙案例---生肖抽卡

案例源码： Zodiac_cards: 鸿蒙生肖抽奖卡片效果演示初始布局 1. Badge 角标组件此处为语雀内容卡片，点击链接查看：https://www.yuque.com/kevin-nzthp/lvl039/rccg0o4pkp3v6nua 2. Grid 布局 // 定义接口 interface ImageCount {url:…...

编程日记 2025/9/10 19:27:21

【AI编程技术爆发：从辅助工具到生产力革命】

目录前言：技术背景与价值当前技术痛点解决方案概述目标读者说明一、技术原理剖析核心概念图解关键技术模块技术选型对比二、实战演示环境配置要求核心代码实现运行结果验证三、性能对比测试方法论量化数据对比（2023年数据）结果分析四、最…...

编程日记 2025/9/10 17:15:13

【前后端】npm包mysql2的使用__nodejs mysql包升级版

不定期更新，建议关注收藏点赞。目录简介使用说明还在用mysql包吗？已经过时啦！ 简介 mysql2 是一个用于 Node.js 的 MySQL 数据库驱动，它是 mysql 包的升级版，性能更好，支持 Promise 和 async/await&…...

编程日记 2025/9/9 20:28:53

基于LangChain的Native RAG简单样例

本文代码: Github 文章目录 1. 概述2. Native RAG 概述3. 实战：基于LangChain实现简单的Native RAG概述环境配置文档分割定义Embedding模型构建向量数据库与LLM交互参考文献 1. 概述众所周知， 大模型可以回答它知道的内容。但如果用户问的是它不知道…...

编程日记 2025/9/13 1:24:10

数据结构基础（2）

1.什么是算法？ 算法：算法是解决特定问题求解步骤的描述，在计算机中表现为指令的有限序列，并且每条指令表示一个或多个操作。算法定义中，提到了指令，指令能被人或机器等计算装置执行。它可以是计算机指令&a…...

编程日记 2025/9/9 5:01:40

慢查询解决思路

1. 复现问题慢查询的出现是常态还是偶尔？是否在业务允许范围内？ "不要过早优化，先 Make it work / right，再 Make it fast。" 建议先将查询语句及其触发条件记录下来，便于后续测试、分析和对比。 2. 定位问题 2.1 单机数据库: explain查询执行计划数据库默…...

编程日记 2025/9/10 6:19:01

前端下载文件时浏览器右上角没有保存弹窗及显示进度，下载完之后才会显示保存弹窗的问题定位及解决方案

需求背景在开发过程中会发现，有的时候下载后端返回的文件，浏览器右上角不会进行保存弹窗的弹出及下载进度，而是接口响应后文件下载完才会弹出保存并且没有进度条效果，这就导致在点击下载后用户是不知道文件下载到什么进度了&…...

编程日记 2025/9/4 4:25:44

Streamlit在测试领域中的应用：构建自动化测试报告生成器

引言 Streamlit 在开发大模型AI测试工具方面具有显著的重要性，尤其是在简化开发流程、增强交互性以及促进快速迭代等方面。以下是几个关键点，说明了 Streamlit 对于构建大模型AI测试工具的重要性： 1. 快速原型设计和迭代对于大模型AI测试…...

编程日记 2025/9/10 1:26:43

IP组播技术与internet

1.MAC地址分为三类：广播地址；组播地址；单播地址 2.由一个源向一组主机发送信息的传输方式称为组播。 3.组播MAC地址，第一个字节的最后一位为1； 单播MAC地址，第一个字节的最后一位为0； 4.不能…...

编程日记 2025/9/3 17:15:50

[Java基础]StringBuilder解析

StringBuilder简单总结与源码预览。之前写StringBuilder对象默认简写为sb，被说是骂人不让用了，现在写成strBuilder了。大家一般写什么呢 StringBuilder预留空间设计已知Redis的String结构是通过预留空间的形式来避免频繁地分配空间。那么Java中有没有…...

编程日记 2025/9/3 22:43:08

国内智能外呼系统市场概况及技术发展趋势

根据最新行业报告和用户评价，国内智能外呼系统市场呈现快速增长态势，预计2025年市场规模将达到180亿元人民币，年复合增长率约20%。主要驱动因素包括AI技术成熟、企业降本增效需求以及政策扶持（如工信部《智能语音产业发展行动计划…...

编程日记 2025/9/8 15:13:37

小推桌面-一款全新的第三方电视桌面-全网通桌面

你是否渴望更高效、便捷地使用机顶盒桌面？小推桌面、乐看家桌面是绝佳之选！它们的界面简洁，操作轻松上手，能快速找到所需应用，大大节省时间。小推桌面支持个性化定制，可按个人喜好调整布局、添加组件&…...

编程日记 2025/9/9 13:33:12

SQL实战篇，数据库在Kooboo中的实际应用（一）

本文将结合实际操作与代码示例，展示SQL 在 Kooboo 中的实际应用仅需两步：动态创建表基础查询，无需复杂配置，快速上手！ 一、动态创建表：插入数据 Kooboo 支持多种数据库，以 SQLite 为例&…...

编程日记 2025/9/10 16:50:11

Matlab 调制信号和fft变换

1、内容简介 Matlab 194-调制信号和fft变换可以交流、咨询、答疑 2、内容说明略 3、仿真分析略 4、参考论文略...

编程日记 2025/8/17 21:14:42

2025年的Android NDK 快速开发入门

十年前写过一篇介绍NDK开发的文章《Android实战技巧之二十三：Android Studio的NDK开发》，今天看来已经发生了很多变化，NDK开发变得更加容易了。下面就写一篇当下NDK开发快速入门。 **原生开发套件 (NDK) **是一套工具，使开发者能…...

编程日记 2025/9/12 0:38:18

opensuse Tumbleweed虚拟机上安装

值得一提的是cpu需要给多一点核，不然压力都集中在一个点上温度会比较高，然后就是可能无法正常运行这个安装界面。前面好像是半自动的，一直到这里选择桌面界面需要手动选择这边必然选大蜥蜴的kde，那个蜥蜴菜单还是很好看的。 …...

编程日记 2025/9/11 15:30:59

AI避坑：AI生成的文件格式不一定对

今天就碰到了原来正确的文件，AI生成后文件变味UTF-8 BOM文件导致MAUI解析出错An error occured while parsing Xaml: 根级别上的数据无效。第 1 行，位置 1 解决方案： 将文件用文本编辑器打开，另存为UTF-8格式文件...

编程日记 2025/9/11 11:41:53

蓝桥杯真题-危险系数DF

抗日战争时期，冀中平原的地道战曾发挥重要作用。地道的多个站点间有通道连接，形成了庞大的网络。但也有隐患，当敌人发现了某个站点后，其它站点间可能因此会失去联系。我们来定义一个危险系数DF(x,y)： 对于两个站点x和…...

编程日记 2025/9/7 3:39:53

四、TorchRec的推理优化

四、TorchRec的推理优化文章目录四、TorchRec的推理优化前言一、TorchRec 推理优化的两个主要区别是二、TorchRec 提供了以下内容，以将 TorchRec 模型转换为可用于推理的模型总结前言推理环境与训练环境不同，它们对性能和模型大小非常敏感。一、To…...

编程日记 2025/9/9 3:16:39

Linux 系统中从源码编译安装软件

以下是 Linux 系统中从源码编译安装软件的详细步骤和注意事项，帮助你掌握这一高级操作技能： 一、编译安装的核心流程 1. 下载源码包（通常为 .tar.gz/.tar.bz2/.tar.xz） 2. 解压源码包 3. 进入源码目录 4. 配置编译参数&#xf…...

编程日记 2025/9/9 19:51:36

【AI论文】OLMoTrace：将语言模型输出追溯到万亿个训练标记

摘要：我们提出了OLMoTrace，这是第一个将语言模型的输出实时追溯到其完整的、数万亿标记的训练数据的系统。 OLMoTrace在语言模型输出段和训练文本语料库中的文档之间找到并显示逐字匹配。我们的系统由扩展版本的infini-gram（Liu等人&#xf…...

编程日记 2025/9/11 12:15:29

BeautifulSoup 踩坑笔记：SVG 显示异常的真正原因

“这图是不是糊了？”以为是样式缺了？试试手动复制差异在哪？想用对比工具一探究竟……简单到不能再简单的代码，有问题吗？最后的真相：viewBox vs viewbox，preserveAspectRatio vs preserveaspectr…...

编程日记 2025/8/26 14:22:46

ai-warp 开源的Platformatic Stackable 与 AI 服务交互

一、软件介绍文末提供程序和源码下载学习 ai-warp 开源的Platformatic Stackable 与 AI 服务交互二、用法 npx create-platformaticlatestSelect Application, then platformatic/ai-warp 选择 Application（应用程序 ），然后选择 platfor…...

编程日记 2025/9/11 0:31:31

AI比人脑更强，因为被植入思维模型【53】反熵增思维模型

giszz的理解：熵用来形容系统的混乱程度。熵增就是从有序到无序，反熵增就是从无序到有序。其实阴阳二级，世界总是在变化之中。保持清醒的头脑，认识到当前是有序还是无序的，如何改变，让事物向着自己希望的方式…...

编程日记 2025/9/10 6:49:25

408 计算机网络知识点记忆（8）

前言本文基于王道考研课程与湖科大计算机网络课程教学内容，系统梳理核心知识记忆点和框架，既为个人复习沉淀思考，亦希望能与同行者互助共进。（PS：后续将持续迭代优化细节） 往期内容 408 计算机网络知识…...

编程日记 2025/9/9 1:31:08

DDR管脚违例

管脚验证，出现上述违例上述警告是IO电平配置存在冲突，主要原因是这里配置没有显示电平特性，那么vivado工具默认是生成IP的底层的代码中自带的XDC的电平，这个就冲突了。出现这个的主要原因还是vivado某个版本工具存在漏洞&#x…...

编程日记 2025/8/17 21:01:50

25年河南事业单位报名详细流程图解

1.报名时间为2025年4月11日9∶00至4月17日17∶00； 2.网上缴费：2025年4月12日9:00至4月18日17:00； 3.打印准考证：2025年5月12日9∶00至5月18日14∶30； 4.笔试时间：2025年5月18日； 5.报名方式…...

编程日记 2025/9/10 16:12:05

一维差分数组

2.一维差分 - 蓝桥云课问题描述给定一个长度为 n 的序列 a。再给定 m 组操作，每次操作给定 3 个正整数 l, r, d，表示对 a_{l} 到 a_{r} 中的所有数增加 d。最终输出操作结束后的序列 a。 Update: 由于评测机过快，n, m 于 20…...

编程日记 2025/9/8 7:50:27

Windows 录音格式为什么是 M4A？M4A 怎样转为 MP3 格式

M4A 格式凭借其高效的压缩技术和卓越的音质表现脱颖而出，成为了包括 Windows 在内的众多操作系统默认的录音格式选择。然而，尽管 M4A 格式拥有诸多优点，不同的应用场景有时需要将这些文件转换为其他格式以满足特定需求。本文将探讨 M4A 格式…...

编程日记 2025/9/9 0:46:11

【KWDB 创作者计划】第一卷：基础架构篇

以下是KWDB技术白皮书第一卷：基础架构篇的完整内容展示，包含要求的三个核心章节的深度解析。我们将以技术严谨性结合可读性的方式呈现，实际交付时会进一步扩展示意图和代码示例。目录 KWDB技术白皮书卷一：基础架构篇 1. 数…...

编程日记 2025/9/8 8:33:53

分享一些使用DeepSeek的实际案例

文章目录前言职场办公领域生活领域学习教育领域商业领域技术开发领域前言以下是一些使用 DeepSeek 的实际案例： DeepSeek使用手册资源链接：https://pan.quark.cn/s/fa502d9eaee1 职场办公领域行业竞品分析：刚入职的小李被领导要求一天内…...

编程日记 2025/9/8 22:31:59

华清远见成都中心嵌入式学习总结

一、Linux 基础入门课程首先介绍了 Linux 系统的六大特性，包括开源、免费、可裁剪等核心优势。重点讲解了文件系统结构，强调根目录（/）作为唯一入口的树状结构。通过实操学习了 pwd、ls、cd 等基础命令，掌握了绝对路径…...

编程日记 2025/9/9 6:06:52

【13】数据结构之树结构篇章

目录标题树Tree树的定义树的基本概念树的存储结构双亲表示法孩子表示法孩子兄弟表示法二叉树二叉树与度不超过２的普通树的不同之处二叉树的基本形态二叉树的分类二叉树的性质二叉树的顺序存储二叉树的链式存储二叉树的链式存储的结点结构树的遍历先序遍历中序遍历…...

编程日记 2025/9/9 9:13:28

SAP GUI 显示SAP UI5应用，并实现SSO统一登陆

想用SAP UI5 做一写界面，又不想给用户用标准的Fiori APP怎么办？我觉得可以用可配置物料标准功能的思路，在SAP GUI中显示UI5界面，而不是跳转到浏览器。代码实现后的效果如下： 1、调用UI5应用，适用于自开发…...

编程日记 2025/9/7 1:24:48

Linux环境变量详解

引言在Linux系统中，环境变量是一种非常重要的概念，它影响着系统的运行方式和应用程序的行为。无论你是Linux新手还是经验丰富的管理员，深入理解环境变量都能帮助你更高效地使用和管理Linux系统。本文将从基础概念到高级应用，全面…...

编程日记 2025/9/7 19:15:02

【antd + vue】Tree 树形控件：默认展开所有树节点、点击文字可以“选中/取消选中”节点

一、defaultExpandAll 默认展开所有树节点 1、需求：默认展开所有树节点 2、问题： v-if"data.length"判断的层级不够，只判断到了物理那一层，所以只展开到那一层。 3、原因分析： 默认展开所有树节点, 如果是…...

编程日记 2025/9/11 3:10:43

专题三——二分查找

目录一、二分查找 1、题目 2、解题思路 3、代码实现 4、时间复杂度 5、朴素二分法的模板总结二、在排序数组中查找元素的第一个和最后一个位置 1、题目 2、题目解析 3、代码实现 4、模板总结（重点） 三、x的算法平方根 1、题目 2、题目解…...

编程日记 2025/9/9 7:31:51

响应： 第一部分测试代码，读取请求 Makefile binhttpserver #生成的可执行程序 ccg #编译器名称 LD_FLAGS-stdc11 -lpthread #-DDEBUG1 #链接选项 srcmain.cc$(bin):$(src)$(cc) -o $ $^ $(LD_FLAGS).PHONY:clean clean:rm -f $(bin) 1111111 main.cc…...

编程日记 2025/9/11 12:25:30

智能检索知识库

一、智能检索知识库作用 1. 提升信息检索效率，降低人力成本快速获取精准答案：员工无需手动翻阅大量文档（如产品手册、合同、技术文档），直接通过自然语言提问获取答案。减少重复性工作：HR、客服、技…...

编程日记 2025/9/10 18:08:05

北斗导航 | 接收机自主完好性监测（RAIM）算法学习思路总结及其算法研究：理论、实现与验证

===================================================== github：https://github.com/MichaelBeechan CSDN：https://blog.csdn.net/u011344545 ===================================================== 接收机自主完好性监测学习思路壹、学习思路贰、理论、实现与验证1. 引…...

编程日记 2025/9/8 18:22:57

无法读取库伦值文件节点解决方案

读取库伦值的目的是为了换算成电流，量化场景功耗用途 1.报错日志 /power_log/debuglogger$ adb shell dmesg | grep -Ei "avc..system_server"[ 79.942272] logd.auditd: type1400 audit(1744279324.832:7149): avc: denied { read } for comm"…...

编程日记 2025/9/11 7:04:06

OCR API识别对比

OCR 识别DEMO OCR识别 demo 文档由来最开始想使用百度开源的 paddlepaddle大模型研究了几天，发现表格识别会跨行，手写识别的也不很准确。最终还是得使用现成提供的api。。文档说明三个体验下来腾讯的识别度比较高，不论是手写还是识别表…...

编程日记 2025/9/12 17:43:21

高速电路设计概述

1.1 低速设计和高速设计的例子本节通过一个简单的例子，探讨高速电路设计相对于低速电路设计需要考虑哪些不同的问题。希望读者通过本例，对高速电路设计建立一个表象的认识。至于高速电路设计中各方面的设计要点，将在后续章节展开详细的讨论…...

编程日记 2025/9/8 13:44:59

Keil C51中32位变量赋值异常问题分析与解决

Keil C51中32位变量赋值异常问题分析与解决问题描述在使用Keil5对51单片机进行编程时，遇到一个32位变量赋值不正确的问题。具体代码如下： typedef unsigned long uint32;g_Flow_Time (uint32)Storage[2] << 24 | Storage[3] << 16 | S…...

编程日记 2025/9/13 4:07:40