javascript - 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>

标签： javascriptleafletlayer

Answer 1

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

<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>