Openlayers 7.1.0：WebGLPointsLayer使用样式函数报错求助

基于Node.js的Openlayers 7.1.0应用，通过WebGLPointsLayer渲染30K+点位，静态样式对象可正常工作，但使用样式函数时抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'size')，无法实现基于Feature的动态样式。

原代码示例：

const map = new Map({
  layers: [new Tile({source: new OSM()}),
    new WebGLPointsLayer({
      source: new VectorSource({ features: featuresArr,}),

      // 静态样式可正常工作
      style: {
        symbol: {
          symbolType: "triangle",
          size: 8,
          color: "blue",
          rotateWithView: true,
        }
      }

      // 样式函数报错
      // style (feature, resolution) {
      //   return { 
      //     symbol: {
      //       symbolType: "triangle",
      //       size: 8,
      //       color: "blue",
      //     }
      //   }
      // }
    }),
  ],
  target: "map",
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

WebGLPointsLayer不支持普通VectorLayer那样的样式函数，它的style参数仅接受字面量样式对象或ol/style/webgl/Style实例。要实现动态样式，需使用属性绑定或样式表达式：

1. 属性绑定（基础动态样式） #

直接引用Feature的属性值来控制样式，格式为['get', '属性名', 默认值]：

const map = new Map({
  layers: [new Tile({source: new OSM()}),
    new WebGLPointsLayer({
      source: new VectorSource({ features: featuresArr,}),
      style: {
        symbol: {
          symbolType: "triangle",
          // 绑定Feature的size属性，默认8
          size: ['get', 'size', 8],
          // 绑定Feature的color属性，默认蓝色
          color: ['get', 'color', 'blue'],
          rotateWithView: true,
        }
      }
    }),
  ],
  target: "map",
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

2. 样式表达式（复杂逻辑） #

如果需要根据属性值计算样式（比如范围判断、插值），使用OpenLayers的样式表达式语法：

style: {
  symbol: {
    symbolType: "triangle",
    // 根据magnitude属性插值计算尺寸：0对应5，100对应15
    size: ['interpolate', ['linear'], ['get', 'magnitude'], 0, 5, 100, 15],
    // 根据magnitude属性切换颜色：>50红，>20橙，否则蓝
    color: ['case',
      ['>', ['get', 'magnitude'], 50], 'red',
      ['>', ['get', 'magnitude'], 20], 'orange',
      'blue'
    ],
    rotateWithView: true,
  }
}

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