Hapus fitur yang dipilih Openlayers 3

8

Saya menggunakan openlayers 3 untuk membuat aplikasi web yang memungkinkan pengguna untuk menggambar fitur LineString di peta. ini kodenya:

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);
}

dengan kode sebelumnya saya bisa memasukkan garis ke peta. garis yang ditarik akan ditambahkan ke vectorlapisan. Saya tidak ingin ketika pengguna memilih salah satu garis yang ia gambar dapat menghapusnya. ini adalah kode untuk memilih fitur:

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

dan itu akan bekerja sangat, masukkan deskripsi gambar di sini

Saya hanya ingin pengguna dapat menghapus LineString yang dipilih ...

Ahmed Abd Elmoniem
sumber
Hai, saya mengedit pertanyaan di atas
Ahmed Abd Elmoniem

Jawaban:

9

Ya, Anda dapat menghapus fitur yang dipilih.

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);
 }

Kemudian Ubah Fungsi pilih sebagai berikut:

 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;       
    });
 }

Kemudian panggil fungsi ini pada klik tombol REMOVE

 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;
            }
          }
        }
      }

Dengan kode ini Anda dapat menghapus fitur apa saja yang dipilih. Jika itu Line, Point, Polygon dll.

Pengembang Webashlar
sumber
3
Anda harus mengatur id fitur feature.setId(id)dan menggunakanfeature.getId()
Jonatas Walker
0

Pertama, jika Anda bisa memberi saya lebih banyak detail, saya bisa membantu Anda menjawab pertanyaan Anda. Saya rasa saya tidak sepenuhnya mengerti apa yang Anda minta. Berikut adalah beberapa kemungkinan.

1) Solusi sederhana tetapi terbatas hanya dengan menggunakan layer switcher. Sesuatu seperti ini . Dengan asumsi Anda menggunakan wms seperti geoserver, Anda dapat menggunakan tampilan seperti SQL untuk membuat banyak lapisan yang dapat Anda tambahkan atau hapus. Jika Anda perlu melakukan sesuatu yang sederhana seperti ini, saya dapat mengedit jawabannya untuk memberikan rincian lebih lanjut.

2) Aku tidak melakukan ini sebelumnya, tapi ini mungkin sesuatu untuk melihat ke dalam . Pada dasarnya, Anda akan menggunakan ol.format.wfs untuk memilih dan menghapus fitur.

Ravi Mehta
sumber
Saya akan membutuhkan solusi pertama di tingkat lain dalam proyek saya, jadi jika Anda memberikan beberapa detail itu akan menjadi luar biasa :)
Ahmed Abd Elmoniem