refactor(ol-interaction-draw): migrate to script setup

Author: d-koppenhagen

docs/componentsguide/interactions/draw/index.md

@@ -29,7 +29,7 @@ import DrawDemo from "@demos/DrawDemo.vue"
   <ol-map
     :loadTilesWhileAnimating="true"
     :loadTilesWhileInteracting="true"
-    style="height:400px"
+    style="height: 400px"
   >
     <ol-view
       ref="view"
@@ -51,51 +51,41 @@ import DrawDemo from "@demos/DrawDemo.vue"
           @drawend="drawend"
           @drawstart="drawstart"
         >
+          <ol-style>
+            <ol-style-stroke color="blue" :width="2"></ol-style-stroke>
+            <ol-style-fill color="rgba(255, 255, 0, 0.4)"></ol-style-fill>
+          </ol-style>
         </ol-interaction-draw>
       </ol-source-vector>
 
       <ol-style>
         <ol-style-stroke color="red" :width="2"></ol-style-stroke>
         <ol-style-fill color="rgba(255,255,255,0.1)"></ol-style-fill>
         <ol-style-circle :radius="7">
-          <ol-style-fill color="blue"></ol-style-fill>
+          <ol-style-fill color="red"></ol-style-fill>
         </ol-style-circle>
       </ol-style>
     </ol-vector-layer>
   </ol-map>
 </template>
 
-<script>
-import { ref, inject } from "vue";
-export default {
-  setup() {
-    const center = ref([40, 40]);
-    const projection = ref("EPSG:4326");
-    const zoom = ref(8);
-    const rotation = ref(0);
-
-    const drawEnable = ref(true);
-    const drawType = ref("Point");
-
-    const drawstart = (event) => {
-      console.log(event);
-    };
-
-    const drawend = (event) => {
-      console.log(event);
-    };
-
-    return {
-      center,
-      projection,
-      zoom,
-      rotation,
-      drawEnable,
-      drawType,
-      drawstart,
-      drawend,
-    };
-  },
+<script setup>
+import { ref } from "vue";
+
+const center = ref([40, 40]);
+const projection = ref("EPSG:4326");
+const zoom = ref(8);
+const rotation = ref(0);
+
+const drawEnable = ref(true);
+const drawType = ref("Polygon");
+
+const drawstart = (event) => {
+  console.log(event);
+};
+
+const drawend = (event) => {
+  console.log(event);
 };
 </script>
 ```