實現地圖上展示坐標時,不要全部展示、只展示幾個距離相對較大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.pswp.cn/web/15702.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/15702.shtml
英文地址,請注明出處:http://en.pswp.cn/web/15702.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

電機控制系列模塊解析(22)—— 零矢量剎車

一、零矢量剎車 基本概念 逆變器通常采用三相橋式結構&#xff0c;包含六個功率開關元件&#xff08;如IGBT或MOSFET&#xff09;&#xff0c;分為上橋臂和下橋臂。每個橋臂由兩個反并聯的開關元件組成&#xff0c;上橋臂和下橋臂對應于電機三相繞組的正負端。正常工作時&…

mongodb在游戲開發領域的優勢

1、分布式id 游戲服務器里的大部分數據都是要求全局唯一的&#xff0c;例如玩家id&#xff0c;道具id。之所以有這種要求&#xff0c;是因為運營業務上需要進行合服操作&#xff0c;保證不同服的數據在進行合服之后&#xff0c;也能保證id不沖突。如果采用關系型數據庫&#x…

【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函數準寫法,記住該格式即可 …

python皮卡丘動畫代碼

在Python中&#xff0c;我們可以使用多種方法來創建皮卡丘的動畫&#xff0c;例如使用matplotlib庫。 解決方案1&#xff1a;使用matplotlib庫 以下是一個使用matplotlib庫創建皮卡丘動畫的例子&#xff1a; import matplotlib.pyplot as plt import matplotlib.animation …

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; 第三…

【Spring Boot】使用 Redis + Cafeine 實現二級緩存

使用 Redis Caffeine 實現二級緩存可以有效提升應用的性能和緩存的命中率。Caffeine 是一個高效的 Java 本地緩存庫&#xff0c;而 Redis 是一個分布式緩存解決方案。通過將兩者結合&#xff0c;Caffeine 作為一級緩存用于快速訪問常用數據&#xff0c;Redis 作為二級緩存用于…

解決LabVIEW通過OPC Server讀取PLC地址時的錯誤180121602

在使用LabVIEW通過OPC Server讀取PLC地址時&#xff0c;若遇到錯誤代碼180121602&#xff0c;建議檢查網絡連接、OPC Server和PLC配置、用戶權限及LabVIEW設置。確保網絡暢通&#xff0c;正確配置OPC變量&#xff0c;取消緩沖設置以實時讀取數據&#xff0c;并使用診斷工具驗證…

簡述vue常用指令

Vue.js 提供了許多內置指令&#xff0c;這些指令用于在模板中添加特殊功能。以下是一些 Vue 的常用內置指令的簡要說明&#xff1a; v-text&#xff1a; 更新元素的 textContent。示例&#xff1a;<span v-text"message"></span> v-html&#xff1a; 更…

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的…

A*算法搜索的路徑是最優的么?

A * 算法&#xff08;A* Search Algorithm&#xff09;是一種啟發式搜索算法&#xff0c;它旨在找到從起點到終點的最短路徑。在滿足以下條件時&#xff0c;A*算法能夠保證找到最優路徑&#xff1a; 啟發式函數的一致性&#xff08;Consistency&#xff09;或可采納性&#xf…

從“反超”到“引領”,中國衛浴品牌憑何遙遙領先?

作者 | 曾響鈴 文 | 響鈴說 前不久&#xff0c;第28屆中國國際廚房、衛浴設施展覽會(以下簡稱“中國國際廚衛展”)在上海如期舉行&#xff0c;就結果來說真的讓人大開眼界。 沖水聲比蚊子聲更小的馬桶、能化身無感交互平臺的魔鏡柜、可以語音交互的淋浴器&#xff0c;這些“…

Keli5燒寫STM32程序時出現ST-LINK USB communication error錯誤(USB 通信錯誤)

1錯誤原圖 2錯誤原因 前提驅動安裝正確 原因1 usb接觸不良&#xff08;極少出現&#xff09; 解決方法 更換USB線 還不行連下載器一起更換 原因2&#xff08;出現概率比較大&#xff09; 下載器的固件出現問題或下載器固件版本與Keli5的版本不匹配 解決方法 在Keli5的…

[音視頻]ffmepg常用命令

ffmpeg 在音視頻的世界里&#xff0c;ffmpeg可是如雷貫耳的存在&#xff0c;學習音視頻開發&#xff0c;ffmpeg是必須掌握的技能 常用命令 保存m3u8文件 ffmpeg -i http://xxxxx/test.m3u8 -c copy result.mp4