refactor("ol-source-webglpoints): migrate to script setup

Author: d-koppenhagen

src/components/sources/SourceWebglPoints.vue renamed to src/components/sources/OlSourceWebglPoints.vue

@@ -7,9 +7,9 @@ import OlSourceTianDiTu from "./OlSourceTianDiTu.vue";
 import OlSourceTileArcGISRest from "@/components/sources/OlSourceTileArcGISRest.vue";
 import OlSourceTileWMS from "./OlSourceTileWMS.vue";
 import OlSourceVector from "./OlSourceVector.vue";
+import OlSourceWebglPoints from "./OlSourceWebglPoints.vue";
 import OlSourceXYZ from "./OlSourceXYZ.vue";
 import OlSourceWMTS from "./OlSourceWMTS.vue";
-import SourceWebglPoints from "./SourceWebglPoints.vue";
 
 function install(app) {
   if (install.installed) {
@@ -27,9 +27,9 @@ function install(app) {
   app.component("ol-source-tile-arcgis-rest", OlSourceTileArcGISRest);
   app.component("ol-source-tile-wms", OlSourceTileWMS);
   app.component("ol-source-vector", OlSourceVector);
+  app.component("ol-source-webglpoints", OlSourceWebglPoints);
   app.component("ol-source-xyz", OlSourceXYZ);
   app.component("ol-source-wmts", OlSourceWMTS);
-  app.component(SourceWebglPoints.name, SourceWebglPoints);
 }
 
 export default install;
@@ -45,7 +45,7 @@ export {
   OlSourceTileArcGISRest,
   OlSourceTileWMS,
   OlSourceVector,
+  OlSourceWebglPoints,
   OlSourceXYZ,
   OlSourceWMTS,
-  SourceWebglPoints,
 };

src/components/sources/index.js

@@ -25,53 +25,41 @@
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref, inject } from "vue";
-export default {
-  setup() {
-    const center = ref([40, 40]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(3);
-    const rotation = ref(0);
 
-    const format = inject("ol-format");
-    const geoJson = new format.GeoJSON();
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(3);
+const rotation = ref(0);
 
-    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,
-        ],
-      },
-    };
+const format = inject("ol-format");
+const geoJson = new format.GeoJSON();
 
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      geoJson,
-      webglPointsStyle,
-    };
+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,
+    ],
   },
 };
 </script>