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功能将保持隐藏状态。

问题是当我尝试使用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();

到第二个。

当我取消选中shape_1复选框时，它会起作用。所有shape_1功能都隐藏起来。但是如果检查它以显示它们，所有功能都会显示，即使是type_1和type_2，我保持它们不被检查和隐藏！

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

我希望我的解释清楚。

Answer 1

为什么不尝试将Vector图层的样式功能与规则结合使用，看起来就像你自己想做的那样，你可以创建2个样式，一个标准，一个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,

我不确定这是否对您有所帮助，但是当我读到这篇文章时，我记得我之前通过在矢量图层上使用样式/规则解决了这个问题。希望这至少可以替代几天来盯着同样的问题。

Answer 2

试试这个：

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

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

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

2 个答案: