如何將默認的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/