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

我正在尝试根据向量层特征的属性过滤它们。 我有4个复选框：type_1、type_2、shape_1和shape_2 注意，我使用Extjs作为接口

开始时，我可以将类型属性设置样式筛选为“无”或“”。。。像这样：

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

} 
} 

到第一个函数

以及：

case'hide_shape_1'：
对于（i=0；i试试这个：

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

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

试试这个：

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

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

为什么不尝试将矢量图层的样式功能与规则结合使用，看起来您自己正在尝试的已经可以完成了，您创建了两种样式，一种是标准样式，一种是临时样式，这是您在悬停该功能时通常使用的样式

  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,

我不确定这是否对你有帮助，但当我读到这篇文章时，我记得我以前是通过在向量层上使用样式/规则来解决这个问题的。希望这至少能为你提供一个替代方法，而不是整天盯着同一个问题。
为什么不尝试将向量层的样式功能与规则结合使用，看起来像在您尝试自己完成时，您可以创建两种样式，一种标准样式，一种临时样式，这是您在悬停功能时通常使用的样式

  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,

我不确定这是否对你有特别的帮助，但当我读到这篇文章时，我记得我以前在向量层上使用样式/规则解决过这个问题。希望这至少能提供一个替代方案，而不是整天盯着同一个问题