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

Question

目标是使用坐标数组来绘制路线，而不使用 Google map 。将标准纬度/经度坐标转换为 HTML5 Canvas 坐标的最佳方法是什么？

Answer 1

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

1. 获取您的集合的最小/最大坐标。
2. 准备好 Canvas 尺寸。
3. 使用浮点计算来获取 Canvas 上 x 和 y 的百分比。
4. 为 D3 提供积分。

参见 JS fiddle : 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;
}

不包含在 fiddle 中:

1. 旋转至北向 View
2. 根据变量边界创建维度