Three.js + leaflet = 3D地图？

Question

这可能是一项相当庞大的任务，但我正在寻找可以帮助我使用leaflet创建3D地图的工具。我已经成功启动了Leaflet，现在只需要将它们转换为3D透视图。

我的唯一目的是显示建筑物的3D效果。我已经使用过OSM Buildings，但它们不是真正的3D。

我还发现Pelican Mapping的ReadyMap已经支持Leaflet，但我无法成功使用此API，因为它们很长时间没有更新了。我已经在他们的Github上提出了问题，所以目前没有什么结果，除非我能找出如何解决ReadyMap的问题（他们的src有成千上万行）。我也不知道OSM Buildings是否与ReadyMap兼容。

所以现在，我正在寻找其他任何选择。我最看好的两个方案是：

Cesium AGI

和

Three.js

我想要的最终效果基本上应该类似于这样：

请转到这里，然后在右侧单击“地球”。

任何帮助都将不胜感激！

- krb686

---

@knuthole 是的，我确实做到了，尽管它不像我想象的那样流畅。我最终使用了几个JS库，即dat.gui、three.js和leaflet。在leaflet中，我创建了一个标准地图，并插入了OSM建筑结构，然后在此基础上创建了一个带有dat.gui的UI面板，以允许在“2.5D”和3D界面之间切换。对于3D部分，我不得不手动下载地图瓦片，在three.js中创建一个平面表面并应用地图图像，并手动创建一些建筑形状并应用纹理。 - krb686

@knutole 3D 部分 - http://i306.photobucket.com/albums/nn255/Krb686/cest_3d_1.png - krb686

我有一段时间没有看过这个了。我刚回来发现，我的地图瓦片提供商不再提供免费访问。我将尝试更换地图瓦片提供商，并向你们展示一个可用的演示。 - krb686

@Spencer 对于2D和3D之间的区别，我实际上在名为“content”的div中使用了2个名为“2dcontainer”和“3dcontainer”的div元素，并且它们重叠在一起。其中一个被隐藏，另一个没有。当然，我将leaflet绑定到“2dcontainer”，将three.js绑定到“3dcontainer”。然后我使用dat.gui创建控件并允许在2个div之间切换。所以说，实际上我不能说我真正地将完整的3D与leaflet集成在一起，因为当我切换到3D模式时，它本质上只是一个three.js视口，恰好使用相同的地图文件作为基础纹理。 - krb686

@Spencer 但是在“2D”模式下，我使用OSM建筑物来提供一定的维度。 - krb686

Answer 1

我和一些同事在大学项目期间创建了一个用于Leaflet的3D插件。

你可以在这里查看:

https://mocainfo.thm.de/building-3d/（左上角是3D按钮）

它是使用WebGL创建的（基本上是Three.js，但少了一些杂乱的东西）。我想要分享的链接包含了用于放置3D物体的重要数学知识:

http://bl.ocks.org/Sumbera/c6fed35c377a46ff74c3

这些3D模型是从OSM数据中生成的，或者是在Blender中建模的。渲染是采用简单的平面着色光照。有很多相关的教程。

如果有任何具体问题，可以随时提出。

- TheXappy

Answer 2

你可以查看 maptalks，这是一个用于创建集成2D/3D地图的JavaScript库。

(我是主要作者)

- fuzhenn

---

嘿，你的用户名与该项目的主要作者匹配，如果这不是巧合，请说明一下。（不过，这是个不错的库） - jrtapsell

@jrtapsell，是的，我是主要作者，如果有任何打扰请原谅 :P - fuzhenn

很棒的库！使用简单的leaflet背景瓦片，可以轻松创建带有经度、纬度和高度的3D线条：https://maptalks.org/examples/en/3d/line-draw-altitude/#3d_line-draw-altitude - DivideByZero

Answer 3

有一个叫做F4 Map的东西，但对于这个项目没有太多的信息。可以查看OSM wiki了解一些细节。

地图示例：莫斯科

- yarl

Answer 4

您可能想要查看OSMBuildings的新版本，它是真正的3D。

- Jose Gómez