如何在不使用 Google 地图的情况下将纬度/经度转换为 HTML5 坐标？

Posted 2023-02-23

【中文标题】如何在不使用 Google 地图的情况下将纬度/经度转换为 HTML5 坐标？

【英文标题】：How to convert latitude/longitude to HTML5 coordinates without using Google Maps?

【发布时间】：2016-07-22 13:18:17

【问题描述】：

目标是在不使用 Google 地图的情况下使用坐标数组绘制路线。将标准纬度/经度坐标转换为 html5 画布坐标的最佳方法是什么？

【问题讨论】：

你看过Haversine公式吗？它将为您提供距离和角度，您可以轻松地将其转换为 x、y。

我发布了一个做得很好的答案。

请注意日期线（即第 180 条子午线）处发生的异常情况。幸运的是，穿过它的道路并不多，目前只有斐济。但是，根据您要处理的区域的大小，您可能需要编写特殊情况，即较短的距离使用反向坐标。

【参考方案1】：

我找到了一种将纬度/经度转换为点的相当简单的方法。

获取集合的最小/最大坐标。 准备好画布尺寸。 使用浮点计算获取画布上 x 和 y 的百分比。 为 D3 提供积分。

参见 JS 小提琴： https://jsfiddle.net/12stct3y/

var bounds = 
    "minLon": -81.267555236816,
    "maxLon": -81.261039733887,
    "maxLat": 28.979709625244,
    "minLat": 28.977783203125

var dimensions = 
    width:400,
    height:150
   
function getX(x) 
    var position = (x - bounds.minLon) / (bounds.maxLon - bounds.minLon); 
    return dimensions.width*position;

function getY(y) 
  var position = (y - bounds.minLat) / (bounds.maxLat - bounds.minLat); 
    return dimensions.height*position;

不包括在小提琴中：

旋转到北视图 根据变量边界创建维度

【讨论】：

提示：如果您不知道目标的尺寸，您可以将尺寸设置为 100*100 以获得百分比，您可以在绝对定位的顶部/左侧 css 属性中使用该百分比。跨度>