オープンレイヤー3でフィーチャーを非表示にして表示する方法は？

Question

私はOL2からOL3にプロジェクトを更新していますが、フィーチャスタイルを変更した後に、フィーチャを再描画する方法については固執しています。 OL2で

が、これは働いていた：）OL3で

hidePoints: function(id) { 
    if (! this.getMap().center) { 
     return; 
    } 

    var i, 
    feature,  
    len = this.points.features.length; 

    if (id !== null) { 
    for(i = 0; i < len; i++) {   
     feature = this.points.features[i]; 
     if (feature.attributes.aces_id == id) { 
      feature.style = null; 
     } else { 
      feature.style = { display: 'none' }; 
     } 
     } 
    } else { 
     for(i = 0; i < len; i++) {   
     feature = this.points.features[i]; 
     feature.style = { display: 'none' }; 
     } 
    } 
this.points.redraw(); 
}, 

を、私はポイントレイヤを非表示にする機能を更新しようとしたが、（再描画もう存在しないし、私が働いている層は、オールであるから。ベクトル。私はベクトル以外の他のソースのようなupdateParamsオプションを見つけることができません。ディスパッチイベントと変更も機能しませんでした。私は変更を望んでいたが、何も起こらない。スタイルを変更する（別のVARの各機能を取得する）この方法で行わ場合、またはされている場合、私も思ったんだけど

hidePoints: function(id) { 
    if (! this.getMap().getView().getCenter()) { 
     return; 
    } 

    var i, 
     feature, 
     layerSourceFeatures = this.pointsLayer.getSource().getFeatures(), 
     len = layerSourceFeatures.length; 

    if (id !== null) { 
     for(i = 0; i < len; i++) { 
      feature = this.pointsLayer.getSource().getFeatures()[i]; 

      if (feature.get('aces_id') == id) { 
       feature.style = null; 
      } else { 
       feature.style = { display: 'none' }; 
      } 
     } 
    } else { 
     for(i = 0; i < len; i++) { 
      feature = this.pointsLayer.getSource().getFeatures()[i]; 
      feature.style = { display: 'none' }; 
     } 
    } 
    //this.pointsLayer.redraw(); 
    //this.pointsLayer.dispatchEvent(goog.events.EventType.CHANGE); 
    this.pointsLayer.changed(); 
}, 

それは単にその機能を変更し、元のそのままを残すことはありません。 Plusは常にgetSource（）を取得します。getFeatures（）はパフォーマンスに悪いと思われますが、私は別の方法を見つけることができません。

OL3では、どのようにスタイルを変更したフィーチャをレンダリングするかは関係ありません。レイヤーは表示可能に設定することができますが、すべてのフィーチャを常に非表示にする/表示したくありません。時には、私はちょうど彼らの与えられたidに応じていくつかを隠す/表示したいです。

Answer 1

openlayers.org/en/v3.14.2/examples/dynamic-data.html?q=style何度もドキュメントを見ながら、私はついに見つけだから変更イベントを起こすものは、setoが後に提案したのと同じように。

これはOL2からOL3に変換された機能です。 setStyleはすべてを行うので、再描画は不要になりました。

hidePoints: function(id) { 
    if (! this.getMap().getView().getCenter()) { 
     return; 
    } 

    var i, 
     feature, 
     layerSourceFeatures = this.pointsLayer.getSource().getFeatures(), 
     len = layerSourceFeatures.length; 

    var emptyImgStyle = new ol.style.Style({ image: '' }); 

    // If an aces id was provided 
    if (id !== undefined) { 
     for(i = 0; i < len; i++) { 
      feature = layerSourceFeatures[i]; 

      feature.setStyle(emptyImgStyle); 

      // Resetting feature style back to default function given in defaultPointStyleFunction() 
      if (feature.get('aces_id') == id) { 
       feature.setStyle(null); 
      } 
      // Hiding marker by removing its associated image 
      else { 
       feature.setStyle(emptyImgStyle); 
      } 
     } 
    } 
    // No id was provided - all points are hidden 
    else { 
     for(i = 0; i < len; i++) { 
      feature = layerSourceFeatures[i]; 
      feature.setStyle(emptyImgStyle); 
     } 
    } 
}, 

Answer 2

隠したり表示したりするには、レイヤのvisibleプロパティをfalseまたはtrueに設定する必要があります。

var someFeature = ...; // create some feature 
someFeature.set('style', someStyle) // set some style 
var someFeatureLayer = ...; // create Layer from someFeature 
map.addLayer(someFeatureLayer); // add someFeatureLayer 
someFeatureLayer.set('visible', false); 
//someFeatureLayer.set('visible', true); 

Answer 3

私は十分な評判を持っていないので、私はコメントを追加することはできませんが、これは内部的に変更されたイベントをトリガし、瞬時にして自動的にスタイルを変更する必要がありますので、代わりにfeature.style = nullのあなたは、feature.setStyle(null)を呼び出すこともできます。スタイルは、あなたが機能のIDを持っている場合はol.style.Styleオブジェクト（http://openlayers.org/en/v3.14.2/apidoc/ol.Feature.html#setStyle）

にする必要があるので、またfeature.style = { display: 'none' }あなたはサイクリングの代わりにsource.getFeatureById（）メソッドを使用することができ、OpenLayersを3で動作しません。 （http://openlayers.org/en/v3.14.2/apidoc/ol.source.Vector.html#getFeatureById）

私は地図のmap.render（）（openlayers.org/ja/v3.14.2/apidoc/ol.Map.html#renderで）を使用して再描画すると思います地図。

地図が再レンダリングされるたびに関数を呼び出すだけなら、ポストレンダーイベントまたはポストコンポジションイベントを地図上で聞くことができます。

JSFiddleを作成する場合は、さらに手伝ってください。

編集：この例では、あなたを助けるかもしれない -

Answer 4

それはスタイルの機能と機能の隠しpropertie使用している行う別の方法：あなたが機能「HIDDEN」propertieを変更した場合

var style = new ol.Style(...); 

function Stylefunction (feature, resolution) { 
    var prop = feature.getProperties(); 
    if (prop.HIDDEN) 
     return; 

    return style; 
} 

var layer = new ol.layer.Vector({ 
    source: new ol.source.Vector(...), 
    style: Stylefunction 
}); 

を、その瞬間リフレッシュ