当前位置:   article > 正文

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

实现地图上展示坐标时,不要全部展示、只展示几个距离相对较大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经纬度坐标数组中计算筛选大于等于指定距离的经纬度坐标出来显示即可,这样就不会出现一大堆重叠的锚点了,算法如下

  1. function getCoordinatesWithinDistance(coordinates, threshold) {
  2. const R = 6371; // 地球平均半径,单位为km
  3. let filteredCoordinates = [];
  4. for (let i = 0; i < coordinates.length - 1; i++) {
  5. for (let j = i + 1; j < coordinates.length; j++) {
  6. const lat1 = coordinates[i][0] * (Math.PI / 180);
  7. const lon1 = coordinates[i][1] * (Math.PI / 180);
  8. const lat2 = coordinates[j][0] * (Math.PI / 180);
  9. const lon2 = coordinates[j][1] * (Math.PI / 180);
  10. const dLat = lat2 - lat1;
  11. const dLon = lon2 - lon1;
  12. const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
  13. Math.cos(lat1) * Math.cos(lat2) *
  14. Math.sin(dLon / 2) * Math.sin(dLon / 2);
  15. const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  16. const distance = R * c;
  17. if (distance >= threshold) {
  18. filteredCoordinates.push(coordinates[i], coordinates[j]);
  19. }
  20. }
  21. }
  22. return [...new Set(filteredCoordinates)];
  23. }
  24. // 示例使用
  25. const coordinates = [
  26. [ "115.467110000000", "35.243117000000" ],
  27. [ "115.464244000000", "35.245750000000" ],
  28. [ "115.465704000000", "35.244345000000" ],
  29. [ "115.466345000000", "35.248416000000" ],
  30. [ "115.465013000000", "35.247524000000" ],
  31. [ "115.462093000000", "35.245915000000" ],
  32. [ "115.455760000000", "35.244595000000" ],
  33. [ "115.465165000000", "35.249693000000" ],
  34. [ "115.455576000000", "35.247933000000" ],
  35. [ "115.455679000000", "35.247791000000" ],
  36. [ "115.454584000000", "35.257640000000" ],
  37. [ "115.450297000000", "35.259151000000" ],
  38. [ "115.491538000000", "35.221940000000" ],
  39. [ "115.419223000000", "35.240104000000" ],
  40. [ "115.473707000000", "35.144371000000" ],
  41. [ "115.473707000000", "35.144371000000" ],
  42. [ "115.428679000000", "35.236554000000" ],
  43. [ "115.444323000000", "35.225330000000" ],
  44. [ "115.445079000000", "35.225690000000" ],
  45. [ "115.451545000000", "35.236176000000" ],
  46. [ "115.451267000000", "35.234782000000" ],
  47. [ "115.452094000000", "35.244713000000" ],
  48. [ "115.467585000000", "35.244163000000" ],
  49. [ "115.462068000000", "35.243704000000" ],
  50. [ "115.465203000000", "35.244530000000" ],
  51. [ "115.462323000000", "35.245681000000" ],
  52. [ "115.471151000000", "35.262163000000" ],
  53. [ "115.478472000000", "35.255419000000" ],
  54. [ "115.479916000000", "35.253316000000" ],
  55. [ "115.468012000000", "35.244962000000" ],
  56. [ "115.470219000000", "35.248809000000" ],
  57. [ "115.473124000000", "35.255361000000" ],
  58. [ "115.472185000000", "35.234466000000" ],
  59. [ "115.474531000000", "35.235291000000" ],
  60. [ "115.385856000000", "35.325307000000" ],
  61. [ "115.391057000000", "35.303206000000" ],
  62. [ "115.390317000000", "35.324235000000" ],
  63. [ "115.368813000000", "35.305667000000" ],
  64. [ "115.386246000000", "35.325210000000" ],
  65. [ "115.395388000000", "35.322654000000" ],
  66. [ "115.395413000000", "35.322335000000" ],
  67. [ "115.404367000000", "35.330275000000" ],
  68. [ "115.356020000000", "35.316644000000" ],
  69. [ "115.360492000000", "35.317244000000" ],
  70. [ "115.340425000000", "35.323442000000" ],
  71. [ "115.390281000000", "35.347751000000" ],
  72. [ "115.376570000000", "35.277569000000" ],
  73. [ "115.407491000000", "35.271052000000" ],
  74. [ "115.409180000000", "35.270858000000" ],
  75. [ "115.383049000000", "35.283143000000" ],
  76. [ "115.394518000000", "35.275512000000" ],
  77. [ "115.412552000000", "35.282239000000" ],
  78. [ "115.412294000000", "35.280501000000" ],
  79. [ "115.412943000000", "35.281405000000" ],
  80. [ "115.414286000000", "35.282532000000" ],
  81. [ "115.372445000000", "35.278126000000" ],
  82. [ "115.411029000000", "35.294639000000" ],
  83. [ "115.411228000000", "35.294372000000" ],
  84. [ "115.354823000000", "35.277249000000" ],
  85. [ "115.351049000000", "35.283865000000" ],
  86. [ "115.347226000000", "35.285854000000" ],
  87. [ "115.364996000000", "35.295540000000" ],
  88. [ "115.339617000000", "35.289147000000" ],
  89. [ "115.339886000000", "35.289394000000" ],
  90. [ "115.353355000000", "35.287276000000" ],
  91. [ "115.360219000000", "35.286173000000" ],
  92. [ "115.354138000000", "35.294477000000" ],
  93. [ "115.371264000000", "35.290273000000" ],
  94. [ "115.371300000000", "35.290266000000" ],
  95. [ "115.371486000000", "35.283174000000" ],
  96. [ "115.404012000000", "35.293897000000" ],
  97. [ "115.367200000000", "35.290455000000" ],
  98. [ "115.352698000000", "35.272023000000" ],
  99. [ "115.386620000000", "35.263631000000" ],
  100. [ "115.388953000000", "35.231218000000" ],
  101. [ "115.386132000000", "35.232681000000" ],
  102. [ "115.435882000000", "35.353432000000" ],
  103. [ "115.339308000000", "35.251538000000" ],
  104. [ "115.339175000000", "35.251426000000" ],
  105. [ "115.301593000000", "35.263379000000" ],
  106. [ "115.339755000000", "35.251734000000" ],
  107. [ "115.342580000000", "35.252439000000" ],
  108. [ "115.339765000000", "35.251743000000" ],
  109. [ "115.384734000000", "35.241246000000" ],
  110. [ "115.369837000000", "35.263812000000" ],
  111. [ "115.365957000000", "35.254146000000" ],
  112. [ "115.361105000000", "35.254655000000" ],
  113. [ "115.363260000000", "35.254741000000" ],
  114. [ "115.404880000000", "35.235044000000" ],
  115. [ "115.395811000000", "35.245298000000" ],
  116. [ "115.393554000000", "35.245817000000" ],
  117. [ "115.405384000000", "35.247373000000" ],
  118. [ "115.450660000000", "35.379927000000" ],
  119. [ "115.450633000000", "35.379905000000" ],
  120. [ "115.460214000000", "35.367124000000" ],
  121. [ "115.436672000000", "35.408003000000" ],
  122. [ "115.436659000000", "35.407997000000" ],
  123. [ "115.428856000000", "35.413945000000" ],
  124. [ "115.428964000000", "35.413850000000" ],
  125. [ "115.436457000000", "35.407923000000" ]
  126. ];
  127. const zoom = 10
  128. const threshold = 6.120; // 指定的距离阈值,单位km
  129. const result = getCoordinatesWithinDistance(coordinates, threshold);
  130. console.log(`当缩放级别是${zoom}的时候,返回在数组coordinates中距离大于等于${threshold}km的经纬度坐标数组:`, result);

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/码创造者/article/detail/818900
推荐阅读
相关标签
  

闽ICP备14008679号