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

Question

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

Answer 1

我找到了一种将lat / lon转换为点的简单方法。

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. 基于变量边界创建尺寸