0

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

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

我从以下文章中找到了将地理位置数据转换为像素的公式： 将纬度/经度点转换为墨卡托投影上的像素 (x,y)

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

因此，我的问题是：有没有办法通过提供的图像实现我想要的？如果是的话，我想对下面提供的代码有所帮助。如果没有，如果您可以提供一个与所提供的具有相同风格的图像（矢量、免费或出售）的 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)));
}
4

1 回答 1

0

所以在做了一些测试之后，我发现我的图像在开箱时就没有对齐。然后我在https://github.com/mfeldheim/hermap （“法线”墨卡托地图 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);
}
于 2019-08-05T08:27:12.520 回答