实现地图上展示坐标时,不要全部展示、只展示几个距离相对较大marker点位,随着地图放大再全部展示出来。

比例尺级别地面分辨率 (米/像素)比例尺
0156543.031:591658700.82
178271.5151:295829350.4
239135.75751:147914675.2
319567.878751:73957337.6
49783.9393751:36978668.8
54891.9696881:18489334.4
62445.9848441:9244667.2
71222.9924221:4622333.6
8611.49621091:2311166.8
9305.74810551:1155583.4
10152.87405271:577791.7
1176.437026371:288895.85
1238.218513181:144447.925
1319.109256591:72223.9625
149.5546282961:36111.98125
154.7773141481:18055.99063
162.3886570740.105185127
171.1943285370.052939792
180.5971642680.026817118
190.2985821340.013755775
200.1492910670.007225116

 根据比例尺级别和地面分辨率 (米/像素)之间的关系:

当地图缩放级别zoom===15的时候,1像素大约是5米

当地图缩放级别zoom===14的时候,1像素大约是10米

当地图缩放级别zoom===13的时候,1像素大约是19米

当地图缩放级别zoom===12的时候,1像素大约是38米

当地图缩放级别zoom===11的时候,1像素大约是76米

当地图缩放级别zoom===10的时候,1像素大约是153米


根据我们地图上面的marker图标icon宽度和高度(一般情况是40像素的宽高),为了不让地图缩放级别较小的时候,之间重叠,这样看起来会像这样

有密集恐惧症的人看上去会头皮发麻,为了解决这个问题

我们就要大概计算下marker之间的距离实际是多少km

 根据刚才的zoom放大级别和米/像素之间的关系:

当地图缩放级别zoom===15的时候,距离40像素的marker不会重叠,实际经纬度距离大约是200米

当地图缩放级别zoom===14的时候,距离40像素的marker不会重叠,实际经纬度距离大约是400米

当地图缩放级别zoom===13的时候,距离40像素的marker不会重叠,实际经纬度距离大约是760米

当地图缩放级别zoom===12的时候,距离40像素的marker不会重叠,实际经纬度距离大约是1520米

当地图缩放级别zoom===11的时候,距离40像素的marker不会重叠,实际经纬度距离大约是3040米

当地图缩放级别zoom===10的时候,距离40像素的marker不会重叠,实际经纬度距离大约是6120米


依次类推我们只要根据不同的zoom级别,从marks经纬度坐标数组中计算筛选大于等于指定距离的经纬度坐标出来显示即可,这样就不会出现一大堆重叠的锚点了,算法如下

function getCoordinatesWithinDistance(coordinates, threshold) {const R = 6371; // 地球平均半径,单位为kmlet filteredCoordinates = [];for (let i = 0; i < coordinates.length - 1; i++) {for (let j = i + 1; j < coordinates.length; j++) {const lat1 = coordinates[i][0] * (Math.PI / 180);const lon1 = coordinates[i][1] * (Math.PI / 180);const lat2 = coordinates[j][0] * (Math.PI / 180);const lon2 = coordinates[j][1] * (Math.PI / 180);const dLat = lat2 - lat1;const dLon = lon2 - lon1;const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +Math.cos(lat1) * Math.cos(lat2) *Math.sin(dLon / 2) * Math.sin(dLon / 2);const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));const distance = R * c;if (distance >= threshold) {filteredCoordinates.push(coordinates[i], coordinates[j]);}}}return [...new Set(filteredCoordinates)];
}// 示例使用
const coordinates = [[ "115.467110000000", "35.243117000000" ],[ "115.464244000000", "35.245750000000" ],[ "115.465704000000", "35.244345000000" ],[ "115.466345000000", "35.248416000000" ],[ "115.465013000000", "35.247524000000" ],[ "115.462093000000", "35.245915000000" ],[ "115.455760000000", "35.244595000000" ],[ "115.465165000000", "35.249693000000" ],[ "115.455576000000", "35.247933000000" ],[ "115.455679000000", "35.247791000000" ],[ "115.454584000000", "35.257640000000" ],[ "115.450297000000", "35.259151000000" ],[ "115.491538000000", "35.221940000000" ],[ "115.419223000000", "35.240104000000" ],[ "115.473707000000", "35.144371000000" ],[ "115.473707000000", "35.144371000000" ],[ "115.428679000000", "35.236554000000" ],[ "115.444323000000", "35.225330000000" ],[ "115.445079000000", "35.225690000000" ],[ "115.451545000000", "35.236176000000" ],[ "115.451267000000", "35.234782000000" ],[ "115.452094000000", "35.244713000000" ],[ "115.467585000000", "35.244163000000" ],[ "115.462068000000", "35.243704000000" ],[ "115.465203000000", "35.244530000000" ],[ "115.462323000000", "35.245681000000" ],[ "115.471151000000", "35.262163000000" ],[ "115.478472000000", "35.255419000000" ],[ "115.479916000000", "35.253316000000" ],[ "115.468012000000", "35.244962000000" ],[ "115.470219000000", "35.248809000000" ],[ "115.473124000000", "35.255361000000" ],[ "115.472185000000", "35.234466000000" ],[ "115.474531000000", "35.235291000000" ],[ "115.385856000000", "35.325307000000" ],[ "115.391057000000", "35.303206000000" ],[ "115.390317000000", "35.324235000000" ],[ "115.368813000000", "35.305667000000" ],[ "115.386246000000", "35.325210000000" ],[ "115.395388000000", "35.322654000000" ],[ "115.395413000000", "35.322335000000" ],[ "115.404367000000", "35.330275000000" ],[ "115.356020000000", "35.316644000000" ],[ "115.360492000000", "35.317244000000" ],[ "115.340425000000", "35.323442000000" ],[ "115.390281000000", "35.347751000000" ],[ "115.376570000000", "35.277569000000" ],[ "115.407491000000", "35.271052000000" ],[ "115.409180000000", "35.270858000000" ],[ "115.383049000000", "35.283143000000" ],[ "115.394518000000", "35.275512000000" ],[ "115.412552000000", "35.282239000000" ],[ "115.412294000000", "35.280501000000" ],[ "115.412943000000", "35.281405000000" ],[ "115.414286000000", "35.282532000000" ],[ "115.372445000000", "35.278126000000" ],[ "115.411029000000", "35.294639000000" ],[ "115.411228000000", "35.294372000000" ],[ "115.354823000000", "35.277249000000" ],[ "115.351049000000", "35.283865000000" ],[ "115.347226000000", "35.285854000000" ],[ "115.364996000000", "35.295540000000" ],[ "115.339617000000", "35.289147000000" ],[ "115.339886000000", "35.289394000000" ],[ "115.353355000000", "35.287276000000" ],[ "115.360219000000", "35.286173000000" ],[ "115.354138000000", "35.294477000000" ],[ "115.371264000000", "35.290273000000" ],[ "115.371300000000", "35.290266000000" ],[ "115.371486000000", "35.283174000000" ],[ "115.404012000000", "35.293897000000" ],[ "115.367200000000", "35.290455000000" ],[ "115.352698000000", "35.272023000000" ],[ "115.386620000000", "35.263631000000" ],[ "115.388953000000", "35.231218000000" ],[ "115.386132000000", "35.232681000000" ],[ "115.435882000000", "35.353432000000" ],[ "115.339308000000", "35.251538000000" ],[ "115.339175000000", "35.251426000000" ],[ "115.301593000000", "35.263379000000" ],[ "115.339755000000", "35.251734000000" ],[ "115.342580000000", "35.252439000000" ],[ "115.339765000000", "35.251743000000" ],[ "115.384734000000", "35.241246000000" ],[ "115.369837000000", "35.263812000000" ],[ "115.365957000000", "35.254146000000" ],[ "115.361105000000", "35.254655000000" ],[ "115.363260000000", "35.254741000000" ],[ "115.404880000000", "35.235044000000" ],[ "115.395811000000", "35.245298000000" ],[ "115.393554000000", "35.245817000000" ],[ "115.405384000000", "35.247373000000" ],[ "115.450660000000", "35.379927000000" ],[ "115.450633000000", "35.379905000000" ],[ "115.460214000000", "35.367124000000" ],[ "115.436672000000", "35.408003000000" ],[ "115.436659000000", "35.407997000000" ],[ "115.428856000000", "35.413945000000" ],[ "115.428964000000", "35.413850000000" ],[ "115.436457000000", "35.407923000000" ]
];
const zoom = 10
const threshold = 6.120; // 指定的距离阈值,单位km
const result = getCoordinatesWithinDistance(coordinates, threshold);
console.log(`当缩放级别是${zoom}的时候,返回在数组coordinates中距离大于等于${threshold}km的经纬度坐标数组:`, result);

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

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

相关文章

电机控制系列模块解析(22)—— 零矢量刹车

一、零矢量刹车 基本概念 逆变器通常采用三相桥式结构&#xff0c;包含六个功率开关元件&#xff08;如IGBT或MOSFET&#xff09;&#xff0c;分为上桥臂和下桥臂。每个桥臂由两个反并联的开关元件组成&#xff0c;上桥臂和下桥臂对应于电机三相绕组的正负端。正常工作时&…

【C++题解】1699 - 输出是2的倍数,但非3的倍数的数

问题&#xff1a;1699 - 输出是2的倍数&#xff0c;但非3的倍数的数 类型&#xff1a;循环 题目描述&#xff1a; 请从键盘读入一个整数 n&#xff0c;输出 1∼n 中所有是 2 的倍数&#xff0c;但非 3 的倍数的数&#xff0c;每行 1个。 比如&#xff0c;读入一个整数10 &…

Spring AI实战之二:Chat API基础知识大串讲(重要)

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos Spring AI实战全系列链接 Spring AI实战之一&#xff1a;快速体验(OpenAI)Spring AI实战之二&#xff1a;Chat API基础知识大串讲(重要)SpringAIOllama三部曲…

Linux:进程地址空间、进程控制(一.进程创建、进程终止、进程等待)

上次介绍了环境变量&#xff1a;Linux&#xff1a;进程概念&#xff08;四.main函数的参数、环境变量及其相关操作&#xff09; 文章目录 1.程序地址空间知识点总结上述空间排布结构是在内存吗&#xff1f;&#xff08;进程地址空间引入&#xff09; 2.进程地址空间明确几个点进…

NDIS小端口驱动开发(三)

微型端口驱动程序处理来自过度驱动程序的发送请求&#xff0c;并发出接收指示。 在单个函数调用中&#xff0c;NDIS 微型端口驱动程序可以指示具有多个接收 NET_BUFFER_LIST 结构的链接列表。 微型端口驱动程序可以处理对每个NET_BUFFER_LIST结构上具有多个 NET_BUFFER 结构的多…

JAVA -- > 初识JAVA

初始JAVA 第一个JAVA程序详解 public class Main {public static void main(String[] args) {System.out.println("Hello world");} }1.public class Main: 类型,作为被public修饰的类,必须与文件名一致 2.public static 是JAVA中main函数准写法,记住该格式即可 …

Slash后台管理系统代码阅读笔记 如何实现环形统计图表卡片?

目前&#xff0c;工作台界面的上半部分已经基本梳理完毕了。 接下来&#xff0c;我们看看这个环形图卡片是怎么实现的&#xff1f; 具体代码如下&#xff1a; {/*图表卡片*/} <Row gutter{[16, 16]} className"mt-4" justify"center">{/*环形图表…

U盘引导盘制作Rufus v4.5.2180

软件介绍 Rufus小巧实用开源免费的U盘系统启动盘制作工具和格式化U盘的小工具&#xff0c;它可以快速将ISO镜像文件制作成可引导的USB启动安装盘&#xff0c;支持Windows或Linux启动&#xff0c;堪称写入镜像速度最快的U盘系统制作工具。 软件截图 更新日志 github.com/pbat…

嵌入式全栈开发学习笔记---C语言笔试复习大全24

目录 内存管理 内存分配 堆和栈的区别&#xff1f;&#xff08;面试重点&#xff09; 申请内存的函数 malloc realloc free gcc工具链 编译的过程&#xff08;面试重点&#xff09; 第一步&#xff0c;预处理&#xff1a; 第二步&#xff0c;编译&#xff1a; 第三…

解决LabVIEW通过OPC Server读取PLC地址时的错误180121602

在使用LabVIEW通过OPC Server读取PLC地址时&#xff0c;若遇到错误代码180121602&#xff0c;建议检查网络连接、OPC Server和PLC配置、用户权限及LabVIEW设置。确保网络畅通&#xff0c;正确配置OPC变量&#xff0c;取消缓冲设置以实时读取数据&#xff0c;并使用诊断工具验证…

2 使用香橙派AIpro报错 No module named ‘acllite utils‘

当使用jupyter运行香橙派的notebooks下面的案例的时候启动使用jupyter lab 然后自动跳转到jupyter页面。如下图: 这是自动跳转过来的。然后运行下面的包的导入后报错: 报错为No module named ‘acllite utils’,那么我们打开notebooks文件夹下面的start_notebooks.sh文件:…

【C++练级之路】【Lv.21】C++11——列表初始化和声明

快乐的流畅&#xff1a;个人主页 个人专栏&#xff1a;《算法神殿》《数据结构世界》《进击的C》 远方有一堆篝火&#xff0c;在为久候之人燃烧&#xff01; 文章目录 引言一、列表初始化1.1 内置类型1.2 结构体或类1.3 容器 二、声明2.1 auto2.2 decltype2.3 nullptr 三、STL的…

从“反超”到“引领”,中国卫浴品牌凭何遥遥领先?

作者 | 曾响铃 文 | 响铃说 前不久&#xff0c;第28届中国国际厨房、卫浴设施展览会(以下简称“中国国际厨卫展”)在上海如期举行&#xff0c;就结果来说真的让人大开眼界。 冲水声比蚊子声更小的马桶、能化身无感交互平台的魔镜柜、可以语音交互的淋浴器&#xff0c;这些“…

Keli5烧写STM32程序时出现ST-LINK USB communication error错误(USB 通信错误)

1错误原图 2错误原因 前提驱动安装正确 原因1 usb接触不良&#xff08;极少出现&#xff09; 解决方法 更换USB线 还不行连下载器一起更换 原因2&#xff08;出现概率比较大&#xff09; 下载器的固件出现问题或下载器固件版本与Keli5的版本不匹配 解决方法 在Keli5的…

今日早报 每日精选15条新闻简报 每天一分钟 知晓天下事 5月26日,星期日

每天一分钟&#xff0c;知晓天下事&#xff01; 2024年5月26日 星期日 农历四月十九 1、 医保局&#xff1a;支持将符合条件的村卫生室纳入医保定点&#xff0c;方便农村居民就医。 2、 网传养老金储备严重不足&#xff1f;央视辟谣&#xff1a;这笔钱二十多年来从未动用过&a…

搭建企业级AI应用的流程

搭建企业级AI应用的流程是一个复杂且系统化的工程&#xff0c;它需要从多个维度出发&#xff0c;确保最终的应用既符合企业的业务需求&#xff0c;也具备高效、稳定和可扩展的特性。以下是详细的步骤&#xff1a; 初步接触与需求分析是整个项目的基础。在这一阶段&#xff0c;我…

【C++题解】1698. 请输出带有特殊尾数的数

问题&#xff1a;1698. 请输出带有特殊尾数的数 类型&#xff1a; 题目描述&#xff1a; 请输出1∼n 中所有个位为 1、3、5、7中任意一个数的整数&#xff0c;每行 1 个。( n<1000 ) 比如&#xff0c;假设从键盘读入 20&#xff0c;输出结果如下&#xff1a; 1 3 5 7 11 1…

LLMs之PEFT之Llama-2:《LoRA Learns Less and Forgets LessLoRA学得更少但遗忘得也更少》翻译与解读

LLMs之PEFT之Llama-2&#xff1a;《LoRA Learns Less and Forgets LessLoRA学得更少但遗忘得也更少》翻译与解读 导读&#xff1a;该论文比较了LoRA与完全微调在代码与数学两个领域的表现。 背景问题&#xff1a;微调大规模语言模型需要非常大的GPU内存。LoRA这一参数高效微调方…

OpenStack平台Keystone组件的使用

1. 规划节点 安装基础服务的服务器规划 IP地址 主机名 节点 192.168.100.10 controller Openstack控制节点 2. 基础准备 使用机电云共享的单节点的openstack系统&#xff0c;自行修改虚拟网络编辑器、网络适配器&#xff0c;系统用户名&#xff1a;root&#xff0c;密…

【Basic】Upload-Labs-Linux

文章目录 前言Pass-01Pass-02Pass-03Pass-04Pass-05Pass-06Pass-07Pass-08Pass-09Pass-10Pass-11Pass-12Pass-13Pass-14Pass-15Pass-16解题感悟 前言 美好的一天从刷题开始 Pass-01 我淦20道题&#xff1f;&#xff1f;&#xff1f;一道一道来吧 先看第一道题 先在home里搞一…