OpenLayers 3: thoát khỏi biểu tượng lựa chọn 'chấm xanh'

Tôi đang làm việc trên một công cụ số hóa.

Hiện tại có bốn nút:

• thêm điểm
• thêm dòng
• thêm đa giác
• loại bỏ hình học

Người dùng luôn bắt đầu bằng cách trước tiên vẽ một số hình học. Tôi đang sử dụng tương tác Draw ( ol.interaction.Draw ) và hình học được thêm vào Bộ sưu tập ( ol.Collection ).

Càng xa càng tốt. Bây giờ người dùng có thể quyết định xóa một số hình học đã vẽ bằng cách nhấp vào chúng.

Đây là một ví dụ:

Khi nhấp vào nút 'xóa hình học', sau đó:

• bản vẽ được gỡ bỏ để hủy kích hoạt nó
• a Chọn tương tác được tạo (ol.interaction.Select) để chọn hình học để loại bỏ nó
• khi một tính năng được chọn, ID của nó được so sánh với tất cả các ID của các tính năng khác trong một vòng lặp và sau khi tìm thấy ID chính xác, tính năng đó sẽ bị xóa.

Logic hoạt động, nhưng cực kỳ khó để xóa một điểm hoặc một đường vì dấu chấm màu xanh được hiển thị khi di chuột, điều này khiến cho gần như không thể nhấp vào hình học.

Ví dụ:

Điểm vàng sau đây sẽ không bị xóa vì dấu chấm màu xanh nằm ở phía sau:

Nếu tôi di chuyển con trỏ một chút bên dưới dấu chấm, tính năng sẽ bị xóa:

Dòng gần như không thể xóa vì dấu chấm màu xanh sẽ di chuyển bằng con trỏ khi con trỏ di chuyển dọc theo dòng:

Đối với đa giác, nó hoạt động tốt, vì dấu chấm màu xanh chỉ được hiển thị khi di chuột xung quanh cạnh của hình học, nhưng nếu bạn bỏ qua điều đó và nhấp vào bất cứ nơi nào trong phần điền, hình học cũng sẽ bị xóa:

Làm thế nào tôi có thể thay đổi sự xuất hiện của dấu chấm màu xanh đó? Tôi sẽ ổn với việc loại bỏ nó hoàn toàn. Tôi đã cố gắng thêm một kiểu vào Chọn Tương tác nhưng điều đó không có tác dụng. Nó sẽ chỉ thêm một phong cách khác trên đầu của dấu chấm màu xanh.

EDIT : một cách để giải quyết điều này, có lẽ, sẽ là nhìn qua chấm màu xanh đó. Có cách nào để nhấp / chọn và xem những gì đằng sau dấu chấm màu xanh không?

Bạn cần xác định một kiểu sẽ được sử dụng bởi tương tác đã chọn của bạn. Đây là của tôi ví dụ:

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

Để áp dụng đúng kiểu, chúng ta cần một hàm kiểu để kiểm tra các tính năng:

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

Sau khi được xác định, điều này có thể được thêm vào đối tượng Chọn tương tác như sau:

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

Tôi đã cố gắng đơn giản hóa điều này từ mã của riêng tôi nhưng hy vọng không có lỗi (!)