Buffer control

DrawBuffer.js

/* Copyright (c) 2006-2013 by OpenLayers Contributors (see authors.txt for
 * full list of contributors). Published under the 2-clause BSD license.
 * See license.txt in the OpenLayers distribution or repository for the
 * full text of the license. */


/**
 * @requires OpenLayers/Control.js
 * @requires OpenLayers/StyleMap.js
 * @requires OpenLayers/Feature/Vector.js
 * @requires OpenLayers/Layer/Vector.js
 */

/**
 * Class: OpenLayers.Control.DrawBuffer
 * The DrawFeature control draws point, line or polygon features on a vector
 * layer when active.
 *
 * Inherits from:
 *  - <OpenLayers.Control>
 */
OpenLayers.Control.DrawBuffer = OpenLayers.Class(OpenLayers.Control.DrawFeature, {

  /**
   * Property: layer
   * {<OpenLayers.Layer.Vector>}
   */
  layer: null,

  /**
   * Property: styleMap
   * {<OpenLayers.StyleMap>}
   */
  styleMap: null,

  /**
   * Property: callbacks
   * {Object} The functions that are sent to the handler for callback
   */
  callbacks: null,

  /** 
   * APIProperty: events
   * {<OpenLayers.Events>} Events instance for listeners and triggering
   *     control specific events.
   *
   * Register a listener for a particular event with the following syntax:
   * (code)
   * control.events.register(type, obj, listener);
   * (end)
   *
   * Supported event types (in addition to those from <OpenLayers.Control.events>):
   * featureadded - Triggered when a feature is added
   */

  /**
   * APIProperty: multi
   * {Boolean} Cast features to multi-part geometries before passing to the
   *     layer.  Default is false.
   */
  multi: false,

  /**
   * APIProperty: featureAdded
   * {Function} Called after each feature is added
   */
  featureAdded: function() {},

  /**
   * APIProperty: handlerOptions
   * {Object} Used to set non-default properties on the control's handler
   */

  /**
   * Constructor: OpenLayers.Control.DrawBuffer
   * 
   * Parameters:
   * options - {Object} 
   */
  initialize: function(options) {

    var _this = this;

    // create default styleMap
    this.styleMap = new OpenLayers.StyleMap({
      "default": new OpenLayers.Style(null, {
        rules: [
          new OpenLayers.Rule({
            symbolizer: Ext.apply({
              "Polygon": {
                strokeWidth: 2,
                strokeOpacity: 1,
                strokeColor: "#666666",
                fillColor: "white",
                fillOpacity: 0.3,
                strokeDashstyle: "dash"
              }
            }, this.symbolizers)
          })
        ]
      })
    });

    // create layer to draw the buffer
    this.layer = new OpenLayers.Layer.Vector("Buffer", {
      styleMap: this.styleMap
    });

    // provide handler
    // var handlerProto = OpenLayers.Handler.RegularPolygon;

    this.polyOptions = {
      handlerOptions: {
        sides: 40,
        freehand: true,
        style: {
          strokeWidth: 2,
          strokeOpacity: 1,
          strokeColor: "#666666",
          fillColor: "blue",
          fillOpacity: 0.3,
          strokeDashstyle: "dash"
        }
      }
    };

    OpenLayers.Control.DrawFeature.prototype.initialize.apply(this, [this.layer, OpenLayers.Handler.RegularPolygon, this.polyOptions]);

    this.handlerOptions = this.handlerOptions || {};
    this.handlerOptions.layerOptions = OpenLayers.Util.applyDefaults(
      this.handlerOptions.layerOptions, {
        renderers: this.layer.renderers,
        rendererOptions: this.layer.rendererOptions
      }
    );
    if (!("multi" in this.handlerOptions)) {
      this.handlerOptions.multi = this.multi;
    }
    // var sketchStyle = this.layer.styleMap && this.layer.styleMap.styles.temporary;
    // if(sketchStyle) {
    //     this.handlerOptions.layerOptions = OpenLayers.Util.applyDefaults(
    //         this.handlerOptions.layerOptions,
    //         {styleMap: new OpenLayers.StyleMap({"default": sketchStyle})}
    //     );
    // }
    // this.handler = new handlerProto(this, this.callbacks, this.handlerOptions);
    this._assignEventHandlers();
  },


  _assignEventHandlers: function() {
    var _this = this;

    this.layer.events.register("beforefeatureadded", "Buffer", function(evt){
      _this.layer.destroyFeatures();
      _this.layer.redraw();
    });

    this.layer.events.register("featureadded", "Buffer", function(evt) {

      var center = evt.feature.geometry.getCentroid();
      var bounds = evt.feature.geometry.getBounds();

      // since we're drawing a circle, any vertex should have the same
      // distance to the center
      var distance = center.distanceTo(vertices[0]);
      _this.events.triggerEvent("buffer", {
        center : center,
        distance: distance,
        feature: evt.feature
      });
    });
  },


  CLASS_NAME: "OpenLayers.Control.DrawBuffer"
});

main.js

var bufferControl;
app.on('ready', function(){
  bufferControl = new OpenLayers.Control.DrawBuffer();
  bufferControl.events.register('buffer',  bufferControl, function(evt){

    // feature en 4326
    var f = evt.feature.geometry.clone().transform('EPSG:3857','EPSG:4326');
    // centro en 4326
    var c = evt.center.clone().transform('EPSG:3857','EPSG:4326');

    // tengo que proveer la distancia en dd, asi lo requiere una capa en 4326
    // como eso es imposible y dado que estamos dibujando un circulo
    // genero un Point en la misma Lat que el center, pero con long en el bounds
    var distanceDD = Math.abs(c.x - f.getBounds().left);

    //layers
    var layers = app.mapPanel.map.getLayersByClass("OpenLayers.Layer.WMS")
      .filter(function(l){
        return l.params && !!~l.params.LAYERS.indexOf('adif') && l.visibility == true;
      })
      .map(function(l){
        return l.params.LAYERS;
      })
      .join(",");

    store_test.setBaseParam('center',String(c.x) + "," + String(c.y));
    store_test.setBaseParam('distance', distanceDD);
    store_test.setBaseParam('layers', layers);
    store_test.load();
  });
  app.mapPanel.map.addControl(bufferControl);
  
  //.. resto del code de ready aca
});

node_endpoint.js

module.exports = function wfsRequestBuffer() {

  var router = express.Router();
  router.post('/',
    bodyParser.urlencoded({extended: true }),
    function(req, res) {

      console.log(req.params);
      console.log(req.body);
      if(!req.body.layers || !req.body.center || !req.body.distance) {
        debug('Requested buffer lacks some parameters');
        return res.status(500).send('Buffer query needs layers, center and distance to work');
      }

      var center = req.body.center.split(',').join(' ');
      var distance = req.body.distance;
      var layers = req.body.layers;
      //remember, long first!

      var wfsrequest = {
        host: "geoserver.staging.adif.interactar.com:80",
        pathname: "geoserver/wfs",
        protocol: "http",
        query: {
          request: "GetFeature",
          version: "1.0.0",
          service: "wfs",
          outputformat: "json",
          typename: layers,
          cql_filter: "DWITHIN(the_geom,POINT("+center+"),"+distance+",meters)"
        }
      };

      debug('WFS Request: %s', url.format(wfsrequest));
      var r = request(url.format(wfsrequest));
      r.on('error', function(e) {
        console.log("Error on HTTP request %s", e);
      });
      r.pipe(res).on('error', function(e) {
        console.log("Error on HTTP request %s", e);
        return res.status(500).send(e);
      });
      // res.send({result:'ok'});
      //http://geoserver.staging.adif.interactar.com/geoserver/wfs
        // ?request=getfeature&
        // version=1.0.0&
        // service=wfs&
        // outputformat=json&
        // cql_filter=DWITHIN(the_geom,POINT(-57%20-35),1,meters)&typename=adif:OBRAS_PUNTOS
      //http://geoserver.staging.adif.interactar.com/geoserver/wfs?request=getfeature&version=1.0.0&service=wfs&outputformat=json&cql_filter=DWITHIN(the_geom,POINT(-57%20-35),1,meters)&typename=adif:OBRAS_PUNTOS,adif:OBRAS_LINEAS_V2,adif:Estaciones_Nacional_ADIF_v1



    });

  return router;

}

stores.js

store_test = new Ext.data.GroupingStore({
  url: '/wfsbufferselect',
  reader: new Ext.data.JsonReader({root:"features"}),
  groupField: 'type'
});