OpenLayers 3はレイヤータイプに応じて異なるハイライトスタイルを表示します

Question

私は2つのレイヤーを持つマップを持っています。 1つのレイヤーがポイント（円）を表示し、別のレイヤーがマップにアイコンを表示します。

2つのスタイルを強調表示する必要があるので、ユーザーが機能をクリックすると、レイヤータイプに基づいて正しいハイライトスタイルが表示されます。

今は2つのハイライトスタイルを作成しました。私はクリックされた機能を選択する 'select'イベントも持っています。新しいフィーチャーをクリックすると、「古い」フィーチャーはハイライトスタイルを削除しません。一般的に

var highlightOne = function() { 
    var scaleRadius = map.getView().getZoom() >= 7 ? 15 : 5; 
    return [new ol.style.Style({ 
     image: new ol.style.Circle({ 
      radius: scaleRadius, 
      fill: new ol.style.Fill({ 
       color: '#fff' 
      }), 
      stroke: new ol.style.Stroke({ 
       color: '#658acf', 
       width: 2 
      }) 
     }), 

     zIndex: 1 
    })] 
} 
var highlightTwo = function() { 
    var scaleRadius = map.getView().getZoom() >= 7 ? 15 : 15; 
    return [new ol.style.Style({ 
     image: new ol.style.RegularShape({ 
      radius: scaleRadius, 
      points: 4, 
      rotation: 0.8, 
      rotateWithView: true, 
      fill: new ol.style.Fill({ 
       color: '#fff' 
      }), 
      stroke: new ol.style.Stroke({ 
       color: '#658acf', 
       width: 2 
      }) 
     }), 

     zIndex: 1 
    })] 
} 

var selectInteraction = new ol.interaction.Select({ 
    condition: ol.events.condition.singleClick, 
    style: highlightStyle 
}); 

selectInteraction.on('select', function (e) { 
    var selected = e.selected, 
    deselected = e.deselected; 

    if (selected.length) // Selected feature 
    { 
     selected.forEach(function (feature) { 
      // Get the layer name to apply custom highlight style 
      if (feature.getLayer().get('name') == "layerone") 
      { 
       feature.setStyle(highlightTwo) 
      } else { 
       feature.setStyle(highlightOne) 
      } 
     }) 
    } else { 
     deselected.forEach(function (feature) { 
      // Remove highlight from the other features 
      feature.setStyle(null) 
     }) 
    } 
}); 

Answer 1

、あなたは（あなたが選択相互作用を行うように）一時的な表示スタイルを設定する際の機能上のスタイルを設定しないようにしたい：

は、これまでのところ私は、これは持っています。レイヤーやインタラクションのスタイル機能を設定することは、メモリー効率が高いだけでなく、スタイルを設定解除する責任も負うことになります。私はあなたがサイドノートとして

var selectInteraction = new ol.interaction.Select({ 
    condition: ol.events.condition.singleClick, 
    style: function(feature, resolution){ 
     if (feature.getLayer().get('name') == "layerone") { 
      return highlightTwo() 
     } else { 
      return highlightOne() 
     } 
    } 
}); 

ようなソリューションを見ていることを示唆している

、私はむしろ、ポーリングよりもスタイルの関数に現在のズームレベルのマップを、解像度パラメータを使用してお勧めします。現在のズームレベルに基づいて半径でフィーチャにスタイルを設定すると、ズームインまたはズームアウト時にスタイルは更新されません。