Leaflet: Bootstrap Переключатель ввода для слоя включения / выключения не работает должным образом

Question

Я сделал кнопку для включения и выключения слоя, используя Bootstrap Toggle.Когда все кнопки будут включены и выключены, появятся те же данные.Каждые данные должны иметь 1 кнопку в соответствии с идентификатором lyrMosaicSP или lyrMosaicLS на входе.Вы можете проверить это здесь http://jsfiddle.net/valensi/z0ugy5ar/22/

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
  osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
  osm = L.tileLayer(osmUrl, {
    maxZoom: 18,
    attribution: osmAttrib
  });

var map = L.map('map').setView([0.4901708, 103.9593973], 9).addLayer(osm);

var data = $.getJSON(jsondata,
  function(data) {
    for (var i = 0; i < data.wiki_spbn.records.length; i++) {
      var layerVar = data.wiki_spbn.records[i][1];
      var layerUrl = data.wiki_spbn.records[i][3];
      var layerName = data.wiki_spbn.records[i][4];
      var layerFormat = data.wiki_spbn.records[i][5];
      var layerTransparent = data.wiki_spbn.records[i][6];
      var layerVersion = data.wiki_spbn.records[i][7];
      var layerAttribution = data.wiki_spbn.records[i][10];

      var layernya = L.tileLayer.wms('http://103.16.223.172:8080/geoserver/Prov_Kepri/wms', {
        layers: layerName,
        format: layerFormat,
        transparent: layerTransparent,
        version: layerVersion,
        attribution: layerVar
      });

      $('#' + layerVar).change(function() {
        if ($(this).prop('checked') == true)
          map.addLayer(layernya);
        else
          map.removeLayer(layernya);
      })
    }
  }
);

<input type="checkbox" id="lyrMosaicSP" data-toggle="toggle" data-onstyle="success" data-size="small" />lyrMosaicSP<br>
<input type="checkbox" id="lyrMosaicLS" data-toggle="toggle" data-onstyle="success" data-size="small" />lyrMosaicLS
<div id="map"></div>

JSON:

{
  "wiki_spbn": {
    "columns": ["id", "var", "type", "url", "layers", "format", "transparent", "version", "minZoom", "maxZoom", "attribution"],
    "records": [
      [0, "lyrMosaicSP", "tile", "pustekdataUrl", "Mosaik SPOT 2014-2016 Prov Kepri", "image\/png", "true", "1.0.0", null, null, "Data Mosaik SPOT 2014-2016 Prov Kepri"],
      [1, "lyrMosaicLS", "wms", "pustekdataUrl", "Mosaik Landsat 2016-2017 Prov Kepri", "image\/png", "true", "1.0.0", null, null, "Data Mosaik Landsat 2016-2017 Prov Kepri"]
    ]
  }
}

Answer 1

Вы используете переменную в методе изменения, область которой была закончена.Мы изменили код и обновили его на скрипке.Пожалуйста, проверьте это: http://jsfiddle.net/z0ugy5ar/30/

    var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, {
            maxZoom: 18,
            attribution: osmAttrib
        });

    var map = L.map('map').setView([0.4901708,103.9593973], 9).addLayer(osm);
var layerDatalyrMosaicSP = "";
var layerDatalyrMosaicLS = "";

var data = $.getJSON(jsondata, 
            function(data) {
                for (var i = 0; i < data.wiki_spbn.records.length; i++) {
                    var layerVar = data.wiki_spbn.records[i][1];
                    var layerUrl = data.wiki_spbn.records[i][3];
                    var layerName = data.wiki_spbn.records[i][4];
                    var layerFormat = data.wiki_spbn.records[i][5];
                    var layerTransparent = data.wiki_spbn.records[i][6];
                    var layerVersion = data.wiki_spbn.records[i][7];
                    var layerAttribution = data.wiki_spbn.records[i][10];

                   var layernya =  L.tileLayer.wms(wmslink,{
                        layers: layerName,
                        format: layerFormat,
                        transparent: layerTransparent,
                        version: layerVersion,                    
                        attribution:layerVar
                    }); 
                    if(layerVar == "lyrMosaicSP"){
                        layerDatalyrMosaicSP = layernya;
                    }
                    if(layerVar == "lyrMosaicLS"){
                        layerDatalyrMosaicLS = layernya;
                    }
                    $('#'+layerVar).change(function() {

                        if($(this).prop('checked')==true){
                                if($(this).attr("id") == "lyrMosaicSP"){

                              map.addLayer(layerDatalyrMosaicSP);
                            }else{
                                map.addLayer(layerDatalyrMosaicLS);
                            }

                        }else{
                                if($(this).attr("id") == "lyrMosaicSP"){

                              map.removeLayer(layerDatalyrMosaicSP);
                            }else{
                                map.removeLayer(layerDatalyrMosaicLS);
                            }

                        }
                    })

                    console.log(data.wiki_spbn.records[i][2]);
                }

            });

Теперь он работает нормально.