OpenLayers 8.1 如何为WebGL渲染要素条件化应用FlatStyle

你之前的问题在于WebGLPointsLayer的style属性不直接接受规则数组，需要通过FlatStyle提供的工具函数转换，或者将规则数组嵌套在FlatStyle配置对象中。以下是两种可行的实现方式：

方式一：使用createStyleFunction转换规则数组 #

首先导入FlatStyle的样式函数生成工具，将规则数组转换为WebGL图层可识别的样式函数：

// 模块化环境下导入
import { WebGLPointsLayer } from 'ol/layer/WebGLPoints';
import { createStyleFunction } from 'ol/style/flat';

// 非模块化环境（全局引入OpenLayers）使用：
// const createStyleFunction = ol.style.flat.createStyleFunction;

const rules = [
  {
    filter: ['>', 'population', 1000000],
    style: {
      'circle-radius': 10,
      'circle-color': 'red',
    }
  },
  {
    else: true,
    style: {
      'circle-radius': 5,
      'circle-color': 'blue',
    },
  },
];

// 将规则数组转换为样式函数
const styleFunction = createStyleFunction(rules);

const pointsLayer = new WebGLPointsLayer({
  source: vectorSource,
  style: styleFunction,
});

方式二：直接在FlatStyle配置中嵌套规则数组 #

也可以直接将规则数组放在style配置的rules字段中，图层会自动识别FlatStyle格式：

const pointsLayer = new WebGLPointsLayer({
  source: vectorSource,
  style: {
    rules: [
      {
        filter: ['>', 'population', 1000000],
        style: {
          'circle-radius': 10,
          'circle-color': 'red',
        }
      },
      {
        else: true,
        style: {
          'circle-radius': 5,
          'circle-color': 'blue',
        },
      },
    ],
  },
});

关键注意事项 #

• 确保要素属性population存在且为数值类型，否则过滤规则无法匹配。
• 检查模块导入是否正确（模块化环境），或全局变量是否可用（非模块化环境）。
• 如果仍无渲染，可打开浏览器开发者工具，检查控制台是否有属性缺失、模块未找到等报错信息。

内容的提问来源于stack exchange，提问作者Young-Chul Lim