Breaking Changes and OpenLayers 7

README.md

@@ -48,7 +48,7 @@ It can display maps with tiled, raster or vector layers loaded from different so
 ## Requirements
 
 - [Vue](https://vuejs.org/) version **^3.0.0**
-- [OpenLayers](https://openlayers.org/) version **^6.14.1**
+- [OpenLayers](https://openlayers.org/) version **^7.3.0**
 
 ## License
 

docs/componentsguide/map/index.md

@@ -132,20 +132,6 @@ Detect features that intersect a pixel on the viewport, and execute a callback
 with each intersecting feature. Layers included in the detection can be configured
 through the `layerFilter` option in `options`.
 
-### forEachLayerAtPixel(pixel, callback, layerFilter)
-
-- **Arguments**:
-  - `pixel {number[]}`
-  - `callback {function(ol.layer.Layer, ?(number[] | Uint8Array)): *}` Layer callback.
-    The callback will receive `layer` and array representing `[R, G, B, A]` pixel values.
-    To stop detection, callback functions can return a truthy value.
-  - `[layerFilter] {function(ol.layer.Layer): boolean | undefined}` Layer filter function.
-- **Returns**: `*` Truthy value returned from the callback.
-
-Detect layers that have a color value at a pixel on the viewport, and execute
-a callback with each matching layer. Layers included in the detection can be
-configured through `layerFilter`.
-
 ### getCoordinateFromPixel(pixel)
 
 - **Arguments**:

docs/componentsguide/mapcontrols/mouseposition/index.md

@@ -28,8 +28,3 @@ See [Demo page for all Map Controls](../index.md)
 ### target
 
 - **Type**: `HTMLElement`
-
-### undefinedHTML
-
-- **Type**: `String`
-- **Default**: ` `

src/components/interaction/ClusterSelectInteraction.vue

@@ -6,7 +6,6 @@
 import { provide, inject, watch, onMounted, onUnmounted, computed } from "vue";
 
 import Select from "ol-ext/interaction/SelectCluster";
-import Style from "ol/style/Style";
 import usePropsAsObjectProperties from "@/composables/usePropsAsObjectProperties";
 
 export default {
@@ -18,10 +17,7 @@ export default {
     const { properties } = usePropsAsObjectProperties(props);
 
     const select = computed(() => {
-      const s = new Select({
-        ...properties,
-        style: new Style(),
-      });
+      const s = new Select(properties);
       s.on("select", (event) => {
         emit("select", event);
       });
@@ -90,9 +86,6 @@ export default {
     featureStyle: {
       type: Function,
     },
-    style: {
-      type: Function,
-    },
   },
 };
 </script>

src/components/interaction/DrawInteraction.vue

@@ -10,10 +10,11 @@ import {
   onMounted,
   onUnmounted,
   toRefs,
-  //computed
+  computed,
 } from "vue";
 
 import Draw from "ol/interaction/Draw";
+import { Style } from "ol/style";
 //import Style from 'ol/style/Style';
 
 export default {
@@ -40,8 +41,8 @@ export default {
       wrapX,
     } = toRefs(props);
 
-    const createDraw = () => {
-      const draw = new Draw({
+    const draw = computed(() => {
+      const d = new Draw({
         source: source.value,
         type: type.value,
         clickTolerance: clickTolerance.value,
@@ -59,18 +60,16 @@ export default {
         wrapX: wrapX.value,
       });
 
-      draw.on("drawstart", (event) => {
+      d.on("drawstart", (event) => {
         emit("drawstart", event);
       });
 
-      draw.on("drawend", (event) => {
+      d.on("drawend", (event) => {
         emit("drawend", event);
       });
 
-      return draw;
-    };
-
-    let draw = createDraw();
+      return d;
+    });
 
     watch(
       [
@@ -90,21 +89,20 @@ export default {
         wrapX,
       ],
       () => {
-        map.removeInteraction(draw);
-        draw = createDraw();
-        map.addInteraction(draw);
-        draw.changed();
+        map.removeInteraction(draw.value);
+        map.addInteraction(draw.value);
+        draw.value.changed();
 
         map.changed();
       }
     );
 
     onMounted(() => {
-      map.addInteraction(draw);
+      map.addInteraction(draw.value);
     });
 
     onUnmounted(() => {
-      map.removeInteraction(draw);
+      map.removeInteraction(draw.value);
     });
 
     provide("stylable", draw);

src/components/interaction/ModifyInteraction.vue

@@ -10,11 +10,12 @@ import {
   onMounted,
   onUnmounted,
   toRefs,
-  // computed
+  computed,
 } from "vue";
 
 import Collection from "ol/Collection";
 import Modify from "ol/interaction/Modify";
+import { Style } from "ol/style";
 //import Style from 'ol/style/Style';
 //import usePropsAsObjectProperties from '@/composables/usePropsAsObjectProperties'
 
@@ -35,8 +36,8 @@ export default {
       hitDetection,
     } = toRefs(props);
 
-    const createModify = () => {
-      const modify = new Modify({
+    const modify = computed(() => {
+      const m = new Modify({
         source: source.value,
         features: features.value,
         condition: condition.value,
@@ -47,18 +48,16 @@ export default {
         hitDetection: hitDetection.value,
       });
 
-      modify.on("modifystart", (event) => {
+      m.on("modifystart", (event) => {
         emit("modifystart", event);
       });
 
-      modify.on("modifyend", (event) => {
+      m.on("modifyend", (event) => {
         emit("modifyend", event);
       });
 
-      return modify;
-    };
-
-    let modify = createModify();
+      return m;
+    });
 
     watch(
       [
@@ -70,21 +69,20 @@ export default {
         hitDetection,
       ],
       () => {
-        map.removeInteraction(modify);
-        modify = createModify();
-        map.addInteraction(modify);
-        modify.changed();
+        map.removeInteraction(modify.value);
+        map.addInteraction(modify.value);
+        modify.value.changed();
 
         map.changed();
       }
     );
 
     onMounted(() => {
-      map.addInteraction(modify);
+      map.addInteraction(modify.value);
     });
 
     onUnmounted(() => {
-      map.removeInteraction(modify);
+      map.removeInteraction(modify.value);
     });
 
     provide("stylable", modify);

src/components/layers/VectorLayer.vue

@@ -49,8 +49,8 @@ export default {
       type: Boolean,
       default: false,
     },
-    style: {
-      type: Function,
+    styles: {
+      type: [String, Array, Function],
     },
     updateWhileInteracting: {
       type: Boolean,

src/components/layers/WebglPointsLayer.vue

@@ -37,8 +37,8 @@ export default {
       type: Boolean,
       default: false,
     },
-    style: {
-      type: Object,
+    styles: {
+      type: [String, Array, Function],
       default: () => ({
         symbol: {
           symbolType: "circle",

src/components/map/Map.vue

@@ -47,8 +47,6 @@ export default {
     const focus = () => map.focus();
     const forEachFeatureAtPixel = (pixel, callback, options = {}) =>
       map.forEachFeatureAtPixel(pixel, callback, options);
-    const forEachLayerAtPixel = (pixel, callback, layerFilter) =>
-      map.forEachLayerAtPixel(pixel, callback, layerFilter);
     const getCoordinateFromPixel = (pixel) => map.getCoordinateFromPixel(pixel);
     const refresh = () => map.refresh();
     const render = () => map.render();
@@ -71,7 +69,6 @@ export default {
       mapRef,
       focus,
       forEachFeatureAtPixel,
-      forEachLayerAtPixel,
       getCoordinateFromPixel,
       refresh,
       render,

src/components/mapControls/MousePositionControl.vue

@@ -31,9 +31,8 @@ export default {
     target: {
       type: HTMLElement,
     },
-    undefinedHTML: {
+    placeholder: {
       type: String,
-      default: " ",
     },
   },
 };

src/components/sources/SourceBingMaps.vue

@@ -61,10 +61,6 @@ export default {
     imagerySet: {
       type: String,
     },
-    imageSmoothing: {
-      type: Boolean,
-      default: true,
-    },
     maxZoom: {
       type: Number,
       default: 21,

src/components/sources/SourceImageStatic.vue

@@ -60,10 +60,6 @@ export default {
     projection: {
       type: [String, Object],
     },
-    imageSmoothing: {
-      type: Boolean,
-      default: true,
-    },
     imageSize: {
       type: Array,
     },

src/components/sources/SourceImageWMS.vue

@@ -86,10 +86,6 @@ export default {
       type: String,
       default: "mapserver",
     },
-    imageSmoothing: {
-      type: Boolean,
-      default: true,
-    },
     layers: {
       type: [String, Array],
       required: true,

src/components/sources/SourceOSM.vue

@@ -49,10 +49,6 @@ export default {
       type: String,
       default: "anonymous",
     },
-    imageSmoothing: {
-      type: Boolean,
-      default: true,
-    },
     minZoom: {
       type: Number,
       default: 0,

src/components/sources/SourceTianDiTu.vue

@@ -194,10 +194,6 @@ export default {
       type: Object,
       default: () => ({}),
     },
-    imageSmoothing: {
-      type: Boolean,
-      default: true,
-    },
     maxZoom: {
       type: Number,
       default: 21,

src/components/sources/SourceWMTS.vue

@@ -87,10 +87,6 @@ export default {
     crossOrigin: {
       type: String,
     },
-    imageSmoothing: {
-      type: Boolean,
-      default: true,
-    },
     projection: {
       type: [String, Object],
       default: "EPSG:3857",
@@ -137,8 +133,8 @@ export default {
     layer: {
       type: String,
     },
-    style: {
-      type: String,
+    styles: {
+      type: [String, Array, Function],
     },
   },
 };

src/components/styles/Style.vue

@@ -22,8 +22,12 @@ export default {
     const style = computed(() => new Style(properties));
 
     const setStyle = (val) => {
-      if (styledObj instanceof Draw || styledObj instanceof Modify) {
-        styledObj.getOverlay().setStyle(val);
+      if (
+        styledObj.value instanceof Draw ||
+        styledObj.value instanceof Modify
+      ) {
+        styledObj.value.getOverlay().setStyle(val);
+        styledObj.value.changed();
         styledObj.value.dispatchEvent("styleChanged");
         return;
       }

src/composables/usePropsAsObjectProperties.js

@@ -1,7 +1,22 @@
 import { toRefs, watch, reactive } from "vue";
 
+/**
+ * We can't use 'style' as a component prop since it's a reserved property
+ * This function will map the special `styles` prop to `style`
+ */
+function getRevisedProps(props) {
+  const revisedProps = { ...props };
+  delete revisedProps.styles;
+  if (props.styles) {
+    props.style = props.styles;
+  }
+  return revisedProps;
+}
+
 export default function usePropsAsObjectProperties(props, ignoredKeys = []) {
-  let options = toRefs(props);
+  const revisedProps = getRevisedProps(props);
+
+  let options = toRefs(revisedProps);
   Object.keys(options).forEach((key) => {
     options[key] = options[key].value;
   });
@@ -10,8 +25,8 @@ export default function usePropsAsObjectProperties(props, ignoredKeys = []) {
     ...options,
   });
 
-  watch(props, () => {
-    options = toRefs(props);
+  watch(props, (newVal) => {
+    options = toRefs(getRevisedProps(newVal));
     Object.keys(options).forEach((key) => {
       if (properties[key] != options[key].value && !ignoredKeys.includes(key)) {
         properties[key] = options[key].value;