map3d 数据获取原理Overpass API 如何高效拉取 OpenStreetMap 建筑与道路数据【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3dmap3d 是一个基于 React-Three-Fiber 的 3D 城市地图生成器它通过 Overpass API 高效拉取 OpenStreetMap 中的建筑与道路数据把真实街区抬升成可交互、可导出的三维城市。本文带你完整拆解这套数据获取原理从地图选区、Overpass QL 查询语句到经纬度投影和高度解析新手也能一看就懂。一张图看懂数据获取全流程 ️整个流程分四步数据像流水线一样逐级加工步骤做什么关键文件① 选区Leaflet 地图上拖拽矩形拿到四角经纬度SelectMap.tsx② 查建筑构造 Overpass QL 查询POST 请求拉取建筑App.tsx③ 查道路3D 场景挂载后单独拉取道路数据Space.tsx④ 渲染经纬度投影为 3D 坐标挤出建筑体块Space.tsx数据最终通过 zustand 全局状态areaStore.ts在选区页和 3D 场景之间传递实现前端拿数、状态中转、场景消费的解耦结构。第一步矩形选区圈出你的3D 地盘打开应用后是一张基于 OpenStreetMap 瓦片底图的 Leaflet 地图。用户按住鼠标拖拽即可画出一个蓝色矩形选区代码通过 SelectMap.tsx 中的useMapEvents监听mousedown/mousemove/mouseup实时记录对角两点坐标并做了跨 ±180° 经线国际日期变更线的归一化处理保证选区经纬度永远合法。选区完成后onDone回调把东北角 西南角两个点传给主应用——这四个经纬度south、west、north、east就是后续所有 Overpass 查询的空间过滤器。 应用还内置了选区大小检查当经纬度跨度之和超过 0.1 度时会弹出区域太大警告见 App.tsx防止一次请求把 Overpass 服务器拖垮——这是使用 Overpass API 时最重要的礼仪。第二步Overpass QL 查询语句逐个词拆解 点击下一步后App.tsx 中的requestBuildings会拼出一条 Overpass QLOpenStreetMap 专用查询语言语句[out:json][timeout:25]; (waybuilding; relationbuilding;); out body geom;每个部分都有明确用途[out:json]—— 指定以 JSON 格式返回前端可直接response.json()解析[timeout:25]—— 允许服务器最多运算 25 秒避免大查询被直接拒绝waybuilding—— 查找选区内所有带building标签的线状/面状要素普通建筑轮廓在 OSM 中都是 wayrelationbuilding—— 同时查找 relation 类型的建筑如带内部结构、屋顶细分的复杂建筑确保不漏数据out body geom—— 返回要素的完整标签tags和完整几何坐标geom这是能直接画出建筑轮廓的关键。请求以 POST 方式发出Content-Type为application/x-www-form-urlencoded查询语句作为 body 发送到 Overpass 官方解析端点https://overpass-api.de/api/interpreter。第三步响应解析与状态存储返回的 JSON 中elements数组就是建筑列表。代码把每个 element 映射为统一的 Building 结构定义见 Processing.tsx{ id, tags, geometry: [{ lat, lng }, ...] }其中tags保留了 OSM 的原始元数据名称、高度、层数、地址等geometry是多边形顶点序列。解析后通过appendAreas写入 areaStore.ts 的全局状态3D 场景组件订阅该 store选区页与渲染页由此完成数据交接——这正是 zustand 状态管理在数据流中的价值。第四步道路数据的延迟拉取设计 ️一个容易忽略的细节道路并不是和建筑一起拉取的。当 3D 场景Space真正挂载、且选区确定后Space.tsx 中的Roads组件才发起第二条 Overpass 查询[out:json][timeout:25];(wayhighway;);out body geom;区别在于标签从building换成了highway且只查 way道路没有 relation 形态。这种按需二次请求让首屏只等建筑数据道路在 3D 视图阶段异步补齐并渲染为绿色线条用户体验更流畅。 注意拉取 OSM 数据用的是浏览器原生fetch而 axios.ts 中配置的 axios 实例是留给 Fleet 平台上传 GLB 模型用的——两条网络通道各司其职不要混淆。坐标投影经纬度如何变成 3D 坐标 拿到经纬度后不能直接塞进 Three.js。Space.tsx 实现了一个本地等距圆柱投影以选区中心为原点scale 51000约 1 度经纬度 ≈ 51000 个场景单位经度方向乘以cos(refLat)做纬度收敛修正让东西方向长度不失真建筑轮廓投影后构造成THREE.Shape再配合extrudeGeometry沿 Y 轴拉伸成立体块。建筑高度从哪来三层兜底策略 OSM 数据质量参差高度值经常缺失。Space.tsx 中的areaData采用三级兜底优先读tags.height米为单位没有高度但有building:levels楼层数时按层数 × 2.2 米估算两者都缺失时给一个 10 米的默认值——保证任何建筑都有实体不会出现贴地一片。核心要点回顾 ✅查询语言Overpass QL 用[out:json][timeout:25] 标签 边界框三元组精准圈定数据范围两类请求建筑way relation在选区确认后拉取道路way highway在 3D 场景挂载时延迟拉取数据中转elements → {id, tags, geometry}统一结构经 zustand store 跨组件传递渲染管线本地投影 Shape 挤出 高度兜底最终产出可导出 GLB 的三维城市。理解这套Overpass API OSM 数据的获取原理后你完全可以照搬同样的模式为自己关心的任何街区生成一份 3D 地图 ️【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 map3d 数据获取原理：Overpass API 如何高效拉取 OpenStreetMap 建筑与道路数据
map3d 数据获取原理Overpass API 如何高效拉取 OpenStreetMap 建筑与道路数据【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3dmap3d 是一个基于 React-Three-Fiber 的 3D 城市地图生成器它通过 Overpass API 高效拉取 OpenStreetMap 中的建筑与道路数据把真实街区抬升成可交互、可导出的三维城市。本文带你完整拆解这套数据获取原理从地图选区、Overpass QL 查询语句到经纬度投影和高度解析新手也能一看就懂。一张图看懂数据获取全流程 ️整个流程分四步数据像流水线一样逐级加工步骤做什么关键文件① 选区Leaflet 地图上拖拽矩形拿到四角经纬度SelectMap.tsx② 查建筑构造 Overpass QL 查询POST 请求拉取建筑App.tsx③ 查道路3D 场景挂载后单独拉取道路数据Space.tsx④ 渲染经纬度投影为 3D 坐标挤出建筑体块Space.tsx数据最终通过 zustand 全局状态areaStore.ts在选区页和 3D 场景之间传递实现前端拿数、状态中转、场景消费的解耦结构。第一步矩形选区圈出你的3D 地盘打开应用后是一张基于 OpenStreetMap 瓦片底图的 Leaflet 地图。用户按住鼠标拖拽即可画出一个蓝色矩形选区代码通过 SelectMap.tsx 中的useMapEvents监听mousedown/mousemove/mouseup实时记录对角两点坐标并做了跨 ±180° 经线国际日期变更线的归一化处理保证选区经纬度永远合法。选区完成后onDone回调把东北角 西南角两个点传给主应用——这四个经纬度south、west、north、east就是后续所有 Overpass 查询的空间过滤器。 应用还内置了选区大小检查当经纬度跨度之和超过 0.1 度时会弹出区域太大警告见 App.tsx防止一次请求把 Overpass 服务器拖垮——这是使用 Overpass API 时最重要的礼仪。第二步Overpass QL 查询语句逐个词拆解 点击下一步后App.tsx 中的requestBuildings会拼出一条 Overpass QLOpenStreetMap 专用查询语言语句[out:json][timeout:25]; (waybuilding; relationbuilding;); out body geom;每个部分都有明确用途[out:json]—— 指定以 JSON 格式返回前端可直接response.json()解析[timeout:25]—— 允许服务器最多运算 25 秒避免大查询被直接拒绝waybuilding—— 查找选区内所有带building标签的线状/面状要素普通建筑轮廓在 OSM 中都是 wayrelationbuilding—— 同时查找 relation 类型的建筑如带内部结构、屋顶细分的复杂建筑确保不漏数据out body geom—— 返回要素的完整标签tags和完整几何坐标geom这是能直接画出建筑轮廓的关键。请求以 POST 方式发出Content-Type为application/x-www-form-urlencoded查询语句作为 body 发送到 Overpass 官方解析端点https://overpass-api.de/api/interpreter。第三步响应解析与状态存储返回的 JSON 中elements数组就是建筑列表。代码把每个 element 映射为统一的 Building 结构定义见 Processing.tsx{ id, tags, geometry: [{ lat, lng }, ...] }其中tags保留了 OSM 的原始元数据名称、高度、层数、地址等geometry是多边形顶点序列。解析后通过appendAreas写入 areaStore.ts 的全局状态3D 场景组件订阅该 store选区页与渲染页由此完成数据交接——这正是 zustand 状态管理在数据流中的价值。第四步道路数据的延迟拉取设计 ️一个容易忽略的细节道路并不是和建筑一起拉取的。当 3D 场景Space真正挂载、且选区确定后Space.tsx 中的Roads组件才发起第二条 Overpass 查询[out:json][timeout:25];(wayhighway;);out body geom;区别在于标签从building换成了highway且只查 way道路没有 relation 形态。这种按需二次请求让首屏只等建筑数据道路在 3D 视图阶段异步补齐并渲染为绿色线条用户体验更流畅。 注意拉取 OSM 数据用的是浏览器原生fetch而 axios.ts 中配置的 axios 实例是留给 Fleet 平台上传 GLB 模型用的——两条网络通道各司其职不要混淆。坐标投影经纬度如何变成 3D 坐标 拿到经纬度后不能直接塞进 Three.js。Space.tsx 实现了一个本地等距圆柱投影以选区中心为原点scale 51000约 1 度经纬度 ≈ 51000 个场景单位经度方向乘以cos(refLat)做纬度收敛修正让东西方向长度不失真建筑轮廓投影后构造成THREE.Shape再配合extrudeGeometry沿 Y 轴拉伸成立体块。建筑高度从哪来三层兜底策略 OSM 数据质量参差高度值经常缺失。Space.tsx 中的areaData采用三级兜底优先读tags.height米为单位没有高度但有building:levels楼层数时按层数 × 2.2 米估算两者都缺失时给一个 10 米的默认值——保证任何建筑都有实体不会出现贴地一片。核心要点回顾 ✅查询语言Overpass QL 用[out:json][timeout:25] 标签 边界框三元组精准圈定数据范围两类请求建筑way relation在选区确认后拉取道路way highway在 3D 场景挂载时延迟拉取数据中转elements → {id, tags, geometry}统一结构经 zustand store 跨组件传递渲染管线本地投影 Shape 挤出 高度兜底最终产出可导出 GLB 的三维城市。理解这套Overpass API OSM 数据的获取原理后你完全可以照搬同样的模式为自己关心的任何街区生成一份 3D 地图 ️【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考