openlayers_snapping.js

/*
Create a Draw interaction for LineString and Polygon
*/
class Draw {  
  //Constructor accepts geometry type, map object and vector layer
  constructor(type, map, vector_layer) {
    this.map = map;
    this.vector_layer = vector_layer;
    this.features = [];
    
    //Draw feature
    this.draw = new ol.interaction.Draw({
        type: type,
        stopClick: true,
        source: vector_layer.getSource()
    });
    this.draw.on('drawstart', this.onDrawStart);
    this.draw.on('drawend', this.onDrawEnd);
    this.map.addInteraction(this.draw);


    //Snap Feature to vector source
    let snap = new ol.interaction.Snap({
      source: vector_layer.getSource()
    });
    map.addInteraction(snap);
    
  }

  /*
  This function will be called when you start drawing
  */
  onDrawStart = (e) => {  
    //Binding onGeomChange function with drawing feature
    e.feature.getGeometry().on('change', this.onGeomChange);
    this.coordinates_length = 0;
  }

  /*
  This function will be called when drawing is finished
  */
  onDrawEnd = (e) => {  
    this.removeSnapFeatures();
  }

  /*
  This function will called when ever there will be a change in geometry like increase in length, area, position,
  */
  onGeomChange = (e) => {
    let geomType = e.target.getType();
    let coordinates = e.target.getCoordinates();
    if (geomType == "Polygon"){
      coordinates = e.target.getCoordinates()[0];
    }

    //This logic will check if the new coordinates are added to geometry. If yes, then It will create 4 line features perpendicular to x/y axis
    if (coordinates.length > this.coordinates_length) {
      this.snapFeatures(coordinates)                
      this.coordinates_length =  coordinates.length;
    }
    else {                     
      this.coordinates_length =  coordinates.length;
    }  
  }

  /*
  This function will create 4 lines perpendicular to x/y axis at clicked locations
  */ 
  snapFeatures = (coordinates) => {
    this.removeSnapFeatures();
    let length = coordinates.length - 2;
    let coordinate = coordinates[length];
    let x = coordinate[0];
    let y = coordinate[1];
    let style = new ol.style.Style({
      stroke: new ol.style.Stroke({ 
        color: '#000',
        width: 5
      })
    });

    //Creating 4 line features perpendicular to x/y axis. Drawn/Modified feature will snap to these 4 features.
    [0, 90, 180, 270].forEach(angle => {
      angle = (angle*Math.PI)/180;
      let xx = x + (100000 * Math.cos(angle));
      let yy = y + (100000 * Math.sin(angle));
      let feature = new ol.Feature({
        geometry: new ol.geom.LineString([[x,y], [xx,yy]])
      });
      feature.setStyle(style);
      this.features.push(feature);
      this.vector_layer.getSource().addFeature(feature);
    });
  }

  /**/ 
  removeSnapFeatures = () => {
    this.features.forEach(feature => {
      this.vector_layer.getSource().removeFeature(feature);
    });
    this.features = [];
  }
}