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

Question

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

Answer 1

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

1. 获取集合的最小/最大坐标。
2. 准备好画布尺寸。
3. 使用浮点计算获取画布上 x 和 y 的百分比。
4. 为 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;
}

不包括在小提琴中：

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