Leaflet 自定义图层控件

Question

我正在尝试将默认的传单图层控件替换为自定义的。

我关注了另一篇关于创建自定义图层控件的帖子。

我能够传递层名称，并且我已经使用 console.log 进行了检查。

但是取消选中该复选框不会删除该图层。

  var firstLayer = omnivore.kml( 'localtions.kml' )
.on( 'ready', function() {
    map.fitBounds( firstLayer.getBounds() );

    firstLayer.eachLayer( function( layer ) {

        if ( layer instanceof L.Marker ) {
            layer.setIcon( layerIcon );
        }


        layer.on( 'click', function( e ) {
            document.getElementById( "location_img" ).innerHTML = '<img src="img/large/logo.png" height="60"><br>';
            document.getElementById( "location_name" ).innerHTML = layer.feature.properties.name;
            $( "#feature_info" ).stop();
            $( "#feature_info" ).fadeIn( "fast" );

            console.log( layer.feature.properties.name );
            $( "#feature_info" ).fadeOut( 5000 );

        } );
    } );
} )
.addTo( map );

    <div id="layercontrol">
      <label><input type="checkbox" data-layer="firstLayer">First Layer</label>
      </div>

    <script>
          $('div#layercontrol input[type="checkbox"]').on('change', function() {    
        var checkbox = $(this);
        var layer = checkbox.data().layer; 

        console.log(layer);

        // toggle the layer
        $('#checkbox').change(function() {
      if ($(this).is(':checked')) {
            map.addLayer(layer);
        } else {
            map.removeLayer(layer);
        }

    })
    });
    </script>

Answer 1

您看起来在复选框上有 2 个嵌套的 change 函数 - 可能不是您想要的。试试这个....

<div id="layercontrol">
 <label><input type="checkbox" data-layer="firstLayer">First Layer</label>
</div>

<script>
      $('div#layercontrol input[type="checkbox"]').on('change', function() {    
    var checkbox = $(this);
    var layer = checkbox.data().layer; 

    console.log(layer);

    // toggle the layer

  if ($(this).is(':checked')) {
        map.addLayer(layer);
    } else {
        map.removeLayer(layer);
    }


});
</script>