单张 - 仅在选择特定的层显示以GeoJSON数据

问题描述：

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

感谢您的想法！

答

您可以从您自己的答案跳过插件，只需要使用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

哦，真好看。感谢您帮助n00b。 ;-) – duenni

答

好像这个插件做的伎俩：我连同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/

如果有人知道一个解决方案，而不需要额外的插件，请让我知道。

单张 - 仅在选择特定的层显示以GeoJSON数据

相关推荐