如何设置属于 GeometryCollection 一部分的 LineString 的样式

Question

我有一个 GeometryCollection，其中包含一个 Point，然后包含不同数量的 LineString。我试图创建一个样式函数来改变几何图形的外观，但我只能改变点，线串完全消失在屏幕上。我还想知道如何在不知道有多少线串的情况下设置所有线串的样式。

设计点的样式确实有效。当我单击地图上的点时，我可以看到线串突出显示为蓝色，因此它们以某种方式存在。我只需要线串是简单的颜色并且可见。 linedash、linecap、linejoin 仅在代码中存在，以查看其中之一是否可行，但没有一个可行。

这是样式函数：

          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];
          };

Answer 1

如果集合中只有 Point 和 LineString，则无需单独设置它们的样式，因为图像仅由 Point 几何体使用，而 Stroke 仅由 LineString 使用（两者都不使用填充）

        new Style({
          image: new Circle({
            radius: 7,
            fill: new Fill({
              color: '#32CD32'
            })
          }),
          stroke: new Stroke({
            color: '#0000FF',
            lineDash: [1, 20],
            width: 5,
            lineCap: 'square',
            lineJoin: 'round',
            lineDashOffset: 10
          })
        })

如果您还有多边形几何体，并且需要不同的多边形笔划或不需要多边形笔划，则需要在样式函数中将它们分开

      (feature) => {
        let geometries = (feature.getGeometry() as GeometryCollection).getGeometries();

        let polygonStyle = new Style({
          geometry: new GeometryCollection(geometries.filter(
            (geometry) => geometry.getType() === 'Polygon'
          ),
          fill: new Fill({
            color: 'red',
          }),
        });

        let lineStyle = new Style({
          geometry: new GeometryCollection(geometries.filter(
            (geometry) => geometry.getType() === 'LineString'
          ),
          stroke: new Stroke({
            color: '#0000FF',
            lineDash: [1, 20],
            width: 5,
            lineCap: 'square',
            lineJoin: 'round',
            lineDashOffset: 10
          })
        })

        return [polygonStyle, lineStyle];
      };