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

Question

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

所以我买了下面的墨卡托投影矢量图： 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

但是，转换不正确，我认为这与我使用的图像有关，而不是示例中使用的 "Normal" 墨卡托地图 (85deg)。

因此我的问题是：有没有一种方法可以用提供的图像实现我想要的效果？如果是的话，我想对下面提供的代码有所帮助。如果没有，如果你能提供一个 url 可以工作的图像（矢量，免费或出售），我真的很感激，它与提供的图像具有相同的风格。

非常感谢！

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)));
}

Answer 1

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

这些完美对齐。

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

最终代码看起来像这样：

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);
}

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

Convert geolocation to pixels on a mercator projection image

2d

geolocation

map-projections

mercator

typescript