OpenLayers 3：「青い点」選択アイコンを取り除く

デジタル化ツールに取り組んでいます。

現在、4つのボタンがあります。

• ポイントを追加
• 行を追加
• ポリゴンを追加
• ジオメトリを削除する

ユーザーは常に最初にいくつかのジオメトリを描くことから始めます。Drawインタラクション（ol.interaction.Draw）を使用しており、ジオメトリがコレクション（ol.Collection）に追加されています。

ここまでは順調ですね。ここで、ユーザーは描画されたジオメトリのいくつかをクリックして削除することを決定するかもしれません。

次に例を示します。

[ジオメトリを削除]ボタンをクリックすると、次のようになります。

• 図面を削除して非アクティブにします
• Selectインタラクションが作成され（ol.interaction.Select）、ジオメトリを選択して削除します
• 機能が選択されると、そのIDがループ内の他のすべての機能のIDと比較され、正しいIDが見つかると、その機能は削除されます。

ロジックは機能しますが、ホバーすると青い点が表示され、ジオメトリをクリックすることがほぼ不可能になるため、ポイントまたはラインを削除することは非常に困難です。

例えば：

次の黄色の点は、青い点が邪魔になるため削除されません。

カーソルをドットの少し下に移動すると、機能が削除されます。

カーソルが線に沿って移動すると、青い点がカーソルとともに移動するため、線を削除することはほとんど不可能です。

ポリゴンの場合は正常に機能します。青い点はジオメトリのエッジの周りにホバーしたときにのみ表示されますが、それを無視して塗りつぶし内をクリックすると、ジオメトリも削除されます。

その青い点の外観を変更するにはどうすればよいですか？完全に破棄しても大丈夫です。Select Interactionにスタイルを追加しようとしましたが、効果がありません。青い点の上に別のスタイルを追加するだけです。

編集：これを解決する方法は、おそらく、その青い点に目を通すことでしょう。クリック/選択して青い点の背後にあるものを確認する方法はありますか？

選択したインタラクションで使用されるスタイルを定義する必要があります。これは例えば私のものです：

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

正しいスタイルを適用するには、機能をチェックするスタイル関数が必要です。

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

定義したら、次のようにこれをSelect対話オブジェクトに追加できます。

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

私は自分のコードからこれを単純化しようとしましたが、うまくいけば間違いはありません（！）