OpenLayers 将动态复选框创建绑定到 GeoServer LayerGroup

Posted 2023-02-26

【中文标题】OpenLayers 将动态复选框创建绑定到 GeoServer LayerGroup

【英文标题】：OpenLayers Bind Dynamic Checkbox Creation to GeoServer LayerGroup

【发布时间】：2020-02-13 11:22:31

【问题描述】：

早上好，

好的，所以...我一直在使用 Geoserver、JQuery 和 OpenLayers 并取得了一些很大的进步。我遇到了一个小问题。

我在 GeoServer 中有图层组，我通过运行返回图层组列表的 GeoServer REST API (http://:8080/geoserver/rest/workspaces/riskdatasuite/layergroups.json) 将它们提供给 html 页面在地理服务器中。然后，我动态创建与图层组数量匹配的 n 复选框（想法是，如果我添加一个新的图层组，它可以立即作为 HTML 页面中的复选框选项使用）。它还会立即将其添加到地图中。这很好用（使用下面的代码）：

$(document).ready(function () 
  var inputs = [], i
  var riskLayers = []

  $.getJSON(_geoserverConfig.geoserver_url_layergroup, function (result) 

    var lgArray = result.layerGroups.layerGroup
    inputs.push('<ul class="layerlist_sort">');
    $.each(lgArray, function (index, value) 

      inputs.push('<li><input type="checkbox" id="' + index + '" name="' + value.name + '" checked>' + value.name + ' Flood</input></li>')

      var riskLayer = new TileLayer(
        source: new TileWMS(
          url: _geoserverConfig.geoserver_url_wms,
          params:  'LAYERS': value.name, 'TILED': true, ,
          serverType: 'geoserver',
          crossOrigin: null
        )
      );
      riskLayers = riskLayer;
      map.addLayer(riskLayer)
    );

    inputs.push('</ul>');
    $('#layerList').append(inputs.join(''))

    // map.addLayer(riskLayers)
  );

);

然后我设置了这段代码：

  $(document).on('change', '[type=checkbox]', function() 

  var layer = $(this).attr("name")
  // this will contain a reference to the checkbox   
  if (this.checked) 
    layer.setVisible(true);
   else 
    // the checkbox is now no longer checked
    layer.setVisible(false);

  
)

所以思路是名称值对应于创建的TileLayer。我正在尝试将复选框链接到创建的 TileLayer，以便我可以将可见性设置为真/假……但显然它不起作用而且我做错了什么。复选框出现并勾选/关闭，但它甚至没有执行

$("input[type='checkbox']").change(function ()

即使我在复选框功能中添加了windows.alert('Checkbox Test');，它也不会提醒我。

我的一部分想知道是否存在顺序问题，即在文档准备好并且断开连接之后创建复选框。我也确定我对 setVisible 的使用也不正确。我使用复选框的名称值与实际的 TileLayer 相对应，我确定我做错了。

任何建议将不胜感激！ 干杯， 乙

【参考方案1】：

对您的代码的一个简单改进是使用以layer name 作为键和layer object 作为值的字典，类似于这样

$(document).ready(function () 
  var inputs = [], i
  var riskLayers =  // <- instead of array a dictionary

  $.getJSON(_geoserverConfig.geoserver_url_layergroup, function (result) 

    var lgArray = result.layerGroups.layerGroup
    inputs.push('<ul class="layerlist_sort">');
    $.each(lgArray, function (index, value) 

      inputs.push('<li><input type="checkbox" id="' + index + '" name="' + value.name + '" checked>' + value.name + ' Flood</input></li>')

      var riskLayer = new TileLayer(
        source: new TileWMS(
          url: _geoserverConfig.geoserver_url_wms,
          params:  'LAYERS': value.name, 'TILED': true, ,
          serverType: 'geoserver',
          crossOrigin: null
        )
      );
      riskLayers[value.name] = riskLayer; // <- add the layer to the dictionary
      map.addLayer(riskLayer)
    );

    inputs.push('</ul>');
    $('#layerList').append(inputs.join(''))

  );

);

然后，在复选框事件上执行此操作，

$(document).on('change', '[type=checkbox]', function () 
  var chkProp = $(this).prop('checked'); 
  var layerN = $(this).attr("name")  
  if(riskLayers.hasOwnProperty(layerN))
      riskLayers[layerN].setVisible(chkProp);
  
);

【讨论】：

工作就像一个魅力。对迟到的接受表示歉意。我花了一段时间才回过神来。

很高兴能帮到你！

【参考方案2】：

我找到了一个解决方案，但我并不认为它是一个好的解决方案：我决定我可以遍历地图层并将复选框中的 name 属性与创建的图层相匹配。由于它们是从同一来源创建的，因此此匹配可以工作...它不是优雅或很好，但确实有效：如果有更好的方法，请告诉我:)

$(document).on('change', '[type=checkbox]', function () 

  var chkProp = $(this).prop('checked'); 
  var layerN = $(this).attr("name")

  var mapLayers = map.getLayers().getArray();  
    mapLayers.forEach(function (layer) 
        var v = layer.values_.source.params_;
        if  (typeof(v) != 'undefined')
        
          if(v.LAYERS === layerN)
          
              layer.setVisible(chkProp);              
                    
        
      );
    );