Three.js + 传单 = 3D 地图？答案

【问题标题】：Three.js + leaflet = 3D maps?Three.js + 传单 = 3D 地图？
【发布时间】：2013-07-14 23:43:38
【问题描述】：

这可能是一项艰巨的任务，但我正在寻找可以帮助我使用传单创建 3D 地图的东西。我已经准备好并运行传单，我只想将它们转换为 3D 透视图。

我这样做的唯一目的是以 3D 显示建筑物。我已经用过OSM Buildings，但它们不是真正的 3D。

我还找到了 Pelican Mapping 的 ReadyMap，它已经支持 Leaflet，但我无法让这个 API 成功运行，因为他们有一段时间没有更新它。我已经在他们的 Github 上询问过，所以到目前为止，这条路并没有太多的消息，除非我能弄清楚如何解决 ReadyMap 问题（他们的 src 有数万行）。我也不知道 OSM 建筑物是否可以与 ReadyMap 一起使用。

所以现在，我正在寻找其他选择。我最大的两个前景是

Cesium AGI

和

Three.js

我基本上希望我的最终结果看起来像这样：

转到here，然后点击右侧的“地球”。

任何帮助将不胜感激！

【问题讨论】：

您是否找到任何合适的解决方案，尤其是对于 2.5D 地图（不是图像）？谢谢
@knutole 3D 部分 - i306.photobucket.com/albums/nn255/Krb686/cest_3d_1.png
我有一段时间没看这个了。我刚回到它，不幸地发现我的地图贴图提供者不再提供免费访问。我将尝试替换 tile 提供程序并为你们指出一个工作演示
@Spencer 为了区分 2D 和 3D，我实际上在一个名为 content 的 div 中使用了两个名为 2dcontainer 和 3dcontainer 的 div 元素。它们都重叠。一个是隐藏的，另一个不是。当然，我将传单绑定到2dcontainer，并将三个.js 绑定到3dcontainer。然后我使用 dat.gui 创建一个控件并允许在 2 个 div 之间切换。所以说实话，我不会说我实际上将全 3D 与传单集成，因为当我切换到 3D 模式时，它本质上只是一个 three.js 视口，恰好使用完全相同的地图文件作为基础纹理。
@Spencer 但是在“2D”模式下，我使用 OSM 建筑物来提供某种维度。

标签： javascript map 3d three.js leaflet

【解决方案1】：

有一个东西叫F4 Map，但是关于这个项目的信息不多。详情请查看OSM wiki。

地图示例：Moscow

【讨论】：

【解决方案2】：

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

（我是主要作者）

【讨论】：

嘿，您的用户名与该项目的主要作者一致，如果这不是巧合，您可以提一下。（不过图书馆不错）
@jrtapsell 是的，我是主要作者，如有打扰请见谅：P
很棒的图书馆！使用简单的传单背景图块超级容易创建 3D 线（纬度、经度、高度）：maptalks.org/examples/en/3d/line-draw-altitude/…

【解决方案3】：

我和一些大学在大学项目期间为 Leaflet 创建了 3D 插件。

你可以在这里查看：

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

它是用 WebGL 创建的（基本上是 Three.js，周围的东西更少）。我想分享的链接包含用于放置 3D-Stuff 的重要数学：

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

3D 模型由 OSM 数据生成和/或在 Blender 中建模。渲染是简单的平面阴影照明。这方面的教程很多。

如果有任何具体问题，尽管问。

【讨论】：

【解决方案4】：

您可能需要检查new version of OSMBuildings，这是真正的 3D。

【讨论】：