Merge pull request #9973 from tkohr/user-projection-map

Make map work with user projected coordinates

src/ol/MapBrowserEvent.js

@@ -74,7 +74,7 @@ class MapBrowserEvent extends MapEvent {
    */
   get coordinate() {
     if (!this.coordinate_) {
-      this.coordinate_ = this.map.getCoordinateFromPixel(this.pixel);
+      this.coordinate_ = this.map.getCoordinateFromPixelInternal(this.pixel);
     }
     return this.coordinate_;
   }

src/ol/Overlay.js

@@ -419,14 +419,14 @@ class Overlay extends BaseObject {
 
       if (delta[0] !== 0 || delta[1] !== 0) {
         const center = /** @type {import("./coordinate.js").Coordinate} */ (map.getView().getCenterInternal());
-        const centerPx = map.getPixelFromCoordinate(center);
+        const centerPx = map.getPixelFromCoordinateInternal(center);
         const newCenterPx = [
           centerPx[0] + delta[0],
           centerPx[1] + delta[1]
         ];
 
         map.getView().animateInternal({
-          center: map.getCoordinateFromPixel(newCenterPx),
+          center: map.getCoordinateFromPixelInternal(newCenterPx),
           duration: this.autoPanAnimation.duration,
           easing: this.autoPanAnimation.easing
         });
@@ -488,7 +488,7 @@ class Overlay extends BaseObject {
       return;
     }
 
-    const pixel = map.getPixelFromCoordinate(position);
+    const pixel = map.getPixelFromCoordinateInternal(position);
     const mapSize = map.getSize();
     this.updateRenderedPosition(pixel, mapSize);
   }

src/ol/PluggableMap.js

@@ -27,6 +27,7 @@ import LayerGroup from './layer/Group.js';
 import {hasArea} from './size.js';
 import {DROP} from './structs/PriorityQueue.js';
 import {create as createTransform, apply as applyTransform} from './transform.js';
+import {toUserCoordinate, fromUserCoordinate} from './proj.js';
 
 
 /**
@@ -628,7 +629,7 @@ class PluggableMap extends BaseObject {
   }
 
   /**
-   * Returns the coordinate in view projection for a browser event.
+   * Returns the coordinate in user projection for a browser event.
    * @param {Event} event Event.
    * @return {import("./coordinate.js").Coordinate} Coordinate.
    * @api
@@ -637,6 +638,15 @@ class PluggableMap extends BaseObject {
     return this.getCoordinateFromPixel(this.getEventPixel(event));
   }
 
+  /**
+   * Returns the coordinate in view projection for a browser event.
+   * @param {Event} event Event.
+   * @return {import("./coordinate.js").Coordinate} Coordinate.
+   */
+  getEventCoordinateInternal(event) {
+    return this.getCoordinateFromPixelInternal(this.getEventPixel(event));
+  }
+
   /**
    * Returns the map pixel position for a browser event relative to the viewport.
    * @param {Event|TouchEvent} event Event.
@@ -686,12 +696,22 @@ class PluggableMap extends BaseObject {
 
   /**
    * Get the coordinate for a given pixel.  This returns a coordinate in the
-   * map view projection.
+   * user projection.
    * @param {import("./pixel.js").Pixel} pixel Pixel position in the map viewport.
    * @return {import("./coordinate.js").Coordinate} The coordinate for the pixel position.
    * @api
    */
   getCoordinateFromPixel(pixel) {
+    return toUserCoordinate(this.getCoordinateFromPixelInternal(pixel), this.getView().getProjection());
+  }
+
+  /**
+   * Get the coordinate for a given pixel.  This returns a coordinate in the
+   * map view projection.
+   * @param {import("./pixel.js").Pixel} pixel Pixel position in the map viewport.
+   * @return {import("./coordinate.js").Coordinate} The coordinate for the pixel position.
+   */
+  getCoordinateFromPixelInternal(pixel) {
     const frameState = this.frameState_;
     if (!frameState) {
       return null;
@@ -783,13 +803,24 @@ class PluggableMap extends BaseObject {
   }
 
   /**
-   * Get the pixel for a coordinate.  This takes a coordinate in the map view
+   * Get the pixel for a coordinate.  This takes a coordinate in the user
    * projection and returns the corresponding pixel.
    * @param {import("./coordinate.js").Coordinate} coordinate A map coordinate.
    * @return {import("./pixel.js").Pixel} A pixel position in the map viewport.
    * @api
    */
   getPixelFromCoordinate(coordinate) {
+    const viewCoordinate = fromUserCoordinate(coordinate, this.getView().getProjection());
+    return this.getPixelFromCoordinateInternal(viewCoordinate);
+  }
+
+  /**
+   * Get the pixel for a coordinate.  This takes a coordinate in the map view
+   * projection and returns the corresponding pixel.
+   * @param {import("./coordinate.js").Coordinate} coordinate A map coordinate.
+   * @return {import("./pixel.js").Pixel} A pixel position in the map viewport.
+   */
+  getPixelFromCoordinateInternal(coordinate) {
     const frameState = this.frameState_;
     if (!frameState) {
       return null;

src/ol/control/MousePosition.js

@@ -5,7 +5,7 @@ import {listen} from '../events.js';
 import EventType from '../pointer/EventType.js';
 import {getChangeEventType} from '../Object.js';
 import Control from './Control.js';
-import {getTransformFromProjections, identityTransform, get as getProjection} from '../proj.js';
+import {getTransformFromProjections, identityTransform, get as getProjection, getUserProjection} from '../proj.js';
 import '@openlayers/pepjs';
 
 
@@ -218,8 +218,13 @@ class MousePosition extends Control {
         }
       }
       const map = this.getMap();
-      const coordinate = map.getCoordinateFromPixel(pixel);
+      const coordinate = map.getCoordinateFromPixelInternal(pixel);
       if (coordinate) {
+        const userProjection = getUserProjection();
+        if (userProjection) {
+          this.transform_ = getTransformFromProjections(
+            this.mapProjection_, userProjection);
+        }
         this.transform_(coordinate, coordinate);
         const coordinateFormat = this.getCoordinateFormat();
         if (coordinateFormat) {

src/ol/control/OverviewMap.js

@@ -223,13 +223,13 @@ class OverviewMap extends Control {
 
     const move = function(event) {
       const position = /** @type {?} */ (computeDesiredMousePosition(event));
-      const coordinates = ovmap.getEventCoordinate(/** @type {Event} */ (position));
+      const coordinates = ovmap.getEventCoordinateInternal(/** @type {Event} */ (position));
 
       overlay.setPosition(coordinates);
     };
 
     const endMoving = function(event) {
-      const coordinates = ovmap.getEventCoordinate(event);
+      const coordinates = ovmap.getEventCoordinateInternal(event);
 
       scope.getMap().getView().setCenterInternal(coordinates);
 
@@ -361,9 +361,9 @@ class OverviewMap extends Control {
     const ovextent = ovview.calculateExtentInternal(ovmapSize);
 
     const topLeftPixel =
-        ovmap.getPixelFromCoordinate(getTopLeft(extent));
+        ovmap.getPixelFromCoordinateInternal(getTopLeft(extent));
     const bottomRightPixel =
-        ovmap.getPixelFromCoordinate(getBottomRight(extent));
+        ovmap.getPixelFromCoordinateInternal(getBottomRight(extent));
 
     const boxWidth = Math.abs(topLeftPixel[0] - bottomRightPixel[0]);
     const boxHeight = Math.abs(topLeftPixel[1] - bottomRightPixel[1]);

src/ol/interaction/DragPan.js

@@ -114,8 +114,8 @@ class DragPan extends PointerInteraction {
         const distance = this.kinetic_.getDistance();
         const angle = this.kinetic_.getAngle();
         const center = view.getCenterInternal();
-        const centerpx = map.getPixelFromCoordinate(center);
+        const centerpx = map.getPixelFromCoordinateInternal(center);
-        const dest = map.getCoordinateFromPixel([
+        const dest = map.getCoordinateFromPixelInternal([
           centerpx[0] - distance * Math.cos(angle),
           centerpx[1] - distance * Math.sin(angle)
         ]);

src/ol/interaction/DragZoom.js

@@ -75,8 +75,8 @@ function onBoxEnd() {
   if (this.out_) {
     const mapExtent = view.calculateExtentInternal(size);
     const boxPixelExtent = createOrUpdateFromCoordinates([
-      map.getPixelFromCoordinate(getBottomLeft(extent)),
+      map.getPixelFromCoordinateInternal(getBottomLeft(extent)),
-      map.getPixelFromCoordinate(getTopRight(extent))]);
+      map.getPixelFromCoordinateInternal(getTopRight(extent))]);
     const factor = view.getResolutionForExtentInternal(boxPixelExtent, size);
 
     scaleFromCenter(mapExtent, 1 / factor);

src/ol/interaction/Draw.js

@@ -639,7 +639,7 @@ class Draw extends PointerInteraction {
         const map = event.map;
         for (let i = 0, ii = potentiallyFinishCoordinates.length; i < ii; i++) {
           const finishCoordinate = potentiallyFinishCoordinates[i];
-          const finishPixel = map.getPixelFromCoordinate(finishCoordinate);
+          const finishPixel = map.getPixelFromCoordinateInternal(finishCoordinate);
           const pixel = event.pixel;
           const dx = pixel[0] - finishPixel[0];
           const dy = pixel[1] - finishPixel[1];

src/ol/interaction/Extent.js

@@ -13,6 +13,7 @@ import PointerInteraction from './Pointer.js';
 import VectorLayer from '../layer/Vector.js';
 import VectorSource from '../source/Vector.js';
 import {createEditingStyle} from '../style/Style.js';
+import {toUserExtent} from '../proj.js';
 
 
 /**
@@ -177,12 +178,12 @@ class Extent extends PointerInteraction {
    * @private
    */
   snapToVertex_(pixel, map) {
-    const pixelCoordinate = map.getCoordinateFromPixel(pixel);
+    const pixelCoordinate = map.getCoordinateFromPixelInternal(pixel);
     const sortByDistance = function(a, b) {
       return squaredDistanceToSegment(pixelCoordinate, a) -
           squaredDistanceToSegment(pixelCoordinate, b);
     };
-    const extent = this.getExtent();
+    const extent = this.getExtentInternal();
     if (extent) {
       //convert extents to line segments and find the segment closest to pixelCoordinate
       const segments = getSegments(extent);
@@ -191,13 +192,13 @@ class Extent extends PointerInteraction {
 
       let vertex = (closestOnSegment(pixelCoordinate,
         closestSegment));
-      const vertexPixel = map.getPixelFromCoordinate(vertex);
+      const vertexPixel = map.getPixelFromCoordinateInternal(vertex);
 
       //if the distance is within tolerance, snap to the segment
       if (coordinateDistance(pixel, vertexPixel) <= this.pixelTolerance_) {
         //test if we should further snap to a vertex
-        const pixel1 = map.getPixelFromCoordinate(closestSegment[0]);
+        const pixel1 = map.getPixelFromCoordinateInternal(closestSegment[0]);
-        const pixel2 = map.getPixelFromCoordinate(closestSegment[1]);
+        const pixel2 = map.getPixelFromCoordinateInternal(closestSegment[1]);
         const squaredDist1 = squaredCoordinateDistance(vertexPixel, pixel1);
         const squaredDist2 = squaredCoordinateDistance(vertexPixel, pixel2);
         const dist = Math.sqrt(Math.min(squaredDist1, squaredDist2));
@@ -222,7 +223,7 @@ class Extent extends PointerInteraction {
 
     let vertex = this.snapToVertex_(pixel, map);
     if (!vertex) {
-      vertex = map.getCoordinateFromPixel(pixel);
+      vertex = map.getCoordinateFromPixelInternal(pixel);
     }
     this.createOrUpdatePointerFeature_(vertex);
   }
@@ -295,7 +296,7 @@ class Extent extends PointerInteraction {
     const pixel = mapBrowserEvent.pixel;
     const map = mapBrowserEvent.map;
 
-    const extent = this.getExtent();
+    const extent = this.getExtentInternal();
     let vertex = this.snapToVertex_(pixel, map);
 
     //find the extent corner opposite the passed corner
@@ -338,7 +339,7 @@ class Extent extends PointerInteraction {
       }
     //no snap - new bbox
     } else {
-      vertex = map.getCoordinateFromPixel(pixel);
+      vertex = map.getCoordinateFromPixelInternal(pixel);
       this.setExtent([vertex[0], vertex[1], vertex[0], vertex[1]]);
       this.pointerHandler_ = getPointHandler(vertex);
     }
@@ -363,7 +364,7 @@ class Extent extends PointerInteraction {
   handleUpEvent(mapBrowserEvent) {
     this.pointerHandler_ = null;
     //If bbox is zero area, set to null;
-    const extent = this.getExtent();
+    const extent = this.getExtentInternal();
     if (!extent || getArea(extent) === 0) {
       this.setExtent(null);
     }
@@ -380,12 +381,22 @@ class Extent extends PointerInteraction {
   }
 
   /**
-   * Returns the current drawn extent in the view projection
+   * Returns the current drawn extent in the view projection (or user projection if set)
    *
    * @return {import("../extent.js").Extent} Drawn extent in the view projection.
    * @api
    */
   getExtent() {
+    return toUserExtent(this.getExtentInternal(), this.getMap().getView().getProjection());
+  }
+
+  /**
+   * Returns the current drawn extent in the view projection
+   *
+   * @return {import("../extent.js").Extent} Drawn extent in the view projection.
+   * @api
+   */
+  getExtentInternal() {
     return this.extent_;
   }
 

src/ol/interaction/Modify.js

@@ -775,7 +775,7 @@ class Modify extends PointerInteraction {
       return false;
     }
     this.handlePointerAtPixel_(evt.pixel, evt.map);
-    const pixelCoordinate = evt.map.getCoordinateFromPixel(evt.pixel);
+    const pixelCoordinate = evt.map.getCoordinateFromPixelInternal(evt.pixel);
     this.dragSegments_.length = 0;
     this.modified_ = false;
     const vertexFeature = this.vertexFeature_;
@@ -883,7 +883,7 @@ class Modify extends PointerInteraction {
    * @private
    */
   handlePointerAtPixel_(pixel, map) {
-    const pixelCoordinate = map.getCoordinateFromPixel(pixel);
+    const pixelCoordinate = map.getCoordinateFromPixelInternal(pixel);
     const sortByDistance = function(a, b) {
       return pointDistanceToSegmentDataSquared(pixelCoordinate, a) -
           pointDistanceToSegmentDataSquared(pixelCoordinate, b);
@@ -899,7 +899,7 @@ class Modify extends PointerInteraction {
       const node = nodes[0];
       const closestSegment = node.segment;
       let vertex = closestOnSegmentData(pixelCoordinate, node);
-      const vertexPixel = map.getPixelFromCoordinate(vertex);
+      const vertexPixel = map.getPixelFromCoordinateInternal(vertex);
       let dist = coordinateDistance(pixel, vertexPixel);
       if (dist <= this.pixelTolerance_) {
         /** @type {Object<string, boolean>} */
@@ -911,8 +911,8 @@ class Modify extends PointerInteraction {
           this.snappedToVertex_ = true;
           this.createOrUpdateVertexFeature_(vertex);
         } else {
-          const pixel1 = map.getPixelFromCoordinate(closestSegment[0]);
+          const pixel1 = map.getPixelFromCoordinateInternal(closestSegment[0]);
-          const pixel2 = map.getPixelFromCoordinate(closestSegment[1]);
+          const pixel2 = map.getPixelFromCoordinateInternal(closestSegment[1]);
           const squaredDist1 = squaredCoordinateDistance(vertexPixel, pixel1);
           const squaredDist2 = squaredCoordinateDistance(vertexPixel, pixel2);
           dist = Math.sqrt(Math.min(squaredDist1, squaredDist2));

src/ol/interaction/PinchRotate.js

@@ -112,7 +112,7 @@ class PinchRotate extends PointerInteraction {
     const centroid = centroidFromPointers(this.targetPointers);
     centroid[0] -= viewportPosition.left;
     centroid[1] -= viewportPosition.top;
-    this.anchor_ = map.getCoordinateFromPixel(centroid);
+    this.anchor_ = map.getCoordinateFromPixelInternal(centroid);
 
     // rotate
     if (this.rotating_) {

src/ol/interaction/PinchZoom.js

@@ -91,7 +91,7 @@ class PinchZoom extends PointerInteraction {
     const centroid = centroidFromPointers(this.targetPointers);
     centroid[0] -= viewportPosition.left;
     centroid[1] -= viewportPosition.top;
-    this.anchor_ = map.getCoordinateFromPixel(centroid);
+    this.anchor_ = map.getCoordinateFromPixelInternal(centroid);
 
     // scale, bypass the resolution constraint
     map.render();

src/ol/interaction/Snap.js

@@ -384,9 +384,9 @@ class Snap extends PointerInteraction {
    */
   snapTo(pixel, pixelCoordinate, map) {
 
-    const lowerLeft = map.getCoordinateFromPixel(
+    const lowerLeft = map.getCoordinateFromPixelInternal(
       [pixel[0] - this.pixelTolerance_, pixel[1] + this.pixelTolerance_]);
-    const upperRight = map.getCoordinateFromPixel(
+    const upperRight = map.getCoordinateFromPixelInternal(
       [pixel[0] + this.pixelTolerance_, pixel[1] - this.pixelTolerance_]);
     const box = boundingExtent([lowerLeft, upperRight]);
 
@@ -412,8 +412,8 @@ class Snap extends PointerInteraction {
       const isCircle = segments[0].feature.getGeometry().getType() ===
           GeometryType.CIRCLE;
       if (this.vertex_ && !this.edge_) {
-        pixel1 = map.getPixelFromCoordinate(closestSegment[0]);
+        pixel1 = map.getPixelFromCoordinateInternal(closestSegment[0]);
-        pixel2 = map.getPixelFromCoordinate(closestSegment[1]);
+        pixel2 = map.getPixelFromCoordinateInternal(closestSegment[1]);
         squaredDist1 = squaredCoordinateDistance(pixel, pixel1);
         squaredDist2 = squaredCoordinateDistance(pixel, pixel2);
         dist = Math.sqrt(Math.min(squaredDist1, squaredDist2));
@@ -421,7 +421,7 @@ class Snap extends PointerInteraction {
         if (snappedToVertex) {
           snapped = true;
           vertex = squaredDist1 > squaredDist2 ? closestSegment[1] : closestSegment[0];
-          vertexPixel = map.getPixelFromCoordinate(vertex);
+          vertexPixel = map.getPixelFromCoordinateInternal(vertex);
         }
       } else if (this.edge_) {
         if (isCircle) {
@@ -430,19 +430,19 @@ class Snap extends PointerInteraction {
         } else {
           vertex = closestOnSegment(pixelCoordinate, closestSegment);
         }
-        vertexPixel = map.getPixelFromCoordinate(vertex);
+        vertexPixel = map.getPixelFromCoordinateInternal(vertex);
         if (coordinateDistance(pixel, vertexPixel) <= this.pixelTolerance_) {
           snapped = true;
           if (this.vertex_ && !isCircle) {
-            pixel1 = map.getPixelFromCoordinate(closestSegment[0]);
+            pixel1 = map.getPixelFromCoordinateInternal(closestSegment[0]);
-            pixel2 = map.getPixelFromCoordinate(closestSegment[1]);
+            pixel2 = map.getPixelFromCoordinateInternal(closestSegment[1]);
             squaredDist1 = squaredCoordinateDistance(vertexPixel, pixel1);
             squaredDist2 = squaredCoordinateDistance(vertexPixel, pixel2);
             dist = Math.sqrt(Math.min(squaredDist1, squaredDist2));
             snappedToVertex = dist <= this.pixelTolerance_;
             if (snappedToVertex) {
               vertex = squaredDist1 > squaredDist2 ? closestSegment[1] : closestSegment[0];
-              vertexPixel = map.getPixelFromCoordinate(vertex);
+              vertexPixel = map.getPixelFromCoordinateInternal(vertex);
             }
           }
         }

src/ol/render/Box.js

@@ -105,7 +105,7 @@ class RenderBox extends Disposable {
       endPixel,
       [endPixel[0], startPixel[1]]
     ];
-    const coordinates = pixels.map(this.map_.getCoordinateFromPixel, this.map_);
+    const coordinates = pixels.map(this.map_.getCoordinateFromPixelInternal, this.map_);
     // close the polygon
     coordinates[4] = coordinates[0].slice();
     if (!this.geometry_) {

test/spec/ol/map.test.js

@@ -7,7 +7,7 @@ import View from '../../../src/ol/View.js';
 import {LineString, Point} from '../../../src/ol/geom.js';
 import {focus} from '../../../src/ol/events/condition.js';
 import {defaults as defaultInteractions} from '../../../src/ol/interaction.js';
-import {get as getProjection} from '../../../src/ol/proj.js';
+import {get as getProjection, useGeographic, transform, clearUserProjection} from '../../../src/ol/proj.js';
 import GeoJSON from '../../../src/ol/format/GeoJSON.js';
 import DragPan from '../../../src/ol/interaction/DragPan.js';
 import DoubleClickZoom from '../../../src/ol/interaction/DoubleClickZoom.js';
@@ -734,6 +734,78 @@ describe('ol.Map', function() {
 
     });
 
-  });
+    describe('getCoordinateFromPixel() and getPixelFromCoordinate()', function() {
 
+      let target, view, map;
+      const centerGeographic = [2.460938, 48.850258];
+      const centerMercator = transform(centerGeographic, getProjection('EPSG:4326'), getProjection('EPSG:3857'));
+      const screenCenter = [500, 500];
+
+      beforeEach(function() {
+        target = document.createElement('div');
+
+        const style = target.style;
+        style.position = 'absolute';
+        style.left = '-1000px';
+        style.top = '-1000px';
+        style.width = `${screenCenter[0] * 2}px`;
+        style.height = `${screenCenter[1] * 2}px`;
+        document.body.appendChild(target);
+
+        useGeographic();
+
+        view = new View({
+          center: centerGeographic,
+          zoom: 3
+        });
+        map = new Map({
+          target: target,
+          view: view,
+          layers: [
+            new TileLayer({
+              source: new XYZ({
+                url: '#{x}/{y}/{z}'
+              })
+            })
+          ]
+        });
+      });
+
+      afterEach(function() {
+        map.dispose();
+        document.body.removeChild(target);
+        clearUserProjection();
+      });
+
+      it('gets coordinates in user projection', function(done) {
+        map.renderSync();
+        const coordinateGeographic = map.getCoordinateFromPixel(screenCenter);
+        expect(coordinateGeographic[0]).to.roughlyEqual(centerGeographic[0], 1e-5);
+        expect(coordinateGeographic[1]).to.roughlyEqual(centerGeographic[1], 1e-5);
+        done();
+      });
+
+      it('gets coordinates in view projection', function(done) {
+        map.renderSync();
+        const coordinateMercator = map.getCoordinateFromPixelInternal(screenCenter);
+        expect(coordinateMercator[0]).to.roughlyEqual(centerMercator[0], 1e-5);
+        expect(coordinateMercator[1]).to.roughlyEqual(centerMercator[1], 1e-5);
+        done();
+      });
+
+      it('gets pixel from coordinates in user projection', function(done) {
+        map.renderSync();
+        const pixel = map.getPixelFromCoordinate(centerGeographic);
+        expect(pixel).to.eql(screenCenter);
+        done();
+      });
+
+      it('gets pixel from coordinates in view projection', function(done) {
+        map.renderSync();
+        const pixel = map.getPixelFromCoordinateInternal(centerMercator);
+        expect(pixel).to.eql(screenCenter);
+        done();
+      });
+    });
+  });
 });