OpenLayers 3: menyingkirkan ikon pilihan 'titik biru'

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:

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:

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

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

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:

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?

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 (!)