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

Question

大家早上好，

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

我在 GeoServer 中有图层组，我通过运行 GeoServer REST API (http://:8080/[=34=) 将它们提供给 HTML 页面].json) 其中 returns Geoserver 中的图层组列表。然后我动态创建 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。我正在尝试 link 创建 TileLayer 的复选框，以便我可以设置可见性 true/false...但显然它不起作用，我做错了什么。复选框出现并勾选 on/off 但它甚至没有执行

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

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

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

如有任何建议，我们将不胜感激！干杯， B

Answer 1

我找到了一个解决方案，但我认为这不是一个好的解决方案：我决定我可以遍历地图播放器并匹配复选框中的 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);              
          }          
        }
      });
    });

Answer 2

对您的代码的一个简单改进是使用以 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);
  }
});

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

OpenLayers Bind Dynamic Checkbox Creation to GeoServer LayerGroup

jquery

openlayers