Javascript – How to style LineStrings which are part of a GeometryCollection

Problem:

I have a GeometryCollection which contains a Point and then a varying number of LineStrings. I am trying to make a style function to change the way the geometries look, but I can only change the point and the linestrings totally disappear on the screen. I would also like to know how to style all the linestrings without knowing how many there will be.

Styling the point does work. When I click on the point on the map, I can see that the linestrings are highlighted blue, so they are there in some capacity. I just need the line strings to be a simple color and visible. The linedash, linecap, linejoin are only there in the code to see if one of them might work and none did.

Here is the style function:

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

Solution:

If you have only Point and LineString within the collection you would not need to style them separately as image is used only by Point geometry and Stroke only by LineString (Fill is not used by either)

        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
          })
        })

If you also have Polygon geometry and you need a different or no stroke for Polygon you would need to separate them in a style function

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