Revert "refactor: make heatmapLayer and vectorLayer not a ref"

This reverts commit f6dca4c.

Author: d-koppenhagen

src/components/layers/OlAnimatedClusterLayer.vue

@@ -61,13 +61,13 @@ watch(properties, () => {
 });
 
 onMounted(() => {
-  map.addLayer(vectorLayer);
+  map.addLayer(vectorLayer.value);
   vectorLayer.value.changed();
   map.changed();
 });
 
 onUnmounted(() => {
-  map.removeLayer(vectorLayer);
+  map.removeLayer(vectorLayer.value);
 });
 
 provide("vectorLayer", source);

src/components/layers/OlVectorLayer.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { inject, provide, onUnmounted, onMounted, watch } from "vue";
+import { inject, provide, onUnmounted, onMounted, watch, computed } from "vue";
 
 import VectorLayer from "ol/layer/Vector";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
@@ -34,18 +34,18 @@ const map = inject("map");
 
 const { properties } = usePropsAsObjectProperties(props);
 
-const vectorLayer = new VectorLayer(properties);
+const vectorLayer = computed(() => new VectorLayer(properties));
 
 watch(properties, () => {
-  vectorLayer.setProperties(properties);
+  vectorLayer.value.setProperties(properties);
 });
 
 onMounted(() => {
-  map.addLayer(vectorLayer);
+  map.addLayer(vectorLayer.value);
 });
 
 onUnmounted(() => {
-  map.removeLayer(vectorLayer);
+  map.removeLayer(vectorLayer.value);
 });
 
 provide("vectorLayer", vectorLayer);

src/components/map/OlFeature.vue

@@ -41,7 +41,7 @@ watch(vectorSource, (newVal, oldVal) => {
 onMounted(() => {
   vectorSource.value.addFeature(feature.value);
   if (animation != null) {
-    vectorLayer.animateFeature(feature.value, animation.value);
+    vectorLayer.value.animateFeature(feature.value, animation.value);
   }
 });
 

src/components/mapControls/OlAttributionControl.vue

@@ -5,7 +5,7 @@
 <script setup>
 import { Attribution } from "ol/control";
 import useControl from "@/composables/useControl";
-import { useAttrs } from "vue";
+import { useAttrs, useSlots } from "vue";
 
 const props = defineProps({
   className: {

src/components/sources/OlSourceVector.vue

@@ -57,9 +57,9 @@ const { properties } = usePropsAsObjectProperties(props);
 const source = computed(() => new VectorSource(properties));
 
 const applySource = () => {
-  layer.setSource(null);
-  layer.setSource(source.value);
-  layer.changed();
+  layer.value.setSource(null);
+  layer.value.setSource(source.value);
+  layer.value.changed();
 };
 watch(properties, () => {
   applySource();
@@ -70,11 +70,11 @@ watch(layer, () => {
 });
 
 onMounted(() => {
-  layer.setSource(source.value);
+  layer.value.setSource(source.value);
 });
 
 onUnmounted(() => {
-  layer.setSource(null);
+  layer.value.setSource(null);
 });
 
 provide("vectorSource", source);

src/composables/usePropsAsObjectProperties.ts

@@ -1,4 +1,4 @@
-import { toRefs, watch, reactive, type ToRefs, ref } from "vue";
+import { toRefs, watch, reactive, type ToRefs, ref, type Ref } from "vue";
 
 /**
  * We can't use 'style' as a component prop since it's a reserved property

src/demos/ImageWMSDemo.vue

@@ -28,7 +28,7 @@
   </ol-map>
 </template>
 
-<script setup>
+<script>
 import { ref } from "vue";
 
 const zoom = ref(4);

src/demos/SnapModifyDemo.vue

@@ -130,6 +130,7 @@ function vectorStyle() {
   return style;
 }
 
+const geoJsonFormat = new GeoJSON();
 const selectConditions = inject("ol-selectconditions");
 const selectCondition = selectConditions.click;