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

Question

目标是使用坐标数组在不使用谷歌地图的情况下绘制路线。将标准纬度/经度坐标转换为 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. 基于变量边界创建维度