Fix private scope issues in ol/interaction/*

src/ol/interaction/DoubleClickZoom.js

@@ -20,9 +20,7 @@ class DoubleClickZoom extends Interaction {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    super({
+    super();
-      handleEvent: handleEvent,
-    });
 
     const options = opt_options ? opt_options : {};
 
@@ -38,28 +36,27 @@ class DoubleClickZoom extends Interaction {
      */
     this.duration_ = options.duration !== undefined ? options.duration : 250;
   }
-}
 
-/**
+  /**
- * Handles the {@link module:ol/MapBrowserEvent map browser event} (if it was a
+   * Handles the {@link module:ol/MapBrowserEvent map browser event} (if it was a
- * doubleclick) and eventually zooms the map.
+   * doubleclick) and eventually zooms the map.
- * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
+   * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
- * @return {boolean} `false` to stop event propagation.
+   * @return {boolean} `false` to stop event propagation.
- * @this {DoubleClickZoom}
+   */
- */
+  handleEvent(mapBrowserEvent) {
-function handleEvent(mapBrowserEvent) {
+    let stopEvent = false;
-  let stopEvent = false;
+    if (mapBrowserEvent.type == MapBrowserEventType.DBLCLICK) {
-  if (mapBrowserEvent.type == MapBrowserEventType.DBLCLICK) {
+      const browserEvent = /** @type {MouseEvent} */ (mapBrowserEvent.originalEvent);
-    const browserEvent = /** @type {MouseEvent} */ (mapBrowserEvent.originalEvent);
+      const map = mapBrowserEvent.map;
-    const map = mapBrowserEvent.map;
+      const anchor = mapBrowserEvent.coordinate;
-    const anchor = mapBrowserEvent.coordinate;
+      const delta = browserEvent.shiftKey ? -this.delta_ : this.delta_;
-    const delta = browserEvent.shiftKey ? -this.delta_ : this.delta_;
+      const view = map.getView();
-    const view = map.getView();
+      zoomByDelta(view, delta, anchor, this.duration_);
-    zoomByDelta(view, delta, anchor, this.duration_);
+      mapBrowserEvent.preventDefault();
-    mapBrowserEvent.preventDefault();
+      stopEvent = true;
-    stopEvent = true;
+    }
+    return !stopEvent;
   }
-  return !stopEvent;
 }
 
 export default DoubleClickZoom;

src/ol/interaction/DragAndDrop.js

@@ -172,10 +172,10 @@ class DragAndDrop extends Interaction {
     if (map) {
       const dropArea = this.target ? this.target : map.getViewport();
       this.dropListenKeys_ = [
-        listen(dropArea, EventType.DROP, handleDrop, this),
+        listen(dropArea, EventType.DROP, this.handleDrop, this),
-        listen(dropArea, EventType.DRAGENTER, handleStop, this),
+        listen(dropArea, EventType.DRAGENTER, this.handleStop, this),
-        listen(dropArea, EventType.DRAGOVER, handleStop, this),
+        listen(dropArea, EventType.DRAGOVER, this.handleStop, this),
-        listen(dropArea, EventType.DROP, handleStop, this),
+        listen(dropArea, EventType.DROP, this.handleStop, this),
       ];
     }
   }
@@ -234,32 +234,31 @@ class DragAndDrop extends Interaction {
       this.dropListenKeys_ = null;
     }
   }
-}
 
-/**
+  /**
- * @param {DragEvent} event Event.
+   * @param {DragEvent} event Event.
- * @this {DragAndDrop}
+   */
- */
+  handleDrop(event) {
-function handleDrop(event) {
+    const files = event.dataTransfer.files;
-  const files = event.dataTransfer.files;
+    for (let i = 0, ii = files.length; i < ii; ++i) {
-  for (let i = 0, ii = files.length; i < ii; ++i) {
+      const file = files.item(i);
-    const file = files.item(i);
+      const reader = new FileReader();
-    const reader = new FileReader();
+      reader.addEventListener(
-    reader.addEventListener(
+        EventType.LOAD,
-      EventType.LOAD,
+        this.handleResult_.bind(this, file)
-      this.handleResult_.bind(this, file)
+      );
-    );
+      reader.readAsText(file);
-    reader.readAsText(file);
+    }
+  }
+
+  /**
+   * @param {DragEvent} event Event.
+   */
+  handleStop(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'copy';
   }
 }
 
-/**
- * @param {DragEvent} event Event.
- */
-function handleStop(event) {
-  event.stopPropagation();
-  event.preventDefault();
-  event.dataTransfer.dropEffect = 'copy';
-}
-
 export default DragAndDrop;

src/ol/interaction/DragBox.js

@@ -5,7 +5,6 @@
 import Event from '../events/Event.js';
 import PointerInteraction from './Pointer.js';
 import RenderBox from '../render/Box.js';
-import {VOID} from '../functions.js';
 import {mouseActionButton} from '../events/condition.js';
 
 /**
@@ -120,12 +119,9 @@ class DragBox extends PointerInteraction {
      */
     this.minArea_ = options.minArea !== undefined ? options.minArea : 64;
 
-    /**
+    if (options.onBoxEnd) {
-     * Function to execute just before `onboxend` is fired
+      this.onBoxEnd = options.onBoxEnd;
-     * @type {function(this:DragBox, import("../MapBrowserEvent.js").default): void}
+    }
-     * @private
-     */
-    this.onBoxEnd_ = options.onBoxEnd ? options.onBoxEnd : VOID;
 
     /**
      * @type {import("../pixel.js").Pixel}
@@ -203,7 +199,7 @@ class DragBox extends PointerInteraction {
         mapBrowserEvent.pixel
       )
     ) {
-      this.onBoxEnd_(mapBrowserEvent);
+      this.onBoxEnd(mapBrowserEvent);
       this.dispatchEvent(
         new DragBoxEvent(
           DragBoxEventType.BOXEND,
@@ -237,6 +233,12 @@ class DragBox extends PointerInteraction {
       return false;
     }
   }
+
+  /**
+   * Function to execute just before `onboxend` is fired
+   * @param {import("../MapBrowserEvent.js").default} event Event.
+   */
+  onBoxEnd(event) {}
 }
 
 export default DragBox;

src/ol/interaction/DragZoom.js

@@ -49,7 +49,6 @@ class DragZoom extends DragBox {
       condition: condition,
       className: options.className || 'ol-dragzoom',
       minArea: options.minArea,
-      onBoxEnd: onBoxEnd,
     });
 
     /**
@@ -64,40 +63,41 @@ class DragZoom extends DragBox {
      */
     this.out_ = options.out !== undefined ? options.out : false;
   }
-}
 
-/**
+  /**
- * @this {DragZoom}
+   * Function to execute just before `onboxend` is fired
- */
+   * @param {import("../MapBrowserEvent.js").default} event Event.
-function onBoxEnd() {
+   */
-  const map = this.getMap();
+  onBoxEnd(event) {
-  const view = /** @type {!import("../View.js").default} */ (map.getView());
+    const map = this.getMap();
-  const size = /** @type {!import("../size.js").Size} */ (map.getSize());
+    const view = /** @type {!import("../View.js").default} */ (map.getView());
-  let extent = this.getGeometry().getExtent();
+    const size = /** @type {!import("../size.js").Size} */ (map.getSize());
+    let extent = this.getGeometry().getExtent();
 
-  if (this.out_) {
+    if (this.out_) {
-    const mapExtent = view.calculateExtentInternal(size);
+      const mapExtent = view.calculateExtentInternal(size);
-    const boxPixelExtent = createOrUpdateFromCoordinates([
+      const boxPixelExtent = createOrUpdateFromCoordinates([
-      map.getPixelFromCoordinateInternal(getBottomLeft(extent)),
+        map.getPixelFromCoordinateInternal(getBottomLeft(extent)),
-      map.getPixelFromCoordinateInternal(getTopRight(extent)),
+        map.getPixelFromCoordinateInternal(getTopRight(extent)),
-    ]);
+      ]);
-    const factor = view.getResolutionForExtentInternal(boxPixelExtent, size);
+      const factor = view.getResolutionForExtentInternal(boxPixelExtent, size);
 
-    scaleFromCenter(mapExtent, 1 / factor);
+      scaleFromCenter(mapExtent, 1 / factor);
-    extent = mapExtent;
+      extent = mapExtent;
+    }
+
+    const resolution = view.getConstrainedResolution(
+      view.getResolutionForExtentInternal(extent, size)
+    );
+    const center = view.getConstrainedCenter(getCenter(extent), resolution);
+
+    view.animateInternal({
+      resolution: resolution,
+      center: center,
+      duration: this.duration_,
+      easing: easeOut,
+    });
   }
-
-  const resolution = view.getConstrainedResolution(
-    view.getResolutionForExtentInternal(extent, size)
-  );
-  const center = view.getConstrainedCenter(getCenter(extent), resolution);
-
-  view.animateInternal({
-    resolution: resolution,
-    center: center,
-    duration: this.duration_,
-    easing: easeOut,
-  });
 }
 
 export default DragZoom;

src/ol/interaction/Interaction.js

@@ -31,13 +31,13 @@ import {easeOut, linear} from '../easing.js';
  */
 class Interaction extends BaseObject {
   /**
-   * @param {InteractionOptions} options Options.
+   * @param {InteractionOptions=} opt_options Options.
    */
-  constructor(options) {
+  constructor(opt_options) {
     super();
 
-    if (options.handleEvent) {
+    if (opt_options && opt_options.handleEvent) {
-      this.handleEvent = options.handleEvent;
+      this.handleEvent = opt_options.handleEvent;
     }
 
     /**

src/ol/interaction/KeyboardPan.js

@@ -37,9 +37,7 @@ class KeyboardPan extends Interaction {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    super({
+    super();
-      handleEvent: handleEvent,
-    });
 
     const options = opt_options || {};
 
@@ -76,50 +74,50 @@ class KeyboardPan extends Interaction {
     this.pixelDelta_ =
       options.pixelDelta !== undefined ? options.pixelDelta : 128;
   }
-}
 
-/**
+  /**
- * Handles the {@link module:ol/MapBrowserEvent map browser event} if it was a
+   * Handles the {@link module:ol/MapBrowserEvent map browser event} if it was a
- * `KeyEvent`, and decides the direction to pan to (if an arrow key was
+   * `KeyEvent`, and decides the direction to pan to (if an arrow key was
- * pressed).
+   * pressed).
- * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
+   * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
- * @return {boolean} `false` to stop event propagation.
+   * @return {boolean} `false` to stop event propagation.
- * @this {KeyboardPan}
+   * @this {KeyboardPan}
- */
+   */
-function handleEvent(mapBrowserEvent) {
+  handleEvent(mapBrowserEvent) {
-  let stopEvent = false;
+    let stopEvent = false;
-  if (mapBrowserEvent.type == EventType.KEYDOWN) {
+    if (mapBrowserEvent.type == EventType.KEYDOWN) {
-    const keyEvent = /** @type {KeyboardEvent} */ (mapBrowserEvent.originalEvent);
+      const keyEvent = /** @type {KeyboardEvent} */ (mapBrowserEvent.originalEvent);
-    const keyCode = keyEvent.keyCode;
+      const keyCode = keyEvent.keyCode;
-    if (
+      if (
-      this.condition_(mapBrowserEvent) &&
+        this.condition_(mapBrowserEvent) &&
-      (keyCode == KeyCode.DOWN ||
+        (keyCode == KeyCode.DOWN ||
-        keyCode == KeyCode.LEFT ||
+          keyCode == KeyCode.LEFT ||
-        keyCode == KeyCode.RIGHT ||
+          keyCode == KeyCode.RIGHT ||
-        keyCode == KeyCode.UP)
+          keyCode == KeyCode.UP)
-    ) {
+      ) {
-      const map = mapBrowserEvent.map;
+        const map = mapBrowserEvent.map;
-      const view = map.getView();
+        const view = map.getView();
-      const mapUnitsDelta = view.getResolution() * this.pixelDelta_;
+        const mapUnitsDelta = view.getResolution() * this.pixelDelta_;
-      let deltaX = 0,
+        let deltaX = 0,
-        deltaY = 0;
+          deltaY = 0;
-      if (keyCode == KeyCode.DOWN) {
+        if (keyCode == KeyCode.DOWN) {
-        deltaY = -mapUnitsDelta;
+          deltaY = -mapUnitsDelta;
-      } else if (keyCode == KeyCode.LEFT) {
+        } else if (keyCode == KeyCode.LEFT) {
-        deltaX = -mapUnitsDelta;
+          deltaX = -mapUnitsDelta;
-      } else if (keyCode == KeyCode.RIGHT) {
+        } else if (keyCode == KeyCode.RIGHT) {
-        deltaX = mapUnitsDelta;
+          deltaX = mapUnitsDelta;
-      } else {
+        } else {
-        deltaY = mapUnitsDelta;
+          deltaY = mapUnitsDelta;
+        }
+        const delta = [deltaX, deltaY];
+        rotateCoordinate(delta, view.getRotation());
+        pan(view, delta, this.duration_);
+        mapBrowserEvent.preventDefault();
+        stopEvent = true;
       }
-      const delta = [deltaX, deltaY];
-      rotateCoordinate(delta, view.getRotation());
-      pan(view, delta, this.duration_);
-      mapBrowserEvent.preventDefault();
-      stopEvent = true;
     }
+    return !stopEvent;
   }
-  return !stopEvent;
 }
 
 export default KeyboardPan;

src/ol/interaction/KeyboardZoom.js

@@ -33,9 +33,7 @@ class KeyboardZoom extends Interaction {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    super({
+    super();
-      handleEvent: handleEvent,
-    });
 
     const options = opt_options ? opt_options : {};
 
@@ -57,37 +55,38 @@ class KeyboardZoom extends Interaction {
      */
     this.duration_ = options.duration !== undefined ? options.duration : 100;
   }
-}
 
-/**
+  /**
- * Handles the {@link module:ol/MapBrowserEvent map browser event} if it was a
+   * Handles the {@link module:ol/MapBrowserEvent map browser event} if it was a
- * `KeyEvent`, and decides whether to zoom in or out (depending on whether the
+   * `KeyEvent`, and decides whether to zoom in or out (depending on whether the
- * key pressed was '+' or '-').
+   * key pressed was '+' or '-').
- * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
+   * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
- * @return {boolean} `false` to stop event propagation.
+   * @return {boolean} `false` to stop event propagation.
- * @this {KeyboardZoom}
+   * @this {KeyboardZoom}
- */
+   */
-function handleEvent(mapBrowserEvent) {
+  handleEvent(mapBrowserEvent) {
-  let stopEvent = false;
+    let stopEvent = false;
-  if (
-    mapBrowserEvent.type == EventType.KEYDOWN ||
-    mapBrowserEvent.type == EventType.KEYPRESS
-  ) {
-    const keyEvent = /** @type {KeyboardEvent} */ (mapBrowserEvent.originalEvent);
-    const charCode = keyEvent.charCode;
     if (
-      this.condition_(mapBrowserEvent) &&
+      mapBrowserEvent.type == EventType.KEYDOWN ||
-      (charCode == '+'.charCodeAt(0) || charCode == '-'.charCodeAt(0))
+      mapBrowserEvent.type == EventType.KEYPRESS
     ) {
-      const map = mapBrowserEvent.map;
+      const keyEvent = /** @type {KeyboardEvent} */ (mapBrowserEvent.originalEvent);
-      const delta = charCode == '+'.charCodeAt(0) ? this.delta_ : -this.delta_;
+      const charCode = keyEvent.charCode;
-      const view = map.getView();
+      if (
-      zoomByDelta(view, delta, undefined, this.duration_);
+        this.condition_(mapBrowserEvent) &&
-      mapBrowserEvent.preventDefault();
+        (charCode == '+'.charCodeAt(0) || charCode == '-'.charCodeAt(0))
-      stopEvent = true;
+      ) {
+        const map = mapBrowserEvent.map;
+        const delta =
+          charCode == '+'.charCodeAt(0) ? this.delta_ : -this.delta_;
+        const view = map.getView();
+        zoomByDelta(view, delta, undefined, this.duration_);
+        mapBrowserEvent.preventDefault();
+        stopEvent = true;
+      }
     }
+    return !stopEvent;
   }
-  return !stopEvent;
 }
 
 export default KeyboardZoom;

src/ol/interaction/Select.js

@@ -153,9 +153,7 @@ class Select extends Interaction {
    * @param {Options=} opt_options Options.
    */
   constructor(opt_options) {
-    super({
+    super();
-      handleEvent: handleEvent,
-    });
 
     const options = opt_options ? opt_options : {};
 
@@ -420,110 +418,110 @@ class Select extends Interaction {
   removeFeatureLayerAssociation_(feature) {
     delete this.featureLayerAssociation_[getUid(feature)];
   }
-}
 
-/**
+  /**
- * Handles the {@link module:ol/MapBrowserEvent map browser event} and may change the
+   * Handles the {@link module:ol/MapBrowserEvent map browser event} and may change the
- * selected state of features.
+   * selected state of features.
- * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
+   * @param {import("../MapBrowserEvent.js").default} mapBrowserEvent Map browser event.
- * @return {boolean} `false` to stop event propagation.
+   * @return {boolean} `false` to stop event propagation.
- * @this {Select}
+   * @this {Select}
- */
+   */
-function handleEvent(mapBrowserEvent) {
+  handleEvent(mapBrowserEvent) {
-  if (!this.condition_(mapBrowserEvent)) {
+    if (!this.condition_(mapBrowserEvent)) {
-    return true;
+      return true;
-  }
-  const add = this.addCondition_(mapBrowserEvent);
-  const remove = this.removeCondition_(mapBrowserEvent);
-  const toggle = this.toggleCondition_(mapBrowserEvent);
-  const set = !add && !remove && !toggle;
-  const map = mapBrowserEvent.map;
-  const features = this.getFeatures();
-  const deselected = [];
-  const selected = [];
-  if (set) {
-    // Replace the currently selected feature(s) with the feature(s) at the
-    // pixel, or clear the selected feature(s) if there is no feature at
-    // the pixel.
-    clear(this.featureLayerAssociation_);
-    map.forEachFeatureAtPixel(
-      mapBrowserEvent.pixel,
-      /**
-       * @param {import("../Feature.js").FeatureLike} feature Feature.
-       * @param {import("../layer/Layer.js").default} layer Layer.
-       * @return {boolean|undefined} Continue to iterate over the features.
-       */
-      function (feature, layer) {
-        if (this.filter_(feature, layer)) {
-          selected.push(feature);
-          this.addFeatureLayerAssociation_(feature, layer);
-          return !this.multi_;
-        }
-      }.bind(this),
-      {
-        layerFilter: this.layerFilter_,
-        hitTolerance: this.hitTolerance_,
-      }
-    );
-    for (let i = features.getLength() - 1; i >= 0; --i) {
-      const feature = features.item(i);
-      const index = selected.indexOf(feature);
-      if (index > -1) {
-        // feature is already selected
-        selected.splice(index, 1);
-      } else {
-        features.remove(feature);
-        deselected.push(feature);
-      }
     }
-    if (selected.length !== 0) {
+    const add = this.addCondition_(mapBrowserEvent);
-      features.extend(selected);
+    const remove = this.removeCondition_(mapBrowserEvent);
-    }
+    const toggle = this.toggleCondition_(mapBrowserEvent);
-  } else {
+    const set = !add && !remove && !toggle;
-    // Modify the currently selected feature(s).
+    const map = mapBrowserEvent.map;
-    map.forEachFeatureAtPixel(
+    const features = this.getFeatures();
-      mapBrowserEvent.pixel,
+    const deselected = [];
-      /**
+    const selected = [];
-       * @param {import("../Feature.js").FeatureLike} feature Feature.
+    if (set) {
-       * @param {import("../layer/Layer.js").default} layer Layer.
+      // Replace the currently selected feature(s) with the feature(s) at the
-       * @return {boolean|undefined} Continue to iterate over the features.
+      // pixel, or clear the selected feature(s) if there is no feature at
-       */
+      // the pixel.
-      function (feature, layer) {
+      clear(this.featureLayerAssociation_);
-        if (this.filter_(feature, layer)) {
+      map.forEachFeatureAtPixel(
-          if ((add || toggle) && !includes(features.getArray(), feature)) {
+        mapBrowserEvent.pixel,
+        /**
+         * @param {import("../Feature.js").FeatureLike} feature Feature.
+         * @param {import("../layer/Layer.js").default} layer Layer.
+         * @return {boolean|undefined} Continue to iterate over the features.
+         */
+        function (feature, layer) {
+          if (this.filter_(feature, layer)) {
             selected.push(feature);
             this.addFeatureLayerAssociation_(feature, layer);
-          } else if (
+            return !this.multi_;
-            (remove || toggle) &&
-            includes(features.getArray(), feature)
-          ) {
-            deselected.push(feature);
-            this.removeFeatureLayerAssociation_(feature);
           }
-          return !this.multi_;
+        }.bind(this),
+        {
+          layerFilter: this.layerFilter_,
+          hitTolerance: this.hitTolerance_,
+        }
+      );
+      for (let i = features.getLength() - 1; i >= 0; --i) {
+        const feature = features.item(i);
+        const index = selected.indexOf(feature);
+        if (index > -1) {
+          // feature is already selected
+          selected.splice(index, 1);
+        } else {
+          features.remove(feature);
+          deselected.push(feature);
         }
-      }.bind(this),
-      {
-        layerFilter: this.layerFilter_,
-        hitTolerance: this.hitTolerance_,
       }
-    );
+      if (selected.length !== 0) {
-    for (let j = deselected.length - 1; j >= 0; --j) {
+        features.extend(selected);
-      features.remove(deselected[j]);
+      }
+    } else {
+      // Modify the currently selected feature(s).
+      map.forEachFeatureAtPixel(
+        mapBrowserEvent.pixel,
+        /**
+         * @param {import("../Feature.js").FeatureLike} feature Feature.
+         * @param {import("../layer/Layer.js").default} layer Layer.
+         * @return {boolean|undefined} Continue to iterate over the features.
+         */
+        function (feature, layer) {
+          if (this.filter_(feature, layer)) {
+            if ((add || toggle) && !includes(features.getArray(), feature)) {
+              selected.push(feature);
+              this.addFeatureLayerAssociation_(feature, layer);
+            } else if (
+              (remove || toggle) &&
+              includes(features.getArray(), feature)
+            ) {
+              deselected.push(feature);
+              this.removeFeatureLayerAssociation_(feature);
+            }
+            return !this.multi_;
+          }
+        }.bind(this),
+        {
+          layerFilter: this.layerFilter_,
+          hitTolerance: this.hitTolerance_,
+        }
+      );
+      for (let j = deselected.length - 1; j >= 0; --j) {
+        features.remove(deselected[j]);
+      }
+      features.extend(selected);
     }
-    features.extend(selected);
+    if (selected.length > 0 || deselected.length > 0) {
+      this.dispatchEvent(
+        new SelectEvent(
+          SelectEventType.SELECT,
+          selected,
+          deselected,
+          mapBrowserEvent
+        )
+      );
+    }
+    return true;
   }
-  if (selected.length > 0 || deselected.length > 0) {
-    this.dispatchEvent(
-      new SelectEvent(
-        SelectEventType.SELECT,
-        selected,
-        deselected,
-        mapBrowserEvent
-      )
-    );
-  }
-  return true;
 }
 
 /**

test/spec/ol/interaction/dragzoom.test.js

@@ -70,7 +70,7 @@ describe('ol.interaction.DragZoom', function () {
       box.geometry_ = polygonFromExtent(extent);
       interaction.box_ = box;
 
-      interaction.onBoxEnd_();
+      interaction.onBoxEnd();
       setTimeout(function () {
         const view = map.getView();
         const center = view.getCenterInternal();
@@ -93,7 +93,7 @@ describe('ol.interaction.DragZoom', function () {
 
       map.getView().setResolution(0.25);
       setTimeout(function () {
-        interaction.onBoxEnd_();
+        interaction.onBoxEnd();
         setTimeout(function () {
           const view = map.getView();
           const resolution = view.getResolution();