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

news2024/9/22 13:22:37
比例尺级别地面分辨率 (米/像素)比例尺
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; // 地球平均半径,单位为km
  let 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.coloradmin.cn/o/1696444.html

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

相关文章

2024年5月LLM最新排名:GPT-4o出道即巅峰!国内3个大模型榜上有名!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;所以创建了“AI信息Gap”这个公众号&#xff0c;专注于分享AI全维度知识…

orin部署tensorrt、cuda、cudnn、pytorch、onnx

绝大部分参考https://blog.csdn.net/qq_41336087/article/details/129661850 非orin可以参考https://blog.csdn.net/JineD/article/details/131201121 报错显卡驱动安装535没法安装、原始是和l4t-cuda的部分文件冲突 Options marked [*] produce a lot of output - pipe it th…

核函数的介绍

1.核函数的介绍&#xff1a; 1、用线性核等于没有用核。 2、多项式核&#xff1a;随着d越大&#xff0c;则 fai(X) 对应的维度将越高。&#xff08;可以通过d得到对应的fai(X)函数&#xff09;。 3、高斯核函数&#xff1a;无限维度。 4、tanh核。 2.如何选择核函数的参数&am…

2024年云南特岗教师报名流程,超详细,明天就开始报名哦!

2024年云南特岗教师报名流程&#xff0c;超详细&#xff0c;明天就开始报名哦&#xff01;

深入理解 Mysql 分层架构:从存储引擎到查询优化器的内部机制解析

一、基础架构 1.连接器 1.会先连接到这个数据库上&#xff0c;这时候接待你的就是连接器。连接器负责跟客户端建立连接、获取权限、维持和管理连接 2.用户密码连接成功之后&#xff0c;会从权限表中拿出你的权限&#xff0c;后续操作权限都依赖于此时拿出的权限,这就意味着当链…

【学习笔记】计算机组成原理(七)

指令系统 文章目录 指令系统7.1 机器指令7.1.1 指令的一般格式7.1.2 指令字长 7.2 操作数类型和操作类型7.2.1 操作数类型7.2.2 数据在存储器中的存放方式7.2.3 操作类型 7.3 寻址方式7.3.1 指令寻址7.3.1.1 顺序寻址7.3.1.2 跳跃寻址 7.3.2 数据寻址7.3.2.1 立即寻址7.3.2.2 直…

月薪5万是怎样谈的?

知识星球&#xff08;星球名&#xff1a;芯片制造与封测技术社区&#xff0c;星球号&#xff1a;63559049&#xff09;里的学员问&#xff1a;目前是晶圆厂的PE&#xff0c;但是想跳槽谈了几次薪水&#xff0c;都没法有大幅度的增长&#xff0c;该怎么办&#xff1f;“学得文武…

three.js能实现啥效果?看过来,这里都是它的菜(09)

Hi&#xff0c;这是第九期了&#xff0c;继续分享three.js在可视化大屏中的应用&#xff0c;本期分享位移动画的实现。 位移动画 Three.js位移动画是指在Three.js中实现物体位置的平移动画。通过改变物体的位置属性&#xff0c;可以实现物体沿着指定路径从一个位置移动到另一…

PostgreSQL基本使用

参考文档&#xff1a;PostgreSQL基本使用与数据备份_postgresql 数据备份-CSDN博客 一、数据库的操作 1. 本机登录 2.创建新用户来访问 PostgreSQL 3 重启数据库服务 4.创建数据库并查看数据库 5.连接数据并删除数据库 6.建表插入数据&#xff0c;查看数据库下所有的表&#…

Python数据可视化(四)

实现图形的动画效果 在 matplotlib 中&#xff0c;不仅可以绘制静态图形&#xff0c;也可以绘制动态图形。对于动态图形来说&#xff0c;我们称 之为动画或许会让读者更容易明白。绘制动画的方法主要有两种&#xff1a;一种是使用模块 animation 绘制动 画&#xff1b;另一种是…

GVM: Golang多版本管理利器

本文介绍了 Go Version Manager 的功能和使用方法&#xff0c;介绍了如何通过 GVM 在系统上安装和管理多个 Go 语言版本。原文: GVM: Go Version Manager, for Golang manage multiple versions Go 版本管理器&#xff08;GVM&#xff0c;Go Version Manager&#xff09;是一款…

夏日炎炎,手机如何避免变成热源?这些降温技巧分享给你

夏日炎炎&#xff0c;手机也容易“中暑”。 高温不仅会让手机性能大打折扣&#xff0c;还可能引发安全隐患。因此&#xff0c;如何让手机在高温下“冷静”下来&#xff0c;成为了许多手机用户关心的问题。 本文将为你提供一些实用的降温技巧&#xff0c;帮助你的手机安全度过…

击穿盲点——【网络安全】社会工程学中的网络欺骗

社会工程学起源于上世纪60年代左右&#xff0c;是一种通过人际交流的方式来获得情报的非技术渗透手段。这种手段无需过多技术要求&#xff0c;却非常有效&#xff0c;目前已成为危害企业网络安全的重大威胁之一。著名黑客凯文米特尼克在《反欺骗的艺术》中曾提到&#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…

08-Fortran基础--Fortran内置函数分类总结

08-Fortran基础--Fortran内置函数分类总结 0 引言1 Fortran内置函数1.1 常用到数学函数1.2 字符串函数&#xff1a;1.3 数组函数&#xff1a;1.4 数值查询函数1.5 文件操作函数&#xff1a; 2 结语 0 引言 Fortran是一种很古老的编程语言&#xff0c;但它仍然广泛使用于科学计算…

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

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

Vue从入门到实战Day07

一、vuex概述 目标&#xff1a;明确vuex是什么&#xff0c;应用场景&#xff0c;优势 1. 是什么&#xff1a; vuex是一个vue的状态管理工具&#xff0c;状态就是数据。 大白话&#xff1a;vuex是一个插件&#xff0c;可以帮助我们管理vue通用的数据&#xff08;多组件共享的…

【数据结构|C语言版】树、二叉树和堆

前言1. 树1.1 树的概念1.2 树的表示1.3 树在实际中的运用1.4 树的实现 2. 二叉树2.1 二叉树的概念和结构2.2 二叉树的性质2.3 二叉树的存储结构2.4 二叉树的代码实现 3. 堆4. 二叉树顺序结构的实现5. 二叉树链式结构的实现结语 #include<GUIQU.h> int main { 上期回顾: 【…

2024 一键批量下载雪球和东方财富文章导出excel和pdf

之前分享过雪球批量下载工具2023 批量下载雪球文章导出pdf&#xff0c;以市场高标解读这个号为例&#xff0c;下载效果&#xff1a; 下载文章后用我开发的htmltopdf.exe批量转换html为pdf&#xff0c;不过要注意不要放在中文目录下&#xff0c;否则提示错误 utf-8 codec cant d…

新建一个STM32工程(精简版)

一、新建一个STM32工程 二、建立三个文件夹 1、Start文件夹里的东西 &#xff08;1&#xff09;启动文件&#xff1a;STM32入门教程资料\固件库\STM32F10x_StdPeriph_Lib_V3.5.0\Libraries\CMSIS\CM3\DeviceSupport\ST\STM32F10x\startup\arm &#xff08;2&#xff09;STM32…