下面给你一份**「Three.js 三维地图可视化」系统实战指南**，从原理 → 技术选型 → 核心实现 → 示例代码，一次讲清楚，适合你做 3D 地图、可视化大屏、城市数字孪生、数据展示。

一、Three.js 三维地图可视化是什么？

Three.js + 地图 = 自由度最高的 3D 地理可视化方案

它不是“自带地图”的方案，而是：

Three.js 负责三维渲染
地图数据（GeoJSON / 瓦片 / 高程）你自己控制

所以它特别适合：

  • 🌌 科幻 / 未来风地图
  • 🧠 数据驱动的 3D 城市
  • 📊 可视化大屏
  • 🎮 游戏化地理场景

二、Three.js 做三维地图的核心思路（很重要）

核心逻辑一句话版

把地图当成几何模型来渲染

常见数据来源

数据类型用途
GeoJSON行政区边界
经纬度点位数据
DEM 高程地形起伏
建筑数据楼宇拉伸
瓦片地图底图

三、Three.js 三维地图常见实现方式（主流）

✅ 方式 1：GeoJSON → 3D 地图（最常用）

适合：中国地图 / 省市地图 / 区域地图

实现步骤

  1. 加载 GeoJSON
  2. 经纬度 → 平面坐标
  3. Shape 拉伸成 3D
  4. 加光照、材质、动画

效果

  • 3D 中国地图
  • 行政区立体边界
  • 数据驱动高度 / 颜色

✅ 方式 2：Three.js + 地图瓦片（更真实）

适合：真实城市 / 卫星地图

  • Mapbox 瓦片
  • 高德 / OpenStreetMap
  • 将瓦片贴成 Plane

📌 难点：
坐标转换 + 层级控制

✅ 方式 3：Three.js + 高程地形（高端）

适合：山地 / 地理 / 数字孪生

  • DEM 数据
  • PlaneGeometry + 高度贴图
  • 顶点位移

四、核心技术点（一定要懂）

1️⃣ 经纬度 → Three.js 坐标

function lngLatToVector3(lng, lat) {
  const x = lng * 100;
  const y = lat * 100;
  return new THREE.Vector3(x, -y, 0);
}

实际项目一般要 墨卡托投影 或 Mapbox 投影

2️⃣ GeoJSON 拉伸成 3D 地图（核心）

const shape = new THREE.Shape(points);
const geometry = new THREE.ExtrudeGeometry(shape, {
  depth: 10,
  bevelEnabled: false
});

3️⃣ 光照 & 材质（决定质感）

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(100, 200, 300);
scene.add(light);

4️⃣ 数据驱动高度（可视化关键）

geometry.translate(0, 0, value * 5);

五、完整示例：Three.js 3D 中国地图（简化版）

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, innerWidth/innerHeight, 1, 10000);
camera.position.set(0, -200, 300);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

// 光照
scene.add(new THREE.AmbientLight(0x404040));
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(200, 200, 300);
scene.add(light);

// 示例区域
const shape = new THREE.Shape([
  new THREE.Vector2(-50, -50),
  new THREE.Vector2(50, -50),
  new THREE.Vector2(50, 50),
  new THREE.Vector2(-50, 50)
]);

const geometry = new THREE.ExtrudeGeometry(shape, {
  depth: 20,
  bevelEnabled: false
});

const material = new THREE.MeshStandardMaterial({
  color: 0x1e90ff
});

const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

function animate() {
  requestAnimationFrame(animate);
  mesh.rotation.z += 0.002;
  renderer.render(scene, camera);
}
animate();
</script>

六、Three.js 地图常见视觉效果

  • 🟦 行政区立体拉伸
  • 🌈 数值渐变着色
  • ✨ 边界发光线
  • 🚀 飞线动画
  • 🔵 点位波纹
  • 📊 柱状 / 热力叠加

七、Three.js vs Cesium vs Mapbox

方案优点缺点
Three.js自由度最高地理要自己算
Cesium专业 GIS学习成本高
Mapbox快 & 美自定义受限

👉 科幻 / 大屏 / 创意展示：选 Three.js