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

我希望在选择“Black＆amp; White”图层时自动选择GeoJSON图层（“US States”）。并在切换回“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

似乎这个插件可以解决问题：https://github.com/vogdb/Leaflet.ActiveLayers

与baselayerchange一起，我得到了这个：

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/

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

Leaflet - 仅在选择某个图层时显示GeoJSON数据

2 个答案: