web-dev-qa-db-ja.com

openlayersでベク​​トルフィーチャを非表示にする方法

マップ自体の外側のチェックボックスに基づいて、マップ内の特定のマーカーを非表示にするコードをいくつか作成しました。ただし、これらのマーカーにもベクトルフィーチャがあります（実際には別々のレイヤーにあります）が、フィーチャを破棄するのではなく、非表示にしたいだけです。 display（false）を使用しようとしましたが、エラーが発生します。ベクトルを隠す機能はありますか？

vectoropenlayers
17
Andrew Christensen

解決

OpenLayers.Feature.Vectorインスタンスのstyleプロパティを変更します。 display属性をnoneに設定するか、visibility属性をhiddenに設定します。その後、レイヤーを再描画します。

OpenLayers コードのコメントによると：

display-{String} displayが「none」に設定されている場合、シンボライザーは効果がありません。他のすべての値は効果がありません。

サンプルコード

layerと呼ばれる特定のOpenLayersレイヤー変数について、次のようにすべての機能を非表示にすることができます。

var features = layer.features;

for( var i = 0; i < features.length; i++ ) {
  features[i].style = { visibility: 'hidden' };
}

layer.redraw();

これにより、レイヤー内のすべての機能が繰り返され、非表示にする特定の機能を完全に制御できます。

25
igorti

私はOpenLayersと何度か格闘し、同じレイヤー内の機能を希望どおりに表示しようと試みました。 @igortiのソリューションは、機能のすべてのスタイルプロパティをオーバーライドするため、後で機能を再表示する理由がない限り、このアプローチはお勧めしません（この場合、removeFeatures()メソッドがおそらくより良い方法です。とにかくこれを行うために）。

ベクトル機能を非表示にする

これを行う方法は、フィーチャのスタイル表示を手動でnoneに設定してから、レイヤーを再描画することです。機能を再度表示する必要がある場合は、displayプロパティをblockに設定します。ものすごく単純：

function hideFeatures() {
    var features = layer.features;
    for (var i = 0; i < features.length; i++) {
        var feature = features[i];
        if (!isVisible(feature)) {
            feature.style.display = 'none';
        }
    }
    layer.redraw();
}

ベクトル特徴の再表示

隠された機能を再表示することは、状況によっては少し注意が必要です。いくつかの可能性については、 スタイリングに関するOpenLayersのドキュメント をご覧ください。ただし、通常、機能を再度表示する必要がある場合は、機能のスタイル属性をnullに設定します。これにより、OpenLayersレンダラーがdrawFeature関数を実行するときに、レイヤーのstyleMapから事前構成されたスタイルが再描画されます。

// from OpenLayers drawFeature()
if (!style) {
    style = this.styleMap.createSymbolizer(feature, renderIntent);
}

したがって、表示関数は次のようになります。

function displayFeatures() {
    var features = layer.features;
    for (var i = 0; i < features.length; i++) {
        var feature = features[i];
        if (isVisible(feature)) {
            feature.style = null; //redraw the feature
        }
    }
    layer.redraw();
}

その他のアプローチ

これを行うには、他にもいくつかのアプローチがあります。次のように、機能のfillOpacityとstrokeOpacityを0に設定できます。

function displayFeatures() {
    var features = layer.features;
    for (var i = 0; i < features.length; i++) {
        var feature = features[i];
        if (isVisible(feature)) {
            feature.style.fillOpacity = 1;
            feature.style.strokeOpacity = 1;
        }
        else {
            feature.style.fillOpacity = 0;
            feature.style.strokeOpacity = 0;
        }
    }
    layer.redraw();
}

このアプローチの欠点は、アクティブなマップコントロールが引き続き「非表示」機能と対話できるため、ユーザーが誤って機能をクリックまたはホバーした場合でも、これらのイベントが発生することです。

上記の2つの方法のいずれかを使用して、レイヤーのstyleMap内にhiddenと呼ばれるスタイルを作成することもできます。次に、機能を非表示にするには、機能のrenderIntentをhiddenに変更するだけです。

最後に、機能のサブセットを別々のレイヤーに追加し、レイヤーのsetVisibilityメソッドをfalseに呼び出すことができます。これは、マップの最上位レイヤーのコントロールのみがアクティブになるため、すべての機能を同時に操作する必要がない場合にのみ適したオプションです。 （使用する方法はいくつかあります 複数のレイヤーのコントロール ですが、ジャグリングがさらに多く含まれるため、絶対に必要な場合を除いて、お勧めしません）

13
Kyle

機能を非表示にするには

    for( var i = 0; i < features.length; i++ ) {
      features[i].style = { display: 'none' };
    }
    layer.redraw();

非表示の機能を表示するには

    for( var i = 0; i < features.length; i++ ) {
      features[i].style = null;
    }
    layer.redraw();
1
Rayiez

1つの機能を非表示にするには

var feature = vectorlayer.getFeatureByFid(fid);
feature.style = { display: 'none' };
vectorLayer.removeFeatures(feature);
vectorLayer.addFeatures(feature);
1
Back-Jin Seong

Styleプロパティでdisplay： 'none'を設定できます。機能が表示されないように

1
SSS

すでに試したかどうかは質問からは明らかではありませんでしたが、試したことがない場合は、setVisibility（）メソッドを試すことができます。

参照： http://dev.openlayers.org/releases/OpenLayers-2.10/doc/apidocs/files/OpenLayers/Layer-js.html#OpenLayers.Layer.setVisibility

0
Howard Y

同じニーズがありましたが、各機能を個別に非表示にしたり、CSSスタイルで遊んだりしたくなかったので、この問題に対して最終的に行ったことは次のとおりです。

私はあなたがどこかに次のようなものを持っていると仮定します：

myVector = new OpenLayers.Layer.Vector(...

次に、このコードをボタンまたは必要なイベントにリンクします。

if( myVector.getVisibility() && myVector.features.length > 0 ) {
      myVector.setVisibility(false);
} else {
      myVector.setVisibility(true);
}

getVisibility（）/ setVisibility（）参照はベクター部分にありませんが、レイヤードキュメントにあります。

0
Le Droid