Leaflet

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 & 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

似乎这个插件可以解决问题：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/

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

Answer 2

您可以跳过自己答案中的插件，只使用 L.Map 实例中的 baselayerchange 事件：

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

Leaflet - 仅在选择特定图层时显示 GeoJSON 数据

Leaflet - display GeoJSON data only when certain layer is selected

javascript

geojson