Openlayers - 矢量图层 - 使用样式属性组合隐藏/显示功能

Question

我试图根据属性过滤矢量图层功能。 我有4个复选框：type_1，type_2，shape_1和shape_2 请注意，我正在使用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功能将diappear。 然后，如果我取消选中type_2，则所有type_2功能都会显示出来。 然后如果我再次检查type_1，则会显示所有type_1功能，并且type_2功能将保持隐藏状态。

问题是，当我试图做与形状属性是相同的，通过添加：

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(); 

到第二个。

它可以在取消选中shape_1复选框时起作用。所有shape_1功能都隐藏起来。但是如果选中它来显示它们，所有功能都会显示，即使是type_1和type_2，我也不会将它们保持为未选中状态并隐藏！

我不明白为什么发生这种情况。因为如果我处理一个属性（在我的情况下输入），它工作正常，但尝试将类型过滤与另一个要素属性（形状）结合时失败。

我希望我的解释清楚。

Answer 1

你为什么不尝试使用与规则相结合的矢量图层的风格特点，看起来像你正在尝试做自己能已经完成，您可以创建2种样式，一种标准，一种温度，这是您在功能徘徊时通常使用的。

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设定：

styleMap: halte_style, 

我不知道如果这能帮助你明确，但是当我读到这，我想起了我用之前解决了这个样式/矢量图层上的规则。希望这至少能够替代盯着相同的问题几天。

Answer 2

试试这个：

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

// redraw feature 
layer.drawFeature(features[i]);