1

属性に従ってベクターレイヤーの特徴をフィルタリングしようとしています。type_1、type_2、shape_1、shape_2の4つのチェックボックスがあります。インターフェイスにExtjsを使用していることに注意してください。

最初は、タイプ属性の設定スタイルを「none」または「」にフィルタリングできました...次のように：

switch (f) { 
case 'type_1': 
if(checked) 
filter('show_type_1'); 
else filter ('hide_type_1); 

case 'type_2': 
if(checked) 
filter('show_type_2'); 
else filter ('hide_type_2); 

} 

function filter(value) 
{ 
 switch (value){ 

case 'hide_type_1': 
for (i=0;i<=features.length;i++) 
if(features[i].attributes.type == 'first') 
features[i].style = 'none'; 
layer.redraw(); 

case 'show_type_1': 
for (i=0;i<=features.length;i++) 
if(features[i].attributes.type == 'first') 
features[i].style = ''; 
layer.redraw(); 

case 'hide_type_2': 
for (i=0;i<=features.length;i++) 
if(features[i].attributes.type == 'second') 
features[i].style = 'none'; 
layer.redraw(); 

case 'show_type_2': 
for (i=0;i<=features.length;i++) 
if(features[i].attributes.type == 'second') 
features[i].style = ''; 
layer.redraw(); 

} 
}

上記のすべてがうまく機能します。type_1のチェックを外すと、すべてのtype_1機能が表示されなくなります。次に、type_2のチェックを外すと、すべてのtype_2機能が表示されなくなります。次にtype_1をもう一度チェックすると、すべてのtype_1機能が表示され、type_2機能は非表示のままになります。

問題は、以下を追加して、shape属性で同じことを行おうとしたときです。

case 'shape_1': 
if(checked) 
filter('show_shape_1'); 
else filter ('hide_shape_1);

最初の関数に。

と：

case 'hide_shape_1': 
for (i=0;i<=features.length;i++) 
if(features[i].attributes.shape == 'first') 
features[i].style = 'none'; 
layer.redraw(); 

case 'show_shape_1': 
for (i=0;i<=features.length;i++) 
if(features[i].attributes.shape == 'first') 
features[i].style = ''; 
layer.redraw();

2番目のものに。

shape_1チェックボックスをオフにすると機能します。すべてのshape_1機能が非表示になりました。ただし、チェックして表示すると、チェックを外して非表示にしていたtype_1とtype_2もすべて表示されます。

なぜそうなるのかわかりません。1つの属性（私の場合はタイプ）を処理すると正常に機能しますが、タイプフィルタリングを別の機能属性（形状）と組み合わせようとすると失敗したためです。

私の説明が明確であることを願っています。

4

2 に答える 2

1

ベクトル レイヤーのスタイル機能をルールと組み合わせて使用​​してみませんか。自分でやろうとしていることは既に実行できるようです。2 つのスタイル、1 つの標準、1 つの temp を作成します。機能がホバーされているときに使用します。

  var halte_temp_styled = new OpenLayers.Style({
      fillColor: "red",
      fontColor: "#000000",
      fontWeight: "normal",
      pointRadius: 8,
      fontSize: "11px",
      strokeColor: "#ff9933",
      strokeWidth: 2,
      pointerEvents: "all",
      fillOpacity: 0.3,
      label : "${name}",
      labelOutlineColor: "white",
      labelAlign: "rb",
      labelOutlineWidth: 8,
      cursor: "pointer",
      fontFamily: "sans-serif"
   });

  var halte_styled = new OpenLayers.Style({
      fillColor: "red",
      fillOpacity: 0.6,
      fontColor: "#000000",
      fontWeight: "light",
      pointRadius: 8,
      fontSize: "11px",
      strokeColor: "#ff9963",
      strokeWidth: 3,
      pointerEvents: "all",
      labelOutlineColor: "white",
      labelOutlineWidth: 8,
      labelAlign: "cm",
      cursor: "pointer",
      fontFamily: "sans-serif"
   });

   var halte_style = new OpenLayers.StyleMap({
      'default' : halte_styled,
      'temporary' : halte_temp_styled
   });

次に、（デフォルト）スタイルの動作に影響を与えるルールを追加します。以下の例では、レイヤーのスケールに従い、それに応じて動作します。この例では、レベル 18 でズームすると、フィーチャのラベルが表示されます。それ以外の場合は、ホバーしたときにのみ表示されます。

/* Style the halte layer acc to res */
   halte_style.styles['default'].addRules([
         new OpenLayers.Rule({
         maxScaleDenominator: 215000,
         minScaleDenominator: 27000,
         symbolizer: {
            fillColor: "red",
            fillOpacity: 0.6,
            fontColor: "#000000",
            fontWeight: "light",
            pointRadius: 4,
            fontSize: "11px",
            strokeColor: "#ff9963",
            strokeWidth: 2,
            pointerEvents: "all",
            labelOutlineColor: "white",
            labelOutlineWidth: 8,
            labelAlign: "cm",
            cursor: "pointer",
            fontFamily: "sans-serif"

            }
         }),

      new OpenLayers.Rule({
         maxScaleDenominator: 27000,
         minScaleDenominator: 3384,
         symbolizer: {
            fillColor: "red",
            fillOpacity: 0.6,
            fontColor: "#000000",
            fontWeight: "light",
            pointRadius: 10,
            fontSize: "11px",
            strokeColor: "#ff9963",
            strokeWidth: 3,
            pointerEvents: "all",
            labelOutlineColor: "white",
            labelOutlineWidth: 8,
            labelAlign: "cm",
            cursor: "pointer",
            fontFamily: "sans-serif"

            }
         }),
      new OpenLayers.Rule({
         maxScaleDenominator: 3384,
         minScaleDenominator: 1,
         symbolizer: {
            fillColor: "red",
            fillOpacity: 0.6,
            fontColor: "#000000",
            fontWeight: "light",
            pointRadius: 10,
            fontSize: "11px",
            strokeColor: "#ff9963",
            strokeWidth: 3,
            label : "${name}",
            labelAlign: "cm",
            //labelAlign: "cm",
            pointerEvents: "all",
            labelOutlineColor: "white",
            labelOutlineWidth: 8,
            cursor: "pointer",
            fontFamily: "sans-serif"
            }
         })
      ]);

問題のベクターレイヤーでは、このスタイルマップを設定します:

    styleMap: halte_style,

これが具体的に役立つかどうかはわかりませんが、これを読んだとき、以前にベクターレイヤーでスタイル/ルールを使用してこれに取り組んだことを思い出しました. 代わりに、これが少なくとも同じ問題を何日も見つめる代わりになることを願っています.

于 2012-10-16T20:46:50.113 に答える
0

これを試して：

// set style
    features[i].style = null;
// or
    features[i].style = {display:'none'};

// redraw feature
layer.drawFeature(features[i]);
于 2012-10-16T08:47:13.917 に答える