如何将默认的leaflet.control替换为单个按钮集合

Question

我在地图上有三个基本图层和三个带有标记的图层。现在我正在使用标准传单控制在它们之间切换。我需要将其替换为地图底部各层的单个按钮集。它应该看起来像下面的图片：

有人可以告诉我如何更换默认单张控制

L.control.layers(baseLayers, overlays).addTo(map); 

到设定的自定义按钮？ 这里是我的小提琴：http://jsfiddle.net/anton9ov/eu1840f1/

此外，我需要添加一个初始值的选择器在左上角。 JSON的第一个值现在就到了，但我需要将它替换为“选择一个地方”之类的东西。

Answer 1

要创建一个像您在样机中一样的居中控件，您可以修改@ghybs针对之前的问题发布的this solution。基本上，你创建一个CSS类地图窗格中中控：

.leaflet-horizontalcenter { 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
    padding-top: 10px; 
} 

.leaflet-horizontalcenter .leaflet-control { 
    margin-bottom: 10px; 
} 

然后创建一个新的占位符附加到地图容器类：

function addControlPlaceholders(map) { 
    var corners = map._controlCorners, 
    l = 'leaflet-', 
    container = map._controlContainer; 

    function createCorner(vSide, hSide) { 
    var className = l + vSide + ' ' + l + hSide; 
    corners[vSide + hSide] = L.DomUtil.create('div', className, container); 
    } 
    createCorner('horizontalcenter', 'bottom'); 
} 
addControlPlaceholders(map); 

你可以使用任何你喜欢的方法用于创建按钮，但this codepen example显示了一种合理简单的方式将单选按钮设置为矩形框。创建具有这些按键的自定义控制，将是这样的：

var buttonBar = L.control({ 
    position: 'horizontalcenterbottom' 
}); 

buttonBar.onAdd = function(map) { 
    //create div container for control 
    var div = L.DomUtil.create('div', 'myButtonBar'); 
    //prevent mouse events from propagating through to the map 
    L.DomEvent.disableClickPropagation(div); 
    //create custom radio buttons 
    div.innerHTML = '<div class="switch-field noselect"><div class="switch-title">MAPS</div>' 
    + '<input type="radio" id="switch_map1" name="map_switch" checked/>' 
    + '<label for="switch_map1">Map 1</label>' 
    + '<input type="radio" id="switch_map2" name="map_switch" />' 
    + '<label for="switch_map2">Map 2</label>' 
    + '<input type="radio" id="switch_map3" name="map_switch" />' 
    + '<label for="switch_map3">Map 3</label></div>' 
    + '<div class="switch-field noselect">' 
    + '<input type="radio" id="switch_marker1" name="marker_switch" checked/>' 
    + '<label for="switch_marker1">Marker 1</label>' 
    + '<input type="radio" id="switch_marker2" name="marker_switch" />' 
    + '<label for="switch_marker2">Marker 2</label>' 
    + '<input type="radio" id="switch_marker3" name="marker_switch" />' 
    + '<label for="switch_marker3">Marker 3</label>' 
    + '<div class="switch-title">MARKERS</div></div>'; 
    return div; 
}; 

buttonBar.addTo(map); 

这是一个有点比标准层的控制不太方便，因为你必须输入按钮的名称等手工，但有一点更多的工作，这可以通过您已创建的baseLayers和overlays对象以编程方式完成。如果你想创建按钮周围一个盒子从视觉地图隔离开来，你也可以添加一些CSS像这样风格的控件创建的DIV：

.myButtonBar { 
    background: white; 
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.25); 
    -webkit-border-radius: 4px; 
    border-radius: 4px; 
    text-align: center; 
    padding: 0px 10px; 
    position: relative; 
} 

最后，拿到层变化当按钮被点击时，你附加一些事件监听器。既然你已经使用jQuery，我们只使用：

$("#switch_map1").click(function() { 
    switchLayer(baseLayers, "Map 1"); 
}); 
$("#switch_map2").click(function() { 
    switchLayer(baseLayers, "Map 2"); 
}); 
$("#switch_map3").click(function() { 
    switchLayer(baseLayers, "Map 3"); 
}); 
$("#switch_marker1").click(function() { 
    switchLayer(overlays, "Marker 1"); 
}); 
$("#switch_marker2").click(function() { 
    switchLayer(overlays, "Marker 2"); 
}); 
$("#switch_marker3").click(function() { 
    switchLayer(overlays, "Marker 3"); 
}); 

其中switchLayer是获取基于其键baseLayers或overlays对象层的功能，然后将其添加到地图并删除其他：

function switchLayer(collection, layerKey) { 
    if (layerKey in collection) { 
    $.each(collection, function(key, layer) { 
     if (key === layerKey) { 
     if (!map.hasLayer(layer)) { 
      map.addLayer(layer); 
     } 
     } else if (map.hasLayer(layer)) { 
     map.removeLayer(layer); 
     } 
    }); 
    } else { 
    console.log('There is no layer key by the name "' + layerKey + '" in the specified object.'); 
    } 
} 

下面是这一切的小提琴一起工作：

http://jsfiddle.net/nathansnider/j0abypqf/