打开第 3 层可见性 - 传递变量的问题答案

【问题标题】：Open Layers 3 layer visibility - problems passing variables打开第 3 层可见性 - 传递变量的问题
【发布时间】：2015-09-03 09:44:16
【问题描述】：

我收集了一个非常基本的功能，它可以打开我地图上的图层。

这是初始化图层的代码：

var featurelayer;

featurelayer = new ol.layer.Tile({
      name: 'featurelayer',
      source: new ol.source.TileWMS({url: 'http://myserver/geoserver/wms',
      serverType: 'geoserver',
      params:{
        'LAYERS':"layergroup:mylayer", 'TILED':true
      }
      }),
      visible: false
      });
map.addLayer(featurelayer);

我的网站上有一个列表项，单击它会激活我用来尝试打开图层的功能。我的 html 和 jQuery 函数如下：

<li class='last'><a href='#'><i class="fa fa-circle text-info"></i><span> Flood Zone 3b (Functional Floodplain)</span></a></li>

$("a.layer").click(function() {
  map.getLayers().forEach(function(layer) {
    if (layer.get('name') === this.id) {
      featurelayer.setVisible(true);
    }
  });
});

这段代码确实有效，它在地图上显示图层。我的问题是我将拥有不止一层，理想情况下，我希望能够将与该层同名的列表项中的 ID 传递给我的 setVisible 事件。

我似乎无法弄清楚如何执行此操作，因为我的控制台日志总是返回未定义；我尝试创建一个等于“this.id”的变量，但这不起作用 - 我需要通过我的点击函数传递我的 ID 吗？如果注册我的图层名称与我的列表项 ID 匹配，为什么我会收到未定义的错误？

感谢您提供的任何帮助！

【问题讨论】：

标签： javascript jquery function openlayers-3

【解决方案1】：

this.id 不是在尝试访问位于 forEach 循环内的“layer.id”（可能未定义）吗？

尝试在进入循环之前获取 id：

 $("a.layer").click(function () {
        var lid = $(this).attr('id');
        map.getLayers().forEach(function (layer) {
            if (layer.get('name') == lid) {
                layer.setVisible(true);
            }
        });
    });

编辑：这是您需要的吗？ http://jsfiddle.net/fbma/3z1L6ttn/1/

我已经为两个 li 项目添加了 id，并且点击事件与类“last”相关。此外，在迭代的图层对象上设置了可见性。

【讨论】：

感谢您的回复，很遗憾没有成功:(
@Chris 请注意，在您的情况下，点击绑定到<a>，而在@Fbma fiddle 中，点击绑定到<li>。所以如果你想点击<a>，就把class和id放在上面，比如：<a href='#' class='last' id='layer1'>
感谢 Fbma 更新您的回复 - 我已经尝试过了，它在一定程度上有效！问题是它只会使您单击的图层可见并隐藏其他图层；我真正想做的是能够切换图层。我认为这种方法适用于只需要显示一个的基本地图，但需要进行一些调整，以免干扰其他图层的状态。
我刚刚尝试添加更多内容，以便查看图层是否已经可见，但它不会返回图层。我正在使用 OL3 API 中的 getVisible() 方法，但我不确定是否需要先创建一个变量，然后在 if 语句中使用它？...if (layer.get('name') == lid) { if (layer.getVisible() == 'false') { layer.setVisible(true); } if (layer.getVisible() == 'true') { layer.setVisible(false); } }

【解决方案2】：

我接受了 Fbma 的回答并添加了几个 if 语句，以通过设置调用 getVisible() 方法的变量来检查图层是否已经可见，所以下面的代码现在可以工作了，谢谢你的帮助！

$(".layerlist").click(function() {
        var lid = $(this).attr('id');
        map.getLayers().forEach(function (layer) {
            if (layer.get('name') == lid) {
              var visibility = layer.getVisible();
              if (visibility == false) {
                layer.setVisible(true);
              }
              if (visibility == true) {
                layer.setVisible(false);
              }
            }

        });
    });

【讨论】：