User coordinates during drawing

examples/edit-geographic.html

@@ -9,3 +9,7 @@ docs: >
 tags: "geographic"
 ---
 <div id="map" class="map"></div>
+<select id="mode">
+  <option value="modify">select a feature to modify</option>
+  <option value="draw">draw new features</option>
+</select>

examples/edit-geographic.js

@@ -1,17 +1,15 @@
 import {Map, View} from '../src/ol/index.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import {Modify, Select} from '../src/ol/interaction.js';
+import {Modify, Select, Draw} from '../src/ol/interaction.js';
 import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {OSM, Vector as VectorSource} from '../src/ol/source.js';
 import {useGeographic} from '../src/ol/proj.js';
 
 useGeographic();
 
-const vector = new VectorLayer({
-  source: new VectorSource({
-    url: 'data/geojson/countries.geojson',
-    format: new GeoJSON()
-  })
+const source = new VectorSource({
+  url: 'data/geojson/countries.geojson',
+  format: new GeoJSON()
 });
 
 const map = new Map({
@@ -20,7 +18,9 @@ const map = new Map({
     new TileLayer({
       source: new OSM()
     }),
-    vector
+    new VectorLayer({
+      source: source
+    })
   ],
   view: new View({
     center: [0, 0],
@@ -29,9 +29,35 @@ const map = new Map({
 });
 
 const select = new Select();
-map.addInteraction(select);
 
 const modify = new Modify({
   features: select.getFeatures()
 });
-map.addInteraction(modify);
+
+const draw = new Draw({
+  type: 'Polygon',
+  source: source
+});
+
+const mode = document.getElementById('mode');
+function onChange() {
+  switch (mode.value) {
+    case 'draw': {
+      map.removeInteraction(modify);
+      map.removeInteraction(select);
+      map.addInteraction(draw);
+      break;
+    }
+    case 'modify': {
+      map.removeInteraction(draw);
+      map.addInteraction(select);
+      map.addInteraction(modify);
+      break;
+    }
+    default: {
+      // pass
+    }
+  }
+}
+mode.addEventListener('change', onChange);
+onChange();

src/ol/interaction/Draw.js

@@ -417,8 +417,7 @@ class Draw extends PointerInteraction {
         useSpatialIndex: false,
         wrapX: options.wrapX ? options.wrapX : false
       }),
-      style: options.style ? options.style :
-        getDefaultStyleFunction(),
+      style: options.style ? options.style : getDefaultStyleFunction(),
       updateWhileInteracting: true
     });
 
@@ -443,8 +442,7 @@ class Draw extends PointerInteraction {
     if (options.freehand) {
       this.freehandCondition_ = always;
     } else {
-      this.freehandCondition_ = options.freehandCondition ?
-        options.freehandCondition : shiftKeyOnly;
+      this.freehandCondition_ = options.freehandCondition ? options.freehandCondition : shiftKeyOnly;
     }
 
     this.addEventListener(getChangeEventType(InteractionProperty.ACTIVE), this.updateState_);
@@ -639,7 +637,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.getPixelFromCoordinateInternal(finishCoordinate);
+          const finishPixel = map.getPixelFromCoordinate(finishCoordinate);
           const pixel = event.pixel;
           const dx = pixel[0] - finishPixel[0];
           const dy = pixel[1] - finishPixel[1];

src/ol/interaction/Modify.js

@@ -20,7 +20,7 @@ import VectorSource from '../source/Vector.js';
 import VectorEventType from '../source/VectorEventType.js';
 import RBush from '../structs/RBush.js';
 import {createEditingStyle} from '../style/Style.js';
-import {fromUserExtent, toUserExtent} from '../proj.js';
+import {fromUserExtent, toUserExtent, fromUserCoordinate, toUserCoordinate} from '../proj.js';
 
 
 /**
@@ -38,6 +38,7 @@ const CIRCLE_CENTER_INDEX = 0;
 const CIRCLE_CIRCUMFERENCE_INDEX = 1;
 
 const tempExtent = [0, 0, 0, 0];
+const tempSegment = [];
 
 /**
  * @enum {string}
@@ -808,6 +809,7 @@ class Modify extends PointerInteraction {
     this.modified_ = false;
     const vertexFeature = this.vertexFeature_;
     if (vertexFeature) {
+      const projection = evt.map.getView().getProjection();
       const insertVertices = [];
       const vertex = vertexFeature.getGeometry().getCoordinates();
       const vertexExtent = boundingExtent([vertex]);
@@ -827,7 +829,7 @@ class Modify extends PointerInteraction {
         }
 
         if (segmentDataMatch.geometry.getType() === GeometryType.CIRCLE && segmentDataMatch.index === CIRCLE_CIRCUMFERENCE_INDEX) {
-          const closestVertex = closestOnSegmentData(pixelCoordinate, segmentDataMatch);
+          const closestVertex = closestOnSegmentData(pixelCoordinate, segmentDataMatch, projection);
           if (coordinatesEqual(closestVertex, vertex) && !componentSegments[uid][0]) {
             this.dragSegments_.push([segmentDataMatch, 0]);
             componentSegments[uid][0] = segmentDataMatch;
@@ -934,7 +936,7 @@ class Modify extends PointerInteraction {
       nodes.sort(sortByDistance);
       const node = nodes[0];
       const closestSegment = node.segment;
-      let vertex = closestOnSegmentData(pixelCoordinate, node);
+      let vertex = closestOnSegmentData(pixelCoordinate, node, projection);
       const vertexPixel = map.getPixelFromCoordinate(vertex);
       let dist = coordinateDistance(pixel, vertexPixel);
       if (dist <= this.pixelTolerance_) {
@@ -1259,15 +1261,19 @@ function pointDistanceToSegmentDataSquared(pointCoordinates, segmentData) {
  *        should be found.
  * @param {SegmentData} segmentData The object describing the line
  *        segment which should contain the closest point.
+ * @param {import("../proj/Projection.js").default} projection The view projection.
  * @return {import("../coordinate.js").Coordinate} The point closest to the specified line segment.
  */
-function closestOnSegmentData(pointCoordinates, segmentData) {
+function closestOnSegmentData(pointCoordinates, segmentData, projection) {
   const geometry = segmentData.geometry;
 
   if (geometry.getType() === GeometryType.CIRCLE && segmentData.index === CIRCLE_CIRCUMFERENCE_INDEX) {
     return geometry.getClosestPoint(pointCoordinates);
   }
-  return closestOnSegment(pointCoordinates, segmentData.segment);
+  const coordinate = fromUserCoordinate(pointCoordinates, projection);
+  tempSegment[0] = fromUserCoordinate(segmentData.segment[0], projection);
+  tempSegment[1] = fromUserCoordinate(segmentData.segment[1], projection);
+  return toUserCoordinate(closestOnSegment(coordinate, tempSegment), projection);
 }