3.4 WebGL 图层

TIP

WebGL 图层利用 GPU 加速渲染，适合处理大量数据。本节介绍 OpenLayers 10.x 中的 WebGLVectorLayer 和扁平样式格式的最新用法。

WebGL 图层概述

WebGL 图层使用 GPU 进行硬件加速渲染，能够高效处理大量矢量数据。OpenLayers 10.x 中引入了重要的 API 变更。

重要变更（Context7 验证）

API 变更历史

• ❌ 旧的 WebGLVectorLayer 在 v6.0.0 中已被完全移除
• ✅ 当前稳定的 WebGL API：WebGLPointsLayer
• 🧪 新的 WebGLVectorLayer 是实验性的，API 可能变化
• ✅ 扁平样式格式是当前标准

WebGL 图层 API

WebGLPointsLayer（稳定 API）

import WebGLPointsLayer from 'ol/layer/WebGLPoints.js';
import VectorSource from 'ol/source/Vector.js';

const webglLayer = new WebGLPointsLayer({
  source: new VectorSource({
    // 矢量数据源
  }),

  // 扁平样式格式
  style: {
    'circle-radius': 8,
    'circle-fill-color': 'red',
    'circle-stroke-color': 'white',
    'circle-stroke-width': 2
  },

  // 过滤器（根级选项，Context7 验证）
  filter: ['>', ['get', 'population'], 100000],

  // 变量（根级选项，Context7 验证）
  variables: {
    minYear: 1850,
    maxYear: 2015
  }
});

新的 WebGLVectorLayer（实验性）

import WebGLVectorLayer from 'ol/layer/WebGLVector.js';

// 注意：这是实验性 API，可能在未来版本中变化
const experimentalWebglLayer = new WebGLVectorLayer({
  source: vectorSource,
  style: [{
    filter: ['between', ['get', 'year'], ['var', 'minYear'], ['var', 'maxYear']],
    style: {
      'circle-radius': 8,
      'circle-fill-color': 'blue',
    },
  }],
  variables: {
    minYear: 1850,
    maxYear: 2015
  }
});

Context7 验证的关键差异

• WebGLPointsLayer：filter 和 variables 是根级选项
• WebGLVectorLayer：filter 和 style 嵌套在 style 数组中，variables 是根级选项

扁平样式格式

// 点样式
const pointStyle = {
  'circle-radius': 6,
  'circle-fill-color': ['get', 'color'], // 从要素属性获取
  'circle-stroke-color': 'white',
  'circle-stroke-width': 1,
  'circle-opacity': 0.8
};

// 线样式
const lineStyle = {
  'stroke-color': 'blue',
  'stroke-width': 3,
  'stroke-opacity': 0.7
};

// 面样式
const polygonStyle = {
  'fill-color': 'rgba(0, 255, 0, 0.3)',
  'stroke-color': 'green',
  'stroke-width': 2
};

动态样式表达式

const dynamicStyle = {
  'circle-radius': [
    'case',
    ['>', ['get', 'population'], 1000000], 12, // 大城市
    ['>', ['get', 'population'], 100000], 8,   // 中等城市
    4 // 小城市
  ],
  'circle-fill-color': [
    'case',
    ['==', ['get', 'type'], 'capital'], 'red',
    ['==', ['get', 'type'], 'city'], 'blue',
    'gray'
  ],
  'circle-stroke-color': 'white',
  'circle-stroke-width': 1
};

性能优化

大数据量处理

const highPerformanceLayer = new WebGLVectorLayer({
  source: largeVectorSource,
  style: {
    'circle-radius': 4,
    'circle-fill-color': 'blue'
  },

  // 性能优化选项
  renderBuffer: 200,
  updateWhileAnimating: true,
  updateWhileInteracting: true
});

内存管理

// 适当的资源清理
function cleanupWebGLLayer(layer) {
  if (layer) {
    layer.dispose();
    console.log('WebGL 图层已清理');
  }
}

最佳实践

样式配置

// 推荐的样式配置
const recommendedStyle = {
  // 使用简单的样式提高性能
  'circle-radius': 6,
  'circle-fill-color': 'rgba(255, 0, 0, 0.8)',
  'circle-stroke-color': 'white',
  'circle-stroke-width': 1,

  // 避免复杂的表达式
  'circle-opacity': 0.8
};

错误处理

// WebGL 支持检测
function checkWebGLSupport() {
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
  return !!gl;
}

if (checkWebGLSupport()) {
  // 使用 WebGL 图层
  const webglLayer = new WebGLVectorLayer({
    source: vectorSource,
    style: webglStyle
  });
  map.addLayer(webglLayer);
} else {
  console.warn('WebGL 不支持，使用普通矢量图层');
  // 降级到普通矢量图层
  const fallbackLayer = new VectorLayer({
    source: vectorSource,
    style: fallbackStyle
  });
  map.addLayer(fallbackLayer);
}

总结

WebGL 图层为大数据量渲染提供了强大的性能支持：

• 新 API：使用 WebGLVectorLayer 和扁平样式格式
• 高性能：GPU 加速渲染，适合大数据集
• 标准化：更加一致的样式配置系统
• 兼容性：需要检测 WebGL 支持并提供降级方案

注意事项

• 需要现代浏览器的 WebGL 支持
• 复杂样式可能影响性能
• 注意内存使用和资源清理
• 某些移动设备可能性能有限