refactor(ol-webgl-points-layer): use new flat style format

BREAKING CHANGE:
use the [new introduced flat format from OpenLayers 8](https://github.com/openlayers/openlayers/blob/v8.0.0/changelog/upgrade-notes.md#change-of-the-symbol-style-format-in-ollayerwebglpointslayer)

Author: d-koppenhagen

Diff for: src/demos/AppDemo.vue

@@ -431,30 +431,19 @@ const zones = [
 ];
 
 const webglPointsStyle = {
-  symbol: {
-    symbolType: "circle",
-    size: [
-      "interpolate",
-      ["linear"],
-      ["get", "population"],
-      40000,
-      8,
-      2000000,
-      28,
-    ],
-    color: "#ffed02",
-    rotateWithView: false,
-    offset: [0, 0],
-    opacity: [
-      "interpolate",
-      ["linear"],
-      ["get", "population"],
-      40000,
-      0.6,
-      2000000,
-      0.92,
-    ],
-  },
+  "circle-radius": 6,
+  "circle-fill-color": "yellow",
+  "circle-stroke-width": 2,
+  "circle-stroke-color": "darkblue",
+  "circle-opacity": [
+    "interpolate",
+    ["linear"],
+    ["get", "population"],
+    40000,
+    0.6,
+    2000000,
+    0.92,
+  ],
 };
 </script>
 

Diff for: src/demos/WebglPointsLayerDemo.vue

@@ -37,29 +37,18 @@ const format = inject("ol-format");
 const geoJson = new format.GeoJSON();
 
 const webglPointsStyle = {
-  symbol: {
-    symbolType: "circle",
-    size: [
-      "interpolate",
-      ["linear"],
-      ["get", "population"],
-      40000,
-      8,
-      2000000,
-      28,
-    ],
-    color: "#ffed02",
-    rotateWithView: false,
-    offset: [0, 0],
-    opacity: [
-      "interpolate",
-      ["linear"],
-      ["get", "population"],
-      40000,
-      0.6,
-      2000000,
-      0.92,
-    ],
-  },
+  "circle-radius": 6,
+  "circle-fill-color": "yellow",
+  "circle-stroke-width": 2,
+  "circle-stroke-color": "darkblue",
+  "circle-opacity": [
+    "interpolate",
+    ["linear"],
+    ["get", "population"],
+    40000,
+    0.6,
+    2000000,
+    0.92,
+  ],
 };
 </script>

Diff for: src/demos/WebglPointsSourceDemo.vue

@@ -47,29 +47,18 @@ const getRandomInRange = (from, to, fixed) => {
 };
 
 const webglPointsStyle = {
-  symbol: {
-    symbolType: "circle",
-    size: [
-      "interpolate",
-      ["linear"],
-      ["get", "population"],
-      40000,
-      8,
-      2000000,
-      28,
-    ],
-    color: "#ffed02",
-    rotateWithView: false,
-    offset: [0, 0],
-    opacity: [
-      "interpolate",
-      ["linear"],
-      ["get", "population"],
-      40000,
-      0.6,
-      2000000,
-      0.92,
-    ],
-  },
+  "circle-radius": 6,
+  "circle-fill-color": "yellow",
+  "circle-stroke-width": 2,
+  "circle-stroke-color": "darkblue",
+  "circle-opacity": [
+    "interpolate",
+    ["linear"],
+    ["get", "population"],
+    40000,
+    0.6,
+    2000000,
+    0.92,
+  ],
 };
 </script>