随着 WebGL 技术的普及，Three.js 成为最主流的三维可视化开发库之一，广泛应用于可视化、游戏、建筑等多个领域。在地理信息系统（GIS）方向，Three.js 也凭借其跨平台、轻量、高扩展性等优势，被广泛用于实现 3D 地图可视化方案。本文将从技术原理出发，系统讲解如何基于 Three.js 构建交互式三维地图，包括数据解析、地形建模、地图拉伸、交互控制、性能优化等方面。

一、Three.js 简介

Three.js 是一款基于 WebGL 封装的 JavaScript 三维引擎，它简化了 WebGL 的复杂操作，提供了丰富的接口，用于实现几何体建模、材质贴图、光照阴影、动画控制等功能。通过与 HTML/CSS、DOM 事件结合，Three.js 可无缝嵌入到网页中，构建高性能的 3D 场景。

二、三维地图可视化的核心流程

三维地图可视化的流程一般包括：

  1. 地理数据加载与解析（如 GeoJSON、TopoJSON）
  2. 地图投影与坐标转换
  3. 三维几何建模（如拉伸、地形建模）
  4. 场景搭建（包括相机、光照、渲染器）
  5. 动画与交互实现（飞线、鼠标控制、数据联动）
  6. 性能优化与响应式布局

三、GeoJSON 数据处理

GeoJSON 是最常用的地图数据格式之一，通常包括 FeatureCollection、Feature、Polygon 等结构。我们可以通过原生 JavaScript 或引入如 D3.js、Turf.js 等库加载 GeoJSON 文件，并提取坐标信息构建地理轮廓。

示例加载代码：

fetch('china.json')
  .then(res => res.json())
  .then(data => drawMap(data));

其中 china.json 为中国省市边界数据，下载来源可以是阿里云 datav.geo 或国家测绘局公开数据。

四、坐标投影与转换

由于地理坐标是经纬度形式（WGS84），而 Three.js 默认使用笛卡尔直角坐标系，需将经纬度转换为平面坐标。最常见的是墨卡托投影（Mercator Projection）：

function lngLatToXYZ(lng, lat) {
  const x = lng * 20037508.34 / 180;
  let y = Math.log(Math.tan((90 + lat) * Math.PI / 360)) / (Math.PI / 180);
  y = y * 20037508.34 / 180;
  return [x / 100000, y / 100000]; // 缩放至适合 Three.js 尺度
}

五、构建拉伸地图几何体

将坐标数组解析成三角面片（ShapeGeometry）后，可以通过 ExtrudeGeometry 拉伸形成三维地图块：

const shape = new THREE.Shape();
coordinates.forEach(([x, y], i) => {
  if (i === 0) shape.moveTo(x, y);
  else shape.lineTo(x, y);
});

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

这里的 height 可依据数据字段设定（如人口密度、GDP等），从而实现数据与三维地图的结合。

六、场景搭建

一个完整的 Three.js 场景包括：

  • 相机（PerspectiveCamera）
  • 控制器（OrbitControls）
  • 光源（AmbientLight、DirectionalLight）
  • 渲染器（WebGLRenderer）
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 10000);
camera.position.set(0, -300, 300);

const controls = new THREE.OrbitControls(camera, renderer.domElement);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

七、实现地图交互与动画

在 Three.js 中我们可以通过 raycaster 实现地图块的鼠标点击、hover 效果，或者结合 TWEEN.js 实现摄像机飞行动画。

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
window.addEventListener('click', (e) => {
  mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    console.log('点击地图区域:', intersects[0].object.name);
  }
});

八、城市建筑模拟与动态数据叠加

除了地图拉伸外，我们还可以加载建筑模型（如 GLTF）、数据图层（如柱状图、散点图、飞线）进行进一步可视化。

  • 使用 GLTFLoader 加载 3D 模型
  • 使用 BufferGeometry 构建点线面
  • 动态数据可通过 socket 或 AJAX 实时更新

九、性能优化技巧

为了在复杂地图或低端设备中保持流畅体验，可采用以下优化策略：

  1. 使用 BufferGeometry 替代 Geometry
  2. 合并网格减少 draw call（THREE.BufferGeometryUtils）
  3. 降低地图分辨率/抽稀坐标点
  4. 使用 LOD（Level of Detail）管理细节级别
  5. 使用 Web Worker/OffscreenCanvas 加速计算

十、总结与拓展

Three.js 在 3D 地图可视化方面提供了强大且灵活的解决方案。从基础的地图拉伸、热力图，到复杂的三维城市模型、数据交互分析，均可实现。对于需要更强大 GIS 能力的场景，可以考虑将 Three.js 与 Cesium、Mapbox、OpenLayers 等结合使用，实现多源数据融合和空间分析。

随着 WebGPU、WebXR 等技术的发展，Three.js 在空间可视化方向也将释放更多潜能。未来我们可以期待结合 AI 推理、数字孪生、大数据可视化等多种能力，构建智能、真实、交互性强的 Web GIS 体验。