【问题标题】:I want to use Google Maps API, but with 3D buildings on my React.JS code我想使用 Google Maps API,但我的 React.JS 代码上有 3D 建筑
【发布时间】:2019-06-25 06:09:16
【问题描述】:

我想做的是创建我大学的地图,但我希望它是 3D 的,所以如果有人想在 3 楼寻找特定的教室,他可以旋转地图并查看它,而不是 Google Maps API 2D 选项,您可以从上面看到它。这里的事情是我在 JS 代码上需要它,所以我可以在我的 React.js 项目中使用它,我期待从数据库中生成地图内的每个点。因为我希望用户能够使用过滤器框,所以他可以搜索特定点,并使用坐标定位它。 我正在尝试使用巴比伦,但这个演示太重了:

https://axeon.fr/CLIENT/EIFFAGE/Bordeaux.Hyperion/#/MAQUETTE_RT/index.html

我的第一个想法来自 Google Maps API,需要做同样的事情,但使用 3D 建筑。

【问题讨论】:

  • 图书馆推荐在这里是题外话;请参阅How to Askhelp center 中的其他材料。
  • 哦,抱歉,感谢您的更新

标签: javascript reactjs firebase google-maps-api-3


【解决方案1】:

您可以使用任何您喜欢的 API 在 2D 中显示您的地图,并在地图上为您预定义的兴趣点 (POI) 定义图钉。单击后,您可以将视图更改为 3D 模式并显示附加到 3D 渲染引擎的画布,例如 Babylon,它负责显示建筑物以及您希望为用户提供的所有 3D 交互。在任何时间点,用户都可以在 2D 地图和 3D 场景之间切换,然后去选择另一个 POI。基本上,2D 地图组件只是将 POI ID 传递给 3D 组件并加载所需的形状。此外,看看cesium 可能是个好主意,这是一个用于世界级 3D 地球仪和地图的开源 JavaScript 库。

【讨论】:

  • 哦!这样一来,就不需要渲染整个 3D 地图,只需要渲染特定 POI 上的建筑物,对吧?
  • 是的,如果您使用的是 Babylon,您只需将 POI ID 传递给组件,然后初始化您的 Babylon 场景并导入/绘制您的网格并连接必要的事件并在“2D 切换地图”上按钮,你处理你的网格并进行适当的清理以释放内存,最后摆脱画布。我不知道为什么我在这个答案上得到一个否定点?!
  • 谢谢哈米德!好主意,我会试试看。不确定是否有负面影响,但我已选择您的答案作为我的解决方案。谢谢,真的!
猜你喜欢
  • 2014-05-11
  • 1970-01-01
  • 1970-01-01
  • 2016-04-20
  • 2021-08-18
  • 2022-12-01
  • 1970-01-01
  • 2018-09-02
  • 1970-01-01
相关资源
最近更新 更多