将地理位置转换为墨卡托投影图像上的像素答案

【问题标题】：Convert geolocation to pixels on a mercator projection image将地理位置转换为墨卡托投影图像上的像素
【发布时间】：2019-08-02 08:52:19
【问题描述】：

我正在创建一个应用程序，允许用户指定地理位置数据，然后将其作为节点渲染到矢量墨卡托投影矢量图像上。

所以我购买了以下墨卡托投影矢量图像： https://www.vectorstock.com/royalty-free-vector/world-map-gray-mercator-projection-lasercut-vector-23277786

我从以下文章中找到了将地理位置数据转换为像素的公式： Convert latitude/longitude point to a pixels (x,y) on mercator projection

但是，转换不正确，我认为它与我使用的图像有关，它不是示例中使用的“普通”墨卡托地图（85 度）。

因此，我的问题是：有没有办法通过提供的图像实现我想要的？如果是的话，我想要一些关于下面提供的代码的帮助。如果没有，如果您可以提供一个与所提供的具有相同风格的图片（矢量，免费或出售）的网址，我真的很感激。

非常感谢！

public mapWidth: number = 2476;
public mapHeight: number = 1607;
public node: NodeLocation = { latitude: 8.161366, longitute: 77.454603, x: null, y: null };

public render() {
    let latitudeToRadians = ((this.node.latitude * Math.PI) / 180);
    let mercN = Math.log(Math.tan((Math.PI / 4) + (latitudeToRadians / 2)));
    this.node.x = ((this.node.longitute + 180) * (this.mapWidth / 360));
    this.node.y = ((this.mapHeight / 2) - ((this.mapWidth * mercN) / (2 * Math.PI)));
}

【问题讨论】：

标签： typescript geolocation 2d map-projections mercator

【解决方案1】：

所以在做了一些测试之后，我发现我的图像在开箱时就没有对齐。然后我在https://github.com/mfeldheim/hermap（“Normal”墨卡托地图 85 度）中打开参考图像并将它们对齐在一起，因为两者都是墨卡托投影。

这些完美对齐。

我的图片不包含南极洲，因此是矩形的，而不是作为参考图片的正方形。为了适应这一点，我将 image-height 属性设置为图像宽度，使公式按预期工作。

最终代码如下所示：

public mapWidth: number = 2400;
public mapHeight: number = this.mapWidth
public lat = -12.090940;
public long = 49.2645833;
public x: number;
public y: number;

public calculatePixels() {
    let latitudeToRadians = ((this.lat * Math.PI) / 180);
    let mercN = Math.log(Math.tan((Math.PI / 4) + (latitudeToRadians / 2)));

    this.x = ((this.long + 180) * (this.mapWidth / 360));
    this.y = ((this.mapHeight / 2) - ((this.mapWidth * mercN) / (2 * Math.PI)))
    console.log("node position x / y", this.x, this.y);
}

【讨论】：