尧图网页设计 
map3d 坐标投影详解经纬度坐标如何精准映射到 Three.js 3D 世界【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3dmap3d 是一个基于 React-Three-FiberR3F的 3D 城市地图生成项目它读取 OpenStreetMap 的经纬度坐标数据通过一套轻量级的坐标投影算法把真实世界的建筑物和道路精准地搬进 Three.js 的 3D 世界。本文将带你完整拆解这套投影原理——为什么经纬度不能直接塞给 Three.js、map3d 用了什么数学技巧、以及一个坐标点从地图选框到 3D 渲染的完整旅程。为什么经纬度不能直接用作 3D 坐标这是所有 3D 地球/地图项目的第一个拦路虎 对比项经纬度坐标WGS84Three.js 坐标系数学模型球面坐标角度笛卡尔直角坐标单位长度单位度°且经度 1° 的实际距离随纬度变化无单位的世界空间长度取值范围纬度 -90~90经度 -180~180任意实数直接后果如果你把(lat, lng)原封不动当成(x, z)世界会歪掉——因为赤道上 1° 经度约 111.32 km而在纽约北纬 40.8°只有约 84 km。不修正的话城市会被横向压扁。核心技巧本地平面近似 等比缩放map3d 的做法是 3D 地图领域最经典的小范围平面化方案。整个投影核心就在 Space.tsx 中const scale 51000; function project(lat: number, lng: number) { const x (lng - refLng) * scale * Math.cos((refLat * Math.PI) / 180); const y (lat - refLat) * scale; return new THREE.Vector2(x, y); }对应源码见 project 函数 和 scale 常量。拆开看只有 3 步减去参考中心refLat/refLng取用户选框的正中心见 refLat 计算。这样所有坐标都围绕 0 展开数值小而精确避免浮点精度抖动经度乘以 cos(纬度)修正越往北经度越短的球面收缩保证上下左右比例一致城市不会变形统一乘以 scale 51000把度换算成 Three.js 世界单位决定场景的整体比例尺。 为什么敢把地球当平面因为你选中的只是一小块城区默认视口见 areaStore.ts。在小范围内地球曲率误差远小于建筑建模本身的误差平面近似完全够用。建筑与道路同一个投影的两种用法投影函数输出的Vector2(x, y)会分别喂给两类几何体 建筑挤出体在 Space 组件 中建筑轮廓的每个经纬度顶点都先经project转成平面点拼成THREE.Shape再用ExtrudeGeometry沿 Z 轴挤出成体块。高度来自 OpenStreetMap 标签优先取building:levels × 2.2米其次height标签都缺失时兜底 10 米见 areaData 逻辑。最后建筑网格整体旋转 -90°rotation 配置让原本竖着的挤出体平躺在地面上。️ 道路折线Roads 组件 对每条道路的每个点执行同样的投影再转成三维坐标Vector3(x, 0.1, -y)见 points 转换。这里有两个细节值得注意z 轴取负号-v.y地图里纬度向北增大而 Three.js 默认相机朝向 -Z翻转一下正好让北指向屏幕深处方向感与 2D 地图一致y 0.1 抬升让绿色道路线悬浮在地面之上 0.1 个单位避免与地面共面产生闪烁Z-fighting。Roads 组件还自己重新计算了一遍参考中心refLat/refLng与 Space 组件保持同一原点保证建筑和道路严丝合缝地叠在一起。完整数据流从鼠标拖选到 3D 渲染整条链路非常清晰值得画出来看Leaflet 2D 地图拖框 → 选区中心点存入 Zustand → Overpass API 拉取建筑/道路 → project() 投影 → R3F 渲染拖框选区用户在 SelectMap.tsx 的 Leaflet 地图中拖出矩形onDone 回调 把东北角 西南角两个经纬度坐标传出存入全局状态App.tsx 接收后调用setCenter写入 areaStore.ts这个中心点就是投影原点拉取真实数据项目通过 Overpass API 查询选区内带building和highway标签的要素建筑查询见 App.tsx道路查询见 Roads 请求每个要素返回一串{lat, lng}顶点投影并渲染所有顶点经project换算后建筑成为挤出网格、道路成为线段汇入同一个 R3F 场景Space 场景还能一键导出为 GLB 模型文件。这套方案没有引入复杂的墨卡托投影或投影库仅用一个三角函数就完成了经纬度到 3D 世界的精准映射——正是够用且简单的工程智慧。本地运行体验坐标投影git clone https://gitcode.com/gh_mirrors/map/map3d cd map3d npm install npm run dev启动后在 2D 地图上框选任意城区你就能亲眼看到经纬度数据如何站起来变成 3D 城市。想深入阅读投影源码从 Space.tsx 入手即可全文不到 500 行核心投影逻辑只需 5 行代码 ⚡【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 map3d 坐标投影详解：经纬度坐标如何精准映射到 Three.js 3D 世界
map3d 坐标投影详解经纬度坐标如何精准映射到 Three.js 3D 世界【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3dmap3d 是一个基于 React-Three-FiberR3F的 3D 城市地图生成项目它读取 OpenStreetMap 的经纬度坐标数据通过一套轻量级的坐标投影算法把真实世界的建筑物和道路精准地搬进 Three.js 的 3D 世界。本文将带你完整拆解这套投影原理——为什么经纬度不能直接塞给 Three.js、map3d 用了什么数学技巧、以及一个坐标点从地图选框到 3D 渲染的完整旅程。为什么经纬度不能直接用作 3D 坐标这是所有 3D 地球/地图项目的第一个拦路虎 对比项经纬度坐标WGS84Three.js 坐标系数学模型球面坐标角度笛卡尔直角坐标单位长度单位度°且经度 1° 的实际距离随纬度变化无单位的世界空间长度取值范围纬度 -90~90经度 -180~180任意实数直接后果如果你把(lat, lng)原封不动当成(x, z)世界会歪掉——因为赤道上 1° 经度约 111.32 km而在纽约北纬 40.8°只有约 84 km。不修正的话城市会被横向压扁。核心技巧本地平面近似 等比缩放map3d 的做法是 3D 地图领域最经典的小范围平面化方案。整个投影核心就在 Space.tsx 中const scale 51000; function project(lat: number, lng: number) { const x (lng - refLng) * scale * Math.cos((refLat * Math.PI) / 180); const y (lat - refLat) * scale; return new THREE.Vector2(x, y); }对应源码见 project 函数 和 scale 常量。拆开看只有 3 步减去参考中心refLat/refLng取用户选框的正中心见 refLat 计算。这样所有坐标都围绕 0 展开数值小而精确避免浮点精度抖动经度乘以 cos(纬度)修正越往北经度越短的球面收缩保证上下左右比例一致城市不会变形统一乘以 scale 51000把度换算成 Three.js 世界单位决定场景的整体比例尺。 为什么敢把地球当平面因为你选中的只是一小块城区默认视口见 areaStore.ts。在小范围内地球曲率误差远小于建筑建模本身的误差平面近似完全够用。建筑与道路同一个投影的两种用法投影函数输出的Vector2(x, y)会分别喂给两类几何体 建筑挤出体在 Space 组件 中建筑轮廓的每个经纬度顶点都先经project转成平面点拼成THREE.Shape再用ExtrudeGeometry沿 Z 轴挤出成体块。高度来自 OpenStreetMap 标签优先取building:levels × 2.2米其次height标签都缺失时兜底 10 米见 areaData 逻辑。最后建筑网格整体旋转 -90°rotation 配置让原本竖着的挤出体平躺在地面上。️ 道路折线Roads 组件 对每条道路的每个点执行同样的投影再转成三维坐标Vector3(x, 0.1, -y)见 points 转换。这里有两个细节值得注意z 轴取负号-v.y地图里纬度向北增大而 Three.js 默认相机朝向 -Z翻转一下正好让北指向屏幕深处方向感与 2D 地图一致y 0.1 抬升让绿色道路线悬浮在地面之上 0.1 个单位避免与地面共面产生闪烁Z-fighting。Roads 组件还自己重新计算了一遍参考中心refLat/refLng与 Space 组件保持同一原点保证建筑和道路严丝合缝地叠在一起。完整数据流从鼠标拖选到 3D 渲染整条链路非常清晰值得画出来看Leaflet 2D 地图拖框 → 选区中心点存入 Zustand → Overpass API 拉取建筑/道路 → project() 投影 → R3F 渲染拖框选区用户在 SelectMap.tsx 的 Leaflet 地图中拖出矩形onDone 回调 把东北角 西南角两个经纬度坐标传出存入全局状态App.tsx 接收后调用setCenter写入 areaStore.ts这个中心点就是投影原点拉取真实数据项目通过 Overpass API 查询选区内带building和highway标签的要素建筑查询见 App.tsx道路查询见 Roads 请求每个要素返回一串{lat, lng}顶点投影并渲染所有顶点经project换算后建筑成为挤出网格、道路成为线段汇入同一个 R3F 场景Space 场景还能一键导出为 GLB 模型文件。这套方案没有引入复杂的墨卡托投影或投影库仅用一个三角函数就完成了经纬度到 3D 世界的精准映射——正是够用且简单的工程智慧。本地运行体验坐标投影git clone https://gitcode.com/gh_mirrors/map/map3d cd map3d npm install npm run dev启动后在 2D 地图上框选任意城区你就能亲眼看到经纬度数据如何站起来变成 3D 城市。想深入阅读投影源码从 Space.tsx 入手即可全文不到 500 行核心投影逻辑只需 5 行代码 ⚡【免费下载链接】map3d️ Generate City 3D map with R3F. Include building and road information.项目地址: https://gitcode.com/gh_mirrors/map/map3d创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考