我正在尝试用自定义的传单替换默认的传单层控件。
我已经关注了另一篇关于创建自定义图层控件的文章。
我能够传递图层名称,我已经使用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>
答案 0 :(得分: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>