如何在WebGLVectorLayer中显示聚合集群的要素数量

问题背景 #

之前通过VectorLayer实现了集群要素数量显示，但切换到WebGLVectorLayer时，无法正确配置过滤条件和动态生成带数量的文本标签。

解决方案 #

核心修正点 #

1. 集群数量过滤条件：需要获取features数组的长度来判断是否为集群，而非直接比较数组本身
2. 动态生成带数量的SVG：利用WebGL样式的表达式语法，动态拼接包含集群数量的SVG字符串

完整代码 #

import WebGLVectorLayer from 'ol/layer/WebGLVector';

const flatLikeStyle = [
  // 非集群要素的基础样式（与原VectorLayer一致）
  {
    style: {
      'shape-fill-color': '#ffcc33',
      'shape-radius': 5,
      'shape-type': 'circle',
    },
  },
  // 集群要素的样式：仅当包含要素数量>1时生效
  {
    filter: ['>', ['length', ['get', 'features']], 1],
    style: {
      // 集群背景样式
      'shape-fill-color': 'black',
      'shape-radius': 10,
      // 动态生成带数量的文本图标
      'icon-src': [
        'concat',
        'data:image/svg+xml;utf8,<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">',
        '<text x="10" y="14" text-anchor="middle" fill="white" font-size="12">',
        ['number-format', ['length', ['get', 'features']], {}],
        '</text></svg>',
      ],
    },
  },
];

const webglVectorLayer = new WebGLVectorLayer({
  source: clusterSource,
  style: flatLikeStyle,
});

关键说明 #

• 过滤逻辑：['length', ['get', 'features']]用于获取当前集群包含的要素总数，通过['>', ..., 1]判断是否为集群
• 动态文本生成：使用concat表达式拼接SVG字符串，number-format将数字类型的数量转为字符串，确保文本正确显示
• 样式叠加：WebGLVectorLayer的样式数组按顺序应用，集群样式会覆盖基础样式的背景，同时添加文本图标

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