插件安装
本插件为TVT.js平台深度定制开发的源码包,如需在其他平台集成使用,建议进行适配性调整以实现最佳兼容效果。
1、点击右侧插件包下载,得到: 'map2BuildingRoad.zip' , 并放在 `icegl-three-vue-tres/pluginMaker/install/`
2、请使用命令终端,自行定位到您电脑的目录
cd /icegl-three-vue-tres/
3、输入命里,安装插件
yarn plugin.marker install map2BuildingRoad
4、启动预览模式即可:
yarn pre.dev
插件介绍
插件依赖库:leaflet
请安装完插件后,运行:命令安装前端库
yarn add leaflet@^1.9.4 && yarn add -D @types/leaflet@^1.9.21
核心功能
- 地图选区:内置南京默认区域,也可以在 OpenStreetMap 底图上手动框选范围。
- OSM 数据获取:通过 Overpass API 获取建筑轮廓、建筑高度、道路中心线等基础数据。
- 3D 白模生成:将建筑轮廓转换为挤出几何体,将道路转换为带宽度的平面网格。
- 合并网格渲染:按建筑高度分层合并 Mesh,减少场景对象数量,提升预览效率。
- 风格切换:提供高度、墨线、蓝图、暖灰等几套基础材质风格。
- JSON 查看:可以查看原始接口数据、中间标准化数据、场景摘要和 3D Tiles 摘要。
- GLB 导出:支持将当前生成的建筑与道路模型导出为 GLB,方便进入后续工具链。
使用流程
- 打开插件页面后,默认会选中南京一块示例区域。
- 点击“生成 3D”,插件会请求 OSM 数据并生成建筑道路模型。
- 如需自定义区域,可以先点击“框选”,在地图上拖拽选择范围。
- 生成完成后,可以切换风格、查看 JSON,或导出 GLB。
为避免请求和建模过慢,当前选区面积限制为 200 平方公里以内。实际使用时建议优先选择小范围街区进行测试。
数据说明
插件使用 OpenStreetMap 的公开数据,数据完整度与建筑高度信息取决于当地 OSM 标注质量。如果建筑没有明确高度,会使用默认高度;如果存在 building:levels,会按楼层数估算高度。
道路宽度目前根据 highway 类型做简单映射,后续可以继续细化不同道路等级、道路材质、车道线和交通设施。