将纬度/经度坐标转换为给定地图上的像素（使用 JavaScript）

Question

我从 MaxMind 中收集了一个城市数据库，其中包含数据库中每个城市的纬度/经度值。我还整理了一张北/美洲地图，我希望在地图的 x/y 坐标上显示一个图标，该图标源自城市数据库记录的 lat/lng 坐标。

根据我的理解，我需要首先找到地图的左/上边界（lat/lng -> x/y），然后将其用作任何北美城市 x/y 坐标之间的线性关系的差异。最后，根据地图的大小，只需进行一些简单的除法和减法运算即可确定该点的位置。

但是我似乎无法弄清楚如何执行以下操作：

1. 我不确定纬度/经度映射系统是什么。我怎样才能找到这个？
2. 使用 JavaScript 库，如何将 0,0 坐标和每个城市坐标的经纬度转换为像素。我尝试过 Proj4js，但它们要求您指定坐标地图类型等。这是另一个提出类似问题的问题。 将给定的长/纬度转换为像素 x/y图片

有什么想法吗？

-- 编辑 --

输出地图（北美）是一个连续的圆柱体：“米勒圆柱投影”。 http://en.wikipedia.org/wiki/Miller_cylindrical_projection

Answer 1

纬度和经度是在地球上绘制的假想线，以便您可以准确地确定世界上的任何位置。简单地说，它们是平面的 X 和 Y 坐标。
纬度是一条从北到南的垂直线，北极为 90 度，南极为 -90 度。

另一方面，经度是一条从东向南延伸的水平线，西边为-180°，东边为180°。

您可以将 latLng 转换为像素坐标，假设 html 容器的宽度是世界的宽度，这同样适用于高度。

公式 - 经度 - 像素

(givenLng*widthOfContainerElement)/360

其中 360 是以度为单位的总经度

公式 - 纬度 - 像素

(givenLat*heightOfContainerElement)/180

其中 360 是以度为单位的总经度

//Height is calculated from the bottom

如果您还需要任何说明，请告诉我。

Answer 2

这是 墨卡托投影 的 Javascript 实现，仅返回正值（屏幕的笛卡尔坐标系）并占球体>平换算：

// get x   
var x = (lng + 180) * (mapWidth / 360);
// convert from degrees to radians
var latRad = lat * Math.PI / 180;
// get y value
var mercN = Math.log(Math.tan((Math.PI / 4) + (latRad / 2)));
var y = (mapHeight / 2) - (mapWidth * mercN / (2 * Math.PI));

Answer 3

这是一个非常古老的问题，但接受的答案有一些...细微差别...

通常，这是针对卫星/航空图像完成的，通常伴随着“缩放级别”。

这个缩放级别粗略地（我的意思是粗略地）转换为“地面样本距离”或 GSD，当提供时，它表示图像中每个像素的厘米。

您经常会看到 18、19、20 或 21 的缩放级别。

需要注意的问题之一是地球不是平坦的，也不是完美的球形，因此，有许多不同的“投影”方法可用于从地球表面的三维坐标到屏幕上的二维图像。这些投影方法中最流行且使用最广泛的是墨卡托投影。

Google 提供了一种方法，该方法使用墨卡托投影来提供像素x 和 y 的坐标。

然后我们可以使用“缩放级别”来缩放坐标以适合我们的图像。

interface LatLngLiteral {
    lat: number;
    lng: number;
}

interface Coordinate {
    x: number;
    y: number;
}

const project = (latLng: LatLngLiteral): Coordinate => {
    const TILE_SIZE: number = 256;
    let siny: number = Math.sin((latLng.lat * Math.PI) / 180);

    // Truncating to 0.9999 effectively limits latitude to 89.189. This is
    // about a third of a tile past the edge of the world tile.
    siny = Math.min(Math.max(siny, -0.9999), 0.9999);

    return {
        x: TILE_SIZE * (0.5 + latLng.lng / 360),
        y: TILE_SIZE * (0.5 - Math.log((1 + siny) / (1 - siny)) / (4 * Math.PI))
    };
};
export function formatToPoint(latLng: LatLngLiteral, zoom: number): Coordinate {
    // Get the world coordinates in pixels
    const worldCoordinate: Coordinate = project(latLng);
    // Scale to fit our image
    const scale: number = Math.pow(2, zoom);

    // Apply scale to world coordinates to get image coordinates
    return {
        x: Math.floor(worldCoordinate.x * scale),
        y: Math.floor(worldCoordinate.y * scale)
    }
}