fix: cluster style does not update when toggling themes on or off

[dahlalex]

fix: #2136

[dahlalex]

I would like to explain my approach because I need help 😅.

My approach is based on the idea of determining the visibility of features on the map according to the visibility of the theme. In other words, whenever a user activates or deactivates a theme, the function I created (updateCluster) checks which features are currently visible on the map and updates the cluster source accordingly. This ensures that clustering is recalculated based only on the visible features.

While this approach works well for layers with 1,000 features or fewer (such as the Origokommuner layer), it becomes very slow and negatively impacts responsiveness when applied to layers with a larger number of features (such as Fornlämningar, which contains 10,000 features).

Does anyone have suggestions for improving this approach or perhaps an entirely different solution?

Here is a demostration video:

[dahlalex]

To reproduce:

1. Source:

"source": {
    "local": {
      "url": "http://localhost/geoserver/wms"
    },
    "wfs": {
      "url": "https://inspire-raa.metria.se/geoserver/Kulturhistoriska_lamningar/wfs"
    }
  },

2. Layers:

{
      "name": "Kulturhistoriska_lamningar:kulturhistoriska_lamningar_point",
      "title": "Fornlämningar",
      "group": "root",
      "filter": "[lan] == 'Västmanland'",
      "source": "wfs",
      "style": "Kulturhistoriska_lamningar",
      "clusterStyle": "Kulturhistoriska_lamningar_cluster",
      "layerType": "cluster",
      "thematicStyling": true,
      "type": "WFS",
      "visible": false
    },
    {
      "name": "origo-cities",
      "title": "Origokommuner",
      "group": "root",
      "source": "data/origo-cities-3857.geojson",
      "style": "origo-logo",
      "clusterStyle": "origo-logo-cluster",
      "layerType": "cluster",
      "type": "GEOJSON",
      "thematicStyling": true,
      "attributes": [
        {
          "name": "name"
        }
      ],
      "visible": false
    },

3.Styles:

"Kulturhistoriska_lamningar": [
      [
        {
          "circle": {
            "radius": 14,
            "fill": {
              "color": "rgba(67,97,238,0.5)"
            },
            "stroke": {
              "color": "rgba(67,97,238,0.9)",
              "width": 2
            }
          },
          "filter": "[kommun] == 'Västerås'",
          "label": "Västerås"
        }
      ],
      [
        {
          "circle": {
            "radius": 14,
            "fill": {
              "color": "rgba(5,140,66,0.5)"
            },
            "stroke": {
              "color": "rgba(5,140,66,0.9)",
              "width": 2
            }
          },
          "filter": "[kommun] == 'Sala'",
          "label": "Sala"
        }
      ],
      [
        {
          "circle": {
            "radius": 14,
            "fill": {
              "color": "rgba(22,219,101,0.5)"
            },
            "stroke": {
              "color": "rgba(22,219,101,0.9)",
              "width": 2
            }
          },
          "filter": "[kommun] == 'Fagersta'",
          "label": "Fagersta"
        }
      ],
      [
        {
          "circle": {
            "radius": 14,
            "fill": {
              "color": "rgba(221,223,0,0.5)"
            },
            "stroke": {
              "color": "rgba(221,223,0,0.9)",
              "width": 2
            }
          },
          "filter": "[kommun] == 'Köping'",
          "label": "Köping"
        }
      ],
      [
        {
          "circle": {
            "radius": 14,
            "fill": {
              "color": "rgba(248,150,30,0.5)"
            },
            "stroke": {
              "color": "rgba(248,150,30,0.9)",
              "width": 2
            }
          },
          "filter": "[kommun] == 'Arboga'",
          "label": "Arboga"
        }
      ],
      [
        {
          "circle": {
            "radius": 14,
            "fill": {
              "color": "rgba(249,65,68,0.5)"
            },
            "stroke": {
              "color": "rgba(249,65,68,0.9)",
              "width": 2
            }
          },
          "filter": "[kommun] == 'Kungsör'",
          "label": "Kungsör"
        }
      ],
      [
        {
          "circle": {
            "radius": 14,
            "fill": {
              "color": "rgba(255,51,255,0.5)"
            },
            "stroke": {
              "color": "rgba(255,51,255,0.9)",
              "width": 2
            }
          },
          "filter": "[kommun] == 'Hallstahammar'",
          "label": "Hallstahammar"
        }
      ],
      [
        {
          "circle": {
            "radius": 14,
            "fill": {
              "color": "rgba(0,0,0,0.5)"
            },
            "stroke": {
              "color": "rgba(0,0,0,0.9)",
              "width": 2
            }
          },
          "filter": "[kommun] == 'Surahammar'",
          "label": "Surahammar"
        }
      ],
      [
        {
          "circle": {
            "radius": 14,
            "fill": {
              "color": "rgba(0,0,0,0.5)"
            },
            "stroke": {
              "color": "rgba(0,0,0,0.9)",
              "width": 2
            }
          },
          "filter": "[kommun] == 'Skinnskatteberg'",
          "label": "Skinnskatteberg"
        }
      ],
      [
        {
          "circle": {
            "radius": 14,
            "fill": {
              "color": "rgba(0,0,0,0.5)"
            },
            "stroke": {
              "color": "rgba(0,0,0,0.9)",
              "width": 2
            }
          },
          "filter": "[kommun] == 'Norberg'",
          "label": "Norberg"
        }
      ]
    ],
    "Kulturhistoriska_lamningar_cluster": [
      [
        {
          "circle": {
            "radius": 16,
            "fill": {
              "color": "rgba(157,78,221,0.5)"
            },
            "stroke": {
              "color": "rgba(157,78,221,0.9)",
              "width": 4
            }
          }
        },
        {
          "text": {
            "font": "Bold 12px Arial",
            "textAlign": "center",
            "text": "size",
            "fill": {
              "color": "rgba(0,0,0,1.0)"
            },
            "stroke": {
              "color": "rgba(157,78,221,0.3)",
              "width": 2
            }
          }
        }
      ]
    ],