[VER] [BUILD]

dist/ol-ext.js

@@ -1,7 +1,7 @@
 /**
  * ol-ext - A set of cool extensions for OpenLayers (ol) in node modules structure
  * @description ol3,openlayers,popup,menu,symbol,renderer,filter,canvas,interaction,split,statistic,charts,pie,LayerSwitcher,toolbar,animation
- * @version v3.1.17
+ * @version v3.1.18
  * @author Jean-Marc Viglino
  * @see https://github.com/Viglino/ol-ext#,
  * @license BSD-3-Clause
@@ -19442,6 +19442,70 @@ ol.interaction.SnapGuides.prototype.setModifyInteraction = function (modifyi) {
   modifyi.on("modifyend", drawEnd);
 };
 
+/*	Copyright (c) 2016 Jean-Marc VIGLINO, 
+  released under the CeCILL-B license (French BSD license)
+  (http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
+*/
+/** An interaction to snap on pixel on a layer
+ * The CenterTouch interaction modifies map browser event coordinate and pixel properties to force pointer on the viewport center to any interaction that them.
+ * @constructor
+ * @extends {ol.interaction.Interaction}
+ * @param {olx.interaction.InteractionOptions} options Options
+ *  @param {ol.layer.Layer} options.layer layer to snap on
+ */
+ol.interaction.SnapLayerPixel = function(options) {
+  options = options || {};
+  // Get layer canevas context
+  this._layer = options.layer;
+  this._layer.on(['postcompose', 'postrender'], function(e) {
+    this._ctx = e.context;
+  }.bind(this));
+  var radius = options.radius || 8;
+  var size = 2*radius;
+  ol.interaction.Interaction.call(this, {
+    handleEvent: function(e) {
+      if (this._layer.getVisible() && this._layer.getOpacity() 
+      && ol.events.condition.altKeyOnly(e) && this.getMap()) {
+        var x0 = e.pixel[0] - radius;
+        var y0 = e.pixel[1] - radius;
+        var imgd = this._ctx.getImageData(x0, y0, size, size);
+        var pix = imgd.data;
+        // Loop over each pixel and invert the color.
+        var x, y, xm, ym, max=-1; 
+        var t = [];
+        for (x=0; x < size; x++) {
+          t.push([])
+          for (y=0; y < size; y++) {
+            var l = pix[3+ 4 * (x + y*size)];
+            t[x].push(l>10 ? l : 0)
+          }
+        }
+        for (x=1; x < size-1; x++) {
+          for (y=1; y < size-1; y++) {
+            var m = t[x][y+1] + t[x][y] + t[x][y+1] 
+              + t[x-1][y-1] + t[x-1][y] + t[x-1][y+1] 
+              + t[x+1][y-1] + t[x+1][y] + t[x+1][y+1];
+            if (m > max) {
+              max = m;
+              xm = x;
+              ym = y;
+            } 
+          }
+        }
+        e.pixel = [x0+xm, y0+ym];
+        e.coordinate = this.getMap().getCoordinateFromPixel(e.pixel);
+        /*
+        e.coordinate = this.getMap().getView().getCenter();
+        e.pixel = this.getMap().getSize();
+        e.pixel = [ e.pixel[0]/2, e.pixel[1]/2 ];
+        */
+      }
+      return true; 
+    }
+  });
+};
+ol.ext.inherits(ol.interaction.SnapLayerPixel, ol.interaction.Interaction);
+
 /*	Copyright (c) 2016 Jean-Marc VIGLINO, 
   released under the CeCILL-B license (French BSD license)
   (http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).

examples/filter/map.filter.edgedetection.html

@@ -200,6 +200,7 @@ <h1>ol-ext: Fast edge detection filter</h1>
     var photo = new ol.layer.Geoportail({ layer: 'ORTHOIMAGERY.ORTHOPHOTOS', className: 'photo', opacity: .4 });
     var plan = new ol.layer.Geoportail({ layer: 'GEOGRAPHICALGRIDSYSTEMS.PLANIGNV2', className: 'photo' });
     var layer = new ol.layer.Geoportail({ layer: 'ORTHOIMAGERY.ORTHOPHOTOS', className: 'edge', title: 'Edges', opacity: 1 });
+    // Load source only once
     layer.setSource(photo.getSource())
 
     // The map
@@ -232,6 +233,18 @@ <h1>ol-ext: Fast edge detection filter</h1>
       layer.addFilter(filter);
     }
     setFilter('laplacian-8');
+
+
+    map.addInteraction(new ol.interaction.Draw({ 
+      type: 'LineString',
+      condition: function(e) { 
+        return ol.events.condition.noModifierKeys(e) || ol.events.condition.altKeyOnly(e)
+      }
+    }))
+    var snapPixel = new ol.interaction.SnapLayerPixel({
+      layer: layer
+    })
+    map.addInteraction(snapPixel)
   </script>
 
 </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol-ext",
-  "version": "3.1.17",
+  "version": "3.1.18",
   "description": "A set of cool extensions for OpenLayers (ol) in node modules structure",
   "main": "dist/ol-ext.js",
   "style": "dist/ol-ext.css",

src/interaction/SnapLayerPixel.js

@@ -0,0 +1,72 @@
+/*	Copyright (c) 2016 Jean-Marc VIGLINO, 
+  released under the CeCILL-B license (French BSD license)
+  (http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
+*/
+
+import ol_ext_inherits from '../util/ext'
+import ol_interaction_Interaction from 'ol/interaction/Interaction'
+
+/** An interaction to snap on pixel on a layer
+ * The CenterTouch interaction modifies map browser event coordinate and pixel properties to force pointer on the viewport center to any interaction that them.
+ * @constructor
+ * @extends {ol_interaction_Interaction}
+ * @param {olx.interaction.InteractionOptions} options Options
+ *  @param {ol.layer.Layer} options.layer layer to snap on
+ */
+var ol_interaction_SnapLayerPixel = function(options) {
+  options = options || {};
+
+  // Get layer canevas context
+  this._layer = options.layer;
+  this._layer.on(['postcompose', 'postrender'], function(e) {
+    this._ctx = e.context;
+  }.bind(this));
+
+  var radius = options.radius || 8;
+  var size = 2*radius;
+  ol_interaction_Interaction.call(this, {
+    handleEvent: function(e) {
+      if (this._layer.getVisible() && this._layer.getOpacity() 
+      && ol_events_condition_altKeyOnly(e) && this.getMap()) {
+        var x0 = e.pixel[0] - radius;
+        var y0 = e.pixel[1] - radius;
+        var imgd = this._ctx.getImageData(x0, y0, size, size);
+        var pix = imgd.data;
+        // Loop over each pixel and invert the color.
+        var x, y, xm, ym, max=-1; 
+        var t = [];
+        for (x=0; x < size; x++) {
+          t.push([])
+          for (y=0; y < size; y++) {
+            var l = pix[3+ 4 * (x + y*size)];
+            t[x].push(l>10 ? l : 0)
+          }
+        }
+        for (x=1; x < size-1; x++) {
+          for (y=1; y < size-1; y++) {
+            var m = t[x][y+1] + t[x][y] + t[x][y+1] 
+              + t[x-1][y-1] + t[x-1][y] + t[x-1][y+1] 
+              + t[x+1][y-1] + t[x+1][y] + t[x+1][y+1];
+            if (m > max) {
+              max = m;
+              xm = x;
+              ym = y;
+            } 
+          }
+        }
+        e.pixel = [x0+xm, y0+ym];
+        e.coordinate = this.getMap().getCoordinateFromPixel(e.pixel);
+
+        /*
+        e.coordinate = this.getMap().getView().getCenter();
+        e.pixel = this.getMap().getSize();
+        e.pixel = [ e.pixel[0]/2, e.pixel[1]/2 ];
+        */
+      }
+      return true; 
+    }
+  });
+};
+ol_ext_inherits(ol_interaction_SnapLayerPixel, ol_interaction_Interaction);
+
+export default ol_interaction_SnapLayerPixel