使用 map3d 一键生成数字孪生的城市三维白模

做数字孪生、城市一张图、园区巡检、无人机航测成果展示这类业务时，经常需要展示城市白模。传统GIS数据处理流程多是桌面软件里拼模型、再导到引擎里，调试和协作成本都不低。若能在浏览器里快速拉一块范围、把建筑与道路变成可旋转查看的三维场景，甚至直接导出通用三维格式给别的系统用，对很多 GIS 与 Web 可视化场景会省心不少。

近年来 Web 端三维技术栈越来越成熟，把开源地图数据与前端渲染打通的项目也逐渐多起来。小编这几天小编发现了一个很火的项目 cartesiancs/map3d ，可以将 OSM 数据一键生成城市三维白模并导出 GLB 数据格式。今天就给大家介绍一下。

PS：这个项目目前还在开发阶段，已有1.5K 的 Star，热度还是很高的，大家可以关注下后续的功能迭代。

map3d 简介

map3d 是一个在网页里生成真实世界风格城市三维地图的前端项目，技术主线是 React + React Three Fiber，也就是常说的 R3F，底层用 Three.js 做渲染。数据侧依赖 OpenStreetMap，把道路与建筑等要素抽出来建成三维几何体。项目功能可免费使用，并支持将结果导出为 GLB，方便再丢进数字孪生、三维引擎或别的工具链里继续加工。

官网与源码仓库：https://github.com/cartesiancs/map3d

在线体验地址：https://map.fleet.im

核心特点

map3d的定位更倾向于项目演示、展示Demo等，追求小而快，而不是替代完整 BIM 或精细城市建模流程。目前已经实现了几项核心需求：三维建筑显示、道路三维化，以及将整个场景导出为 GLB。这三项对想把简单的把二维矢量“立起来”展示的用户来说已经足够形成闭环。技术选型上叠加了 Leaflet、react-leaflet 与 Vite，再配合 zustand 做状态管理、axios 拉取数据，整体是典型现代前端 GIS 演示项目的工程化组合。

官方的RoadMap里还能看到建筑贴图、高度与材质的更细粒度定制、地形高度图等。当前版本更偏重几何与导出，后续渲染能力仍有扩展空间。需要注意的是 OSM 里建筑高度等属性在不同地区完整度差异很大，作者也在仓库里用醒目标注说明无法保证高程等数据的准确性，部分建筑可能缺高度或被标错，后续计划中加入用户手动纠偏高度的能力。

使用示例

在线使用（推荐）

直接访问 https://map.fleet.im/，按提示直接下一步下一步就可以了。开头的示例就是小编使用在线的Demo生成的（可以猜测是哪个城市）

本地尝试

本地跑起来与一般 Vite 项目类似。先安装 Node.js，然后在终端克隆仓库并进入目录，安装依赖后启动开发服务即可在浏览器里访问。

可以使用下面命令：git clone https://github.com/cartesiancs/map3d.git，然后进入 map3d 目录执行 npm install。依赖装好后执行 npm run dev 会启动本地开发服务器，终端里会打印可访问的本机地址。若要生成生产构建，可执行 npm run build。

小编尚未在每台机器上做逐一兼容性测试；若在本机首次 npm install 较慢或报版本冲突，可尝试切换 Node 的 LTS 大版本或对 lock 文件与新依赖做一次核对后再装。

总结

总的来说，map3d 把 OSM 数据、基于 R3F 的三维展示和 GLB 导出合在一起，你可以在浏览器里看到大致的三维城市，也能把模型导出来给其他工具继续编辑，很大程度上减少了对大型三维引擎等专业三维软件的依赖。如果是需要写方案、做汇报预览，又不想一开始就用 Unity、Unreal 这类大型三维引擎，或者就想简单跑个WebGIS白模用来演示，可以试试这个项目。

你若用过类似工具或有更稳的工程化做法，欢迎留言讨论。