refactor(ol-geom-line-string): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/geometries/geomlinestring/index.md

@@ -16,7 +16,7 @@ import LineString from "@demos/LineString.vue"
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height:400px"
+    style="height: 400px"
   >
     <ol-view
       ref="view"
@@ -65,29 +65,15 @@ import LineString from "@demos/LineString.vue"
   </ol-map>
 </template>
 
-<script>
+<script setup>
 import { ref } from "vue";
-export default {
-  setup() {
-    const center = ref([116.54875, 40.45064]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(17);
-    const rotation = ref(0);
-    const radius = ref(40);
-    const strokeWidth = ref(10);
-    const strokeColor = ref("red");
 
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      radius,
-      strokeWidth,
-      strokeColor,
-    };
-  },
-};
+const center = ref([116.54875, 40.45064]);
+const projection = ref("EPSG:4326");
+const zoom = ref(17);
+const rotation = ref(0);
+const strokeWidth = ref(10);
+const strokeColor = ref("red");
 </script>
 ```
 

src/components/geometries/LineString.vue

@@ -0,0 +1,26 @@
+<template lang="">
+  <div v-if="false"></div>
+</template>
+
+<script setup>
+import LineString from "ol/geom/LineString";
+import useGeometry from "@/composables/useGeometry";
+
+const props = defineProps({
+  coordinates: {
+    type: Array,
+  },
+  opt_layout: {
+    type: String,
+    default: "XY",
+  },
+});
+
+const { geometry } = useGeometry(LineString, props);
+
+defineExpose({
+  geometry,
+});
+</script>
+
+<style lang=""></style>

src/components/geometries/OlGeomLineString.vue

@@ -1,6 +1,6 @@
 import OlGeomCircle from "./OlGeomCircle.vue";
+import OlGeomLineString from "./OlGeomLineString.vue";
 import Point from "./Point.vue";
-import LineString from "./LineString.vue";
 import Polygon from "./Polygon.vue";
 import MultiPoint from "./MultiPoint.vue";
 import MultiLineString from "./MultiLineString.vue";
@@ -14,8 +14,8 @@ function install(app) {
   install.installed = true;
 
   app.component("ol-geom-circle", OlGeomCircle);
+  app.component("ol-geom-line-string", OlGeomLineString);
   app.component(Point.name, Point);
-  app.component(LineString.name, LineString);
   app.component(Polygon.name, Polygon);
   app.component(MultiPoint.name, MultiPoint);
   app.component(MultiLineString.name, MultiLineString);
@@ -27,8 +27,8 @@ export default install;
 export {
   install,
   OlGeomCircle,
+  OlGeomLineString,
   Point,
-  LineString,
   Polygon,
   MultiPoint,
   MultiLineString,