Evento Sketch en la interacción de dibujo de Openlayers 3

Question

Para dibujar polígonos en OpenLayers 2 podemos usar lo siguiente:

function drawEnd(){
    ...
}

function putPoint(){
    ...
}

function sketchModified(){
    ...
}

function cancel(){
    ...
}

var callBackParams = {
    "done": drawEnd,
    "point": putPoint,
    "modify": sketchModified,
    "cancel": cancel
}

var drawCrtl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Polygon, {callbacks: callBackParams});
map.addControls([drawCrtl]);
drawCrtl.activate();

Cuando ponemos el punto para dibujar el polígono, la llamada del sistema putPoint function . Cuando el ratón se mueve sobre el mapa, llama sketchModified function . Quiero utilizar estos dos eventos en OpenLayers 3. Defino mi capa como sigue:

var source = new ol.source.Vector({wrapX: false});

var vector = new ol.layer.Vector({
  source: source
});
draw = new ol.interaction.Draw({
    source: source,
    type: 'Polygon'
});

drawStart = function(){
    console.log("Salam Bar Mahdi");
}
drawEnd = function(){
    console.log("Ya Mahdi");
}

draw.on('drawstart', drawStart);
draw.on('drawend', drawEnd);
var map = new ol.Map({
    interactions: ol.interaction.defaults().extend([select, modify, draw]),
    target: 'map',
    layers: [
      new ol.layer.Tile({
        title: "Global Imagery",
        source: new ol.source.TileWMS({
          url: 'http://localhost:8080/geoserver/world/wms?service=WMS',
          params: {LAYERS: 'world:worldRaster', VERSION: '1.1.1'}
        })
      }),
      vector
    ],
    view: new ol.View({
      projection: 'EPSG:4326',
      center: [0, 0],
      zoom: 4
    })
});

Pero en Openlayers 3 sólo vi el evento drawEnd y DrawStart.

¿Cómo puedo hacerlo?

Answer 1

OpenLayers v3.5.0 no soporta fácilmente la función que buscas, pero hay una función actualmente en desarrollo que puedes utilizar.

En ol.interaction.Draw puede especificar un ol.interaction.DrawGeometryFunctionType para manejar las actualizaciones de la geometría actual.

A continuación se muestra un ejemplo que he redactado:

var geometryFunction = function (c, g) {
  if (goog.isDef(g)) {
    g.setCoordinates(c);
  } else {
    g = new ol.geom.Polygon(c);
  }

  if (c[0].length > ct) {
    console.log('mouse click coord : ' + c[0][c[0].length - 1]);
    ct = c[0].length;
  } else {
    console.log('mouse move coord : ' + c[0][c[0].length - 1]);
  }

  return g;
}

Esto es más o menos lo que el por defecto geometryFunction hace, sin la nueva identificación de puntos y el registro en la consola.

Un ejemplo totalmente funcional está aquí: http://jsfiddle.net/1a948faa/2/

Tenga en cuenta las siguientes advertencias:

• Tendrá que implementar una función separada, o un caso para diferentes tipos de geometría.
• El código aún está en desarrollo y, por tanto, no es estable. Además, está sujeto a cambios en cualquier momento.