1

我正在尝试根据它们的属性过滤矢量图层特征。我有 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(); 

} 
}

以上所有功能都很好，如果我取消选中 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();

到第二个。

当我取消选中 shape_1 复选框时它可以工作。所有 shape_1 功能都隐藏了。但是如果选中它来显示它们，所有的特性都会显示，即使是 type_1 和 type_2 我没有选中和隐藏它们！

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

我希望我的解释清楚。

4

2 回答 2

1

您为什么不尝试结合使用 Vector 图层的样式特征和规则，看起来您自己尝试做的事情已经可以完成，您创建 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: 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 回答