Eliminar la función seleccionada Openlayers 3


8

Estoy usando Openlayers 3 para crear aplicaciones web que permiten al usuario dibujar características de LineString en el mapa. este es el código:

var raster = new ol.layer.Tile({
source: new ol.source.MapQuest({ layer: 'sat' })
});


var source = new ol.source.Vector();

var vector = new ol.layer.Vector({
    name: 'my_vectorlayer',
    source: source,
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: '#ffcc33',
            width: 5
        })
    })
});

var map = new ol.Map({
    layers: [raster, vector],
    target: document.getElementById('map'),
    view: new ol.View2D({
        center: [-11000000, 4600000],
        zoom: 4
    })

});
var draw;
function addInteraction() {
 map.removeInteraction(singleClick);
    draw = new ol.interaction.Draw({
        source: source,
        type: ("LineString")
    });
    map.addInteraction(draw);
}

por el código anterior puedo ahogar líneas en el mapa. Las líneas dibujadas se agregarán a la vectorcapa. No lo haré cuando el usuario seleccione una de las líneas que dibuja para eliminarlas. Este es el código de selección de la función:

var singleClick = new ol.interaction.Select();
function addSelect() {
    map.removeInteraction(draw);
    map.addInteraction(singleClick);
}

y es un trabajo con mucha voluntad ingrese la descripción de la imagen aquí

Solo quiero que el usuario pueda eliminar el LineString seleccionado ...


Hola, edito la pregunta allí arriba
Ahmed Abd Elmoniem

Respuestas:


9

Sí, puede eliminar la función seleccionada.

var draw;
var featureID = 0;
var singleClick;
var selectedFeatureID;

// First some change in this function.

function addInteraction() {
   map.removeInteraction(singleClick);

      draw = new ol.interaction.Draw({
      source: source,
      type: ("LineString")
  });

 // Create drawend event of feature and set ID to feature

  draw.on('drawend', function (event) {
    featureID = featureID + 1;
    event.feature.setProperties({
        'id': featureID
    })
 })
   map.addInteraction(draw);
 }

Luego cambie en la función seleccionada de la siguiente manera:

 function addSelect() {
    map.removeInteraction(draw);
    singleClick = new ol.interaction.Select();
    map.addInteraction(singleClick);

     singleClick .getFeatures().on('add', function (event) {
     var properties = event.element.getProperties();
     selectedFeatureID = properties.id;       
    });
 }

Luego llame a esta función al hacer clic en el botón ELIMINAR

 function removeSelectedFeature() {
   var features = source.getFeatures();
     if (features != null && features.length > 0) {
         for (x in features) {
            var properties = features[x].getProperties();
            console.log(properties);
            var id = properties.id;
            if (id == selectedFeatureID) {
              source.removeFeature(features[x]);
               break;
            }
          }
        }
      }

Con este código puede eliminar cualquier característica seleccionada. Si es Línea, Punto, Polígono, etc.


3
Debería establecer la identificación de la función con feature.setId(id)y obtener confeature.getId()
Jonatas Walker

0

Primero, si pudiera darme más detalles, podría ayudarlo a responder su pregunta. No creo entender completamente lo que estás preguntando. Aquí hay un par de posibilidades.

1) La solución simple pero limitada es usar un conmutador de capas. Algo como esto . Suponiendo que está utilizando un wms como geoserver, puede usar vistas similares a SQL para crear un montón de capas que puede agregar o eliminar. Si necesita hacer algo simple como esto, puedo editar la respuesta para proporcionar más detalles.

2) No he hecho esto antes, pero esto podría ser algo a tener en cuenta . Básicamente, usará ol.format.wfs para seleccionar y eliminar características.


Necesitaré la primera solución en otro nivel en mi proyecto, por lo que si proporciona algunos detalles, será genial :)
Ahmed Abd Elmoniem
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.