单张自定义图层控件 [英] Leaflet custom layer control

问题描述

我正在尝试用自定义的传单图层控件替换默认的传单图层控件.

我关注了另一篇有关创建自定义图层控件的文章.

我能够传递图层名称，并且已经通过console.log进行了检查.

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

  var firstLayer = omnivore.kml('localtions.kml').on('ready'，function(){map.fitBounds(firstLayer.getBounds());firstLayer.eachLayer(function(layer){if(L.Marker的instance层){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><输入类型="checkbox" data-layer ="firstLayer">第一层</label></div>< script>$('div#layercontrol input [type ="checkbox"]').on('change'，function(){var checkbox = $(this);var layer = checkbox.data().layer;console.log(layer);//切换图层$('#checkbox').change(function(){如果($(this).is(':checked')){map.addLayer(layer);} 别的 {map.removeLayer(layer);}})});</script> 

解决方案

您希望复选框具有2个嵌套的 change 函数-可能不是您想要的.试试这个....

< label><输入类型="checkbox" data-layer ="firstLayer">第一层</label></div>< script>$('div#layercontrol input [type ="checkbox"]').on('change'，function(){var checkbox = $(this);var layer = checkbox.data().layer;console.log(layer);//切换图层如果($(this).is(':checked')){map.addLayer(layer);} 别的 {map.removeLayer(layer);}});</script> 

I am trying to replace the default leaflet layer control with a custom one.

I have followed another post about creating a custom layer control.

Im able to pass the layer name through and I have checked this with console.log.

However unchecking the checkbox does not remove the layer.

  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>

解决方案

You look to have 2 nested change functions on the checkbox - probably not what you want. Try this....

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

这篇关于单张自定义图层控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！