OpenLayers中无法为WebGL图层多边形设置样式求助

我正在参考OpenLayers的“WebGL Vector Layer”示例，尝试给GeoJSON文件里的多边形设置填充颜色，但一直没成功。

我觉得问题可能出在示例里标注WebGLStyle的注释行，我找不到、导入不了也加不上WebGLStyle，现在多边形只显示灰色。

能不能给一段代码片段，让我直接给多边形应用简单的红色填充？

示例里的代码：

/** @type {import('ol/style/webgl.js').WebGLStyle} */
const style = {
  'stroke-color': ['*', ['get', 'COLOR'], [220, 220, 220]],
  'stroke-width': 3,
  'stroke-offset': -1,
  'fill-color': ['*', ['get', 'COLOR'], [255, 255, 255, 0.6]],
};

我自己尝试的代码：

const sStyle = {
  'fill-color': [255, 0, 0],
};

class WebGLLayer extends Layer {
  createRenderer() {
    return new WebGLVectorLayerRenderer(this, {
      className: this.getClassName(),
      sStyle,
    });
  }
}

const polygonLayer = new WebGLLayer({
  // 然后添加矢量源等
});

• 参数名错误：传给WebGLVectorLayerRenderer的参数应该是style而非sStyle
• 无需自定义图层类：直接使用OpenLayers内置的VectorLayer并指定renderer: 'webgl'即可实现需求

以下是实现红色填充的完整代码片段：

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

// 定义WebGL样式，红色填充+可选黑色描边
const webglStyle = {
  'fill-color': [255, 0, 0, 1], // RGBA格式，最后一位为透明度（1表示完全不透明）
  'stroke-color': [0, 0, 0],    // 可选：添加黑色描边
  'stroke-width': 1             // 可选：描边宽度
};

// 创建WebGL矢量图层
const polygonLayer = new VectorLayer({
  source: new VectorSource({
    format: new GeoJSON(),
    url: '你的GeoJSON文件路径' // 替换为实际的GeoJSON文件地址
  }),
  renderer: 'webgl', // 指定使用WebGL渲染器
  style: webglStyle
});

另外补充：示例中的WebGLStyle是TypeScript类型标注，如果你使用JavaScript开发，完全可以忽略该行注释，只要样式对象符合OpenLayers WebGL样式的格式规范即可正常运行。

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