如何在OpenLayers中实现类似Google Earth的3D建筑视角

你期望的效果如下：

核心实现思路 #

OpenLayers通过WebGL渲染引擎支持3D效果，主要有两种方式实现建筑的3D视角：加载Cesium 3D Tiles格式的预制3D建筑数据，或者基于带高度属性的矢量数据做拉伸渲染。以下是具体步骤：

1. 准备适配的数据源 #

• Cesium 3D Tiles格式：这是预制的3D建筑瓦片数据，很多城市的开放数据平台或第三方服务会提供，数据包含建筑的精细3D模型和层级瓦片结构，适合还原真实的建筑外观。
• 带高度属性的矢量数据：比如GeoJSON/Shp格式的建筑轮廓数据，每个要素需要包含height（建筑高度）或base_height（建筑底部高程）属性，适合自定义样式的轻量化3D效果。

2. 初始化支持3D的地图实例 #

必须使用WebGLMap而非普通Map，因为Canvas渲染器不支持3D渲染能力。同时配置允许旋转、俯仰的视图：

import { WebGLMap } from 'ol/webgl';
import View from 'ol/View';

const map = new WebGLMap({
  target: 'map', // 页面中承载地图的DOM元素ID
  view: new View({
    projection: 'EPSG:3857', // Web墨卡托坐标系，适配绝大多数在线瓦片服务
    center: [12015000, 3560000], // 示例坐标（对应杭州区域），替换为你的目标区域坐标
    zoom: 16, // 初始缩放级别，建议16以上清晰显示建筑
    enableRotation: true, // 允许拖拽旋转视角
    enableZoom: true,
    maxZoom: 20,
    pitch: 45 // 初始俯仰角度，模拟斜向俯视视角
  }),
});

3. 添加3D建筑图层 #

方式一：加载Cesium 3D Tiles数据 #

OpenLayers 7+原生支持Cesium 3D Tiles，直接配置图层即可：

import { Cesium3DTilesLayer } from 'ol/layer';
import { Cesium3DTilesSource } from 'ol/source';

const buildingsLayer = new Cesium3DTilesLayer({
  source: new Cesium3DTilesSource({
    url: './tileset.json', // 本地或在线的3D Tiles入口文件地址
  }),
});

map.addLayer(buildingsLayer);

方式二：拉伸矢量建筑数据 #

基于带高度属性的矢量数据，通过WebGL渲染器实现拉伸效果：

import { VectorLayer } from 'ol/layer';
import { VectorSource } from 'ol/source';
import GeoJSON from 'ol/format/GeoJSON';

const buildingsSource = new VectorSource({
  url: './buildings.geojson', // 本地或在线的建筑矢量数据地址
  format: new GeoJSON(),
});

const buildingsLayer = new VectorLayer({
  source: buildingsSource,
  renderer: 'webgl', // 强制使用WebGL渲染器
  style: {
    'fill-extrusion-color': 'rgba(160, 180, 220, 0.8)',
    'fill-extrusion-height': ['get', 'height'], // 从要素的height属性读取高度
    'fill-extrusion-base': ['get', 'base_height'], // 可选：设置建筑底部高程（比如地下建筑）
    'fill-extrusion-opacity': 0.8,
    'stroke-color': '#333',
    'stroke-width': 0.5
  },
});

map.addLayer(buildingsLayer);

4. 优化3D交互体验 #

• OpenLayers默认支持Shift+鼠标拖拽旋转视角，滚轮缩放，拖拽平移，可通过交互控件调整行为：

import { DragRotateAndZoom } from 'ol/interaction';

// 开启拖拽旋转+缩放的交互
map.addInteraction(new DragRotateAndZoom());

• 可通过view.setPitch(angle)动态调整俯仰角度，范围0（俯视）到90（平视）度。

注意事项 #

• 确保浏览器支持WebGL 2.0，老旧浏览器可能无法正常渲染3D效果；
• 大区域3D数据建议做瓦片分级处理，避免加载卡顿；
• Cesium 3D Tiles数据的坐标系需与地图视图一致，若不一致可通过source.setProjection()转换。

内容的提问来源于stack exchange，提问作者user21094806