OpenLayers Bind Dynami c Создание флажка для GeoServer LayerGroup

Question

Доброе утро,

Хорошо, так что ... Я играл с Geoserver, JQuery и OpenLayers и добился большого прогресса. Я столкнулся с небольшой проблемой.

У меня есть группы слоев в GeoServer, и я передаю их на страницу HTML, запустив API-интерфейс REST GeoServer (http: //: 8080 / geoserver / rest / workspaces / riskdatasuite / layergroups. json ), который возвращает список групп слоев в 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);

  }
})

Таким образом, идея заключается в том, что значение name соответствует create TileLayer. Я пытаюсь связать флажок с созданным TileLayer, чтобы я мог установить видимость true / false ... но, очевидно, он не работает, и я сделал что-то не так. Флажки появляются и ставят галочку вкл / выкл, но он даже не выполняет

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

, так как даже если я добавлю windows.alert('Checkbox Test'); в функцию флажка, он не предупреждает меня.

Часть меня интересует, есть ли проблема с последовательностью, при которой чекбоксы создаются после того, как документ готов и происходит отключение. Я также уверен, что мое использование setVisible также не правильно. Я использую значение имени флажка, чтобы соответствовать фактическому TileLayer, что я уверен, что я делаю неправильно.

Любой совет будет с благодарностью! Ура, B

Answer 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);
  }
});

Answer 2

Я нашел решение, но вряд ли думаю, что оно хорошее: я решил, что смогу l oop через слои карты и сопоставить свойство 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);              
          }          
        }
      });
    });