如何为GeometryCollection中的LineString设置样式？解决线条消失问题

我有一个包含Point和数量不定的LineString的GeometryCollection，尝试编写样式函数修改显示效果时，只有Point的样式生效，LineString完全看不到。不过点击Point时，LineString会蓝色高亮，说明线条确实存在，只是无法正常显示。另外我也想知道怎么在LineString数量未知的情况下给所有线条设置样式。

当前样式函数代码如下：

const testStyle = () => {
  let geometries = (feature.getGeometry() as GeometryCollection).getGeometries();
  let point = geometries[0];
  let line = geometries[1];

  let pointStyle = new Style({
    geometry: point,
    image: new Circle({
      radius: 7,
      fill: new Fill({
        color: '#32CD32'
      })
    })
  });

  let lineStyle = new Style({
    geometry: line,
    fill: new Fill({
      color: 'red',
    }),
    stroke: new Stroke({
      color: '#0000FF',
      lineDash: [1, 20],
      width: 5,
      lineCap: 'square',
      lineJoin: 'round',
      lineDashOffset: 10
    })
  })

  return [pointStyle, lineStyle];
};

问题原因 #

1. 仅处理了索引为1的LineString，当LineString数量超过1时，其余线条未被加入样式数组，无法显示。
2. LineString属于线要素，fill属性对其无作用，虽不是消失的直接原因，但属于冗余配置。

修复方案 #

遍历GeometryCollection中的所有几何对象，按类型分别创建样式：

• 识别Point类型，生成点样式
• 识别所有LineString类型，为每个线条配置统一的线样式

修改后的代码：

const testStyle = (feature) => {
  const styles = [];
  const geometries = (feature.getGeometry() as GeometryCollection).getGeometries();

  geometries.forEach(geometry => {
    if (geometry.getType() === 'Point') {
      styles.push(new Style({
        geometry: geometry,
        image: new Circle({
          radius: 7,
          fill: new Fill({
            color: '#32CD32'
          })
        })
      }));
    } else if (geometry.getType() === 'LineString') {
      styles.push(new Style({
        geometry: geometry,
        stroke: new Stroke({
          color: '#0000FF',
          width: 3,
          lineCap: 'round',
          lineJoin: 'round'
        })
      }));
    }
  });

  return styles;
};

额外说明 #

• 移除了线样式中无用的fill属性，简化stroke参数优先保证线条可见
• 通过getType()判断几何类型，不依赖固定索引顺序，适配点不在首个位置的情况
• 遍历所有几何对象，自动适配任意数量的LineString

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