OpenLayers 3: menyingkirkan ikon pilihan 'titik biru'

9

Saya sedang mengerjakan alat digitalisasi.

Ada empat tombol pada saat ini:

  • tambahkan poin
  • tambahkan baris
  • tambahkan poligon
  • hapus geometri

Pengguna selalu memulai dengan terlebih dahulu menggambar beberapa geometri. Saya menggunakan interaksi Draw ( ol.interaction.Draw ) dan geometri ditambahkan ke Koleksi ( ol.Collection ).

Sejauh ini bagus. Sekarang pengguna mungkin memutuskan untuk menghapus beberapa geometri yang digambar dengan mengkliknya.

Berikut ini sebuah contoh:

masukkan deskripsi gambar di sini

Ketika mengklik tombol 'hapus geometri', maka:

  • gambar dihapus untuk menonaktifkannya
  • a Pilih interaksi dibuat (ol.interaction. Pilih) untuk memilih geometri untuk menghapusnya
  • ketika fitur dipilih ID-nya dibandingkan dengan semua ID fitur lainnya dalam satu lingkaran, dan begitu ID yang benar ditemukan, fitur itu dihapus.

Logikanya berfungsi, tetapi sangat sulit untuk menghapus titik atau garis karena titik biru yang ditampilkan ketika melayang, yang membuatnya hampir mustahil untuk mengklik geometri.

Sebagai contoh:

Titik kuning berikut tidak akan dihapus karena titik biru menghalangi:

masukkan deskripsi gambar di sini

Jika saya memindahkan kursor sedikit di bawah titik fitur akan dihapus:

masukkan deskripsi gambar di sini

Garis hampir mustahil untuk dihapus karena titik biru akan bergerak dengan kursor ketika kursor bergerak di sepanjang garis:

masukkan deskripsi gambar di sini

Untuk poligon itu berfungsi dengan baik, karena titik biru hanya ditampilkan ketika melayang di sekitar tepi geometri, tetapi jika Anda mengabaikannya dan mengklik di mana saja dalam isian, geometri akan dihapus juga:

masukkan deskripsi gambar di sini

Bagaimana saya bisa mengubah tampilan titik biru itu? Saya akan baik-baik saja dengan membuangnya sepenuhnya. Saya telah mencoba menambahkan gaya ke Interaksi Pilih tetapi itu tidak berpengaruh. Itu hanya akan menambah gaya lain di atas titik biru.

EDIT : cara untuk menyelesaikan ini, mungkin, adalah dengan melihat melalui titik biru itu. Apakah ada cara untuk mengklik / memilih dan melihat apa yang ada di balik titik biru?

BritishSteel
sumber
Jika masalah Anda adalah memilih fitur (tidak terlalu banyak tentang penataan), Anda harus menggunakan ol.interaction. Tutup ... Juga, apakah ini yang Anda cari? openlayers.org/en/latest/examples/snap.html
Keenan Gebze
Hanya digunakan menjentikkan bukannya seleksi, tetapi titik biru juga ditampilkan. Dan, bagaimana cara saya memilih fitur yang akan digunakan? Bukankah saya harus selalu menggunakan interaksi Seleksi?
BritishSteel

Jawaban:

4

Anda perlu menentukan gaya yang akan digunakan oleh interaksi pilihan Anda. Ini milik saya misalnya:

selectedStyle = {
  LineString: new ol.style.Style({
  stroke: new ol.style.Stroke({
      color: 'blue',
      width: 8
  })
  }),
  Polygon: new ol.style.Style({
  stroke: new ol.style.Stroke({
      color: 'blue',
      width: 4
  }),
  fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
  })
  }),
  Point: new ol.style.Style({
  image: new ol.style.RegularShape({
      fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.5)'
      }),
      stroke: new ol.style.Stroke({
          color: 'red',
          width: 1
      }),
      points: 4,
      radius: 8,
      angle: Math.PI / 4
  })
})
}

Untuk menerapkan gaya yang benar, kami memerlukan fungsi gaya untuk memeriksa fitur:

var selectedStyleFunction = function (feature, resolution) {

var featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
    return featureStyleFunction.call(feature, resolution);
} else {
    var type = feature.getGeometry().getType();
    return selectedStyle[type];
 }
}

Setelah ditentukan, ini dapat ditambahkan ke objek interaksi Pilih seperti ini:

    session.interactions.select = new ol.interaction.Select({
    style: selectedStyleFunction,
    multi: true
});

Saya sudah mencoba menyederhanakan ini dari kode saya sendiri tetapi mudah-mudahan tidak membuat kesalahan (!)

dvmac01
sumber
Ini menjawab bagaimana mengubah ikon pemilihan, yang saya pikir adalah solusi untuk masalah saya dan kebanyakan orang akan membaca pertanyaan ini untuk mencari tahu tentang itu, jadi saya akan menandainya sebagai jawaban yang benar :-). Dan itu membantu saya memecahkan masalah saya ... akhirnya! Masalah sebenarnya adalah: Saya tidak menghapus interaksi Ubah, yang saya aktifkan saat mengedit! Jadi meskipun saya menonaktifkan gambar saya, Modify tetap ada, dan karena itu ikon tidak dihapus.
BritishSteel
1
Saya juga memperbaiki beberapa tanda kurung, dan saya mengubah objek 'warna' ke nilai, sehingga orang dapat menyalin ini tanpa harus menyesuaikan apa pun. Satu juta terima kasih lagi!
BritishSteel
Tanpa masalah, senang dapat membantu;)
dvmac01