單張 - 僅在選擇特定的層顯示以GeoJSON數據

Question

我想要這兩個小葉教程結合：

http://leafletjs.com/examples/layers-control.html

http://leafletjs.com/examples/choropleth.html

我使用的層控制，其中用戶可以在切片提供者之間切換，也可以打開GeoJSON數據。 的jsfiddle：http://jsfiddle.net/jrzd4448/2/

var OpenStreetMap_Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
    maxZoom: 19, 
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
}); 

var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', { 
    maxZoom: 18, 
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
}); 

// initialize map 
var map = L.map('map', { 
    center: [37.8, -96], 
    zoom: 4, 
    layers: [OpenStreetMap_Mapnik] 
}); 

var baseMaps = { 
    "Mapnik": OpenStreetMap_Mapnik, 
    "Black and White": OpenStreetMap_BlackAndWhite 
}; 

loadstates = L.geoJson(statesData); 
var states = { 
    "US States": loadstates 
}; 

L.control.layers(baseMaps, states).addTo(map); 

我希望所選擇的 「黑&白」 層時，會自動選擇以GeoJSON層（ 「美國各州」）。並因此在切換回「Mapnik」時被取消選擇。 我必須使用類似this或addlayer或jQuery函數嗎？ 我想最好是不加載GeoJSON數據，直到點擊相應的圖層爲止。

我試圖建立一個不起作用的LayerGroup。

var baseMaps = { 
    "Mapnik": OpenStreetMap_Mapnik, 
    "Black and White": OpenStreetMap_BlackAndWhite 
}; 

loadstates = L.geoJson(statesData); 
var group = L.layerGroup([OpenStreetMap_BlackAndWhite, loadstates]); 
var statesandlayer = { 
    "Group": group 
}; 

L.control.layers(baseMaps, statesandlayer).addTo(map); 

感謝您的想法！

Answer 1

您可以從您自己的答案跳過插件，只需要使用baselayerchange事件從L.Map例如：

var baseLayers = { 
    'CartoDB Positron': L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>' 
    }), 
    'CartoDB Dark Matter': L.tileLayer('http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { 
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>' 
    }) 
} 

var map = L.map('leaflet', { 
    'center': [0, 0], 
    'zoom': 0, 
    'layers': [baseLayers['CartoDB Positron']] 
}); 

var layerControl = new L.Control.Layers(baseLayers).addTo(map); 

map.on('baselayerchange', function (event) { 
    // Returns 'CartoDB Positron' or 'CartoDB Dark Matter' 
    console.log(event.name); 
}); 

例如在Plunker：http://plnkr.co/edit/gORbB8?p=preview

Answer 2

好像這個插件做的伎倆：我連同baselayerchangehttps://github.com/vogdb/Leaflet.ActiveLayers

得到這樣的：

var control = L.control.activeLayers(baseMaps); 
control.addTo(map); 

map.on('baselayerchange', baseLayerChange); 

function baseLayerChange(){ 
if (control.getActiveBaseLayer().name == 'Black and White') { 
     map.addLayer(loadstates); 
} 
    else 
    { 
     map.removeLayer(loadstates);   
    } 
} 

哪些我想要做什麼。 更新JSFiddle：http://jsfiddle.net/jrzd4448/3/

如果有人知道一個解決方案，而不需要額外的插件，請讓我知道。