Three.js图层用于Leaflet

Question

我正在尝试为leaflet构建一个叠加层。该叠加层应显示3D内容(例如建筑物)。然而，我在使地图上的移动与叠加场景中的移动同步方面遇到了问题。

目前，画布的大小与地图容器相同，并且始终覆盖地图(类似于position:fixed)。为了在用户平移地图时四处移动，我想在场景中移动相机(而不是移动所有几何体)。对于位置，我使用距离lat：0，lng：0的距离，因为THREE似乎无法处理分形位置(例如使用十进制gps坐标时)。不幸的是，我正在努力寻找正确的公式来获取相机(x，y，z)的正确位置。

我迄今为止的尝试如下： https://jsfiddle.net/hg474d6r/7/ ( _handleMove函数是相关的)

黑点是中心，供您参考。红点应保持静态-相对于地图-但实际上并没有。

这个公式/“计算”只是有一个小问题，还是这种方法根本行不通？

更新：在fiddle中更新了进展等信息。

- newBee

---

嗨，我正在解决基本上相同的问题...你真的找到了解决方案吗？ - jaronimoe

@jaronimoe 没有，但我改用了Mapbox GL。它原生支持例如立体效果等功能，正好满足我的使用场景需求。此外，Mapbox也可以直接进行视角倾斜和旋转。你仍然可以尝试将Mapbox与Three.js图层叠加（当然这会遇到与Leaflet类似的问题）。 - newBee

实际上我不需要任何3D功能，而是需要GPU的强大支持来进行大规模数据可视化 - 因此需要绘制大量基本图形，如点和线。但我会检查它是否也支持这些功能。谢谢！ - jaronimoe

Answer 1

我回复有点晚，但是当我想要做类似的事情时，我偶然发现了这个，而且我成功地让你的例子工作了。看起来相机的距离/高度是问题所在。

在示例的第139行中，用以下公式替换距离计算，红点将保持静态：

var dist = Math.abs((height * 0.5) / Math.tan(fovRad * 0.5));

- Daniel Lundberg

Answer 2

看起来相机将指向一个固定点。 如果移动相机，则相机向量的方向将更改。 因此，您将看到这种视差效果。

- Heinz Georg Spengler