如何使用three.js将纬度/经度转换为3d像素答案

【问题标题】：how to convert latitude/longitude to pixels in 3d using three.js如何使用three.js将纬度/经度转换为3d像素
【发布时间】：2018-09-06 12:16:01
【问题描述】：

我有地图一部分的纬度/经度。我想把这个纬度/经度放在 3d 空间 webgl(lib:three.js) 中。然后如何将纬度/经度转换为相应的 x,y,z 线。

【问题讨论】：

你在这里问什么？听起来您希望我们为您定义坐标空间；我们不知道什么是实用的，因此我们无法为您做出这些决定。向我们提供有关您必须处理的内容的更多详细信息（屏幕尺寸、深度、GL 坐标系中地图部分的大小等）
有很多算法可以解决这个问题。你试过什么？
我有一组纬度/经度和海拔高度，对应于从地图上拍摄的图像。它实际上是一个表面不平整的图像。如果表面有山丘，那么它的纬度/经度和海拔高度非常高，反之亦然。如何在 3d 世界中表示那些纬度/经度 alt（如 x/y 和 z）。例如 lat=17.1234 lon=83.1234 alt=23 到什么 x?,y?z(=alt)？

标签： javascript three.js openlayers

【解决方案1】：

因为纬度和经度是二维表示，您需要选择将用于投影的平面。最简单的一个是：X - 经度和 Y - 纬度。其次，如果您需要一些精确的位置，请进行缩放。但正如我已经说过的，这是最简单的情况。一般来说，地图投影要复杂得多。例如，请参阅此处lat/lon conversion to x/y-coordinates 的答案。希望对你有帮助。

【讨论】：

【解决方案2】：

花了一些时间寻找解决这个问题的最佳“three.js 方式”。为了后代，我想我会把它包括在这里。以下假设 Y 向上：

const latLngToVector3 = (latLng, radius) => {
  const phi = Math.PI * (0.5 - (latLng.lat / 180));
  const theta = Math.PI * (latLng.lng / 180);
  const spherical = THREE.Spherical(radius || latLng.radius || 1, phi, theta);
  return new THREE.Vector3().setFromSpherical(spherical);
};

const vector3ToLatLng = (v3) => {
  const spherical = new THREE.Spherical().setFromVector3(v3);
  return {
    lat: 180 * (0.5 - (spherical.phi / Math.PI)),
    lng: 180 * (spherical.theta / Math.PI),
  };
};

// convert to x,y,z with radius = 1
const v3 = latLngToVector3({ lat: -16.8985, lng: 145.7134 });

// convert back to lat/lng
const latLng = vector3ToLatLng(v3);

查看Spherical.setFromvector3 和Vector3.setFromSpherical 方法，了解这里的内部工作原理。

【讨论】：

【解决方案3】：

当您使用像素创建新点时，它会转换为 lat 和 lng。

var offsetX = 10;
var offsetY = 10;
var mapZoom = 5;
var point = new google.maps.Point(
     offsetX / Math.pow(2, mapZoom),
     offsetY / Math.pow(2, mapZoom)
);

在此之后，您可以将 point.x 和 point.y 与另一个点相加。

【讨论】：