底图图层组的传单图层控制

简而言之，我需要由传单图层控件控制图层组，一次两到三个。在这个JSFiddle http://jsfiddle.net/knu2xs/FH9VF/3/，当更改底图时，水力叠加层需要始终保持在各种底图之上。

如果您运行并使用右上角的图层控件，您会注意到当您切换到图像时，水力叠加将如何关闭，并且除非您切换到地形并返回国家地理，否则它将保持关闭状态。这是我能够可靠地重现的行为。如果你玩它，你会发现一些非常奇怪的事情正在发生。

欢迎任何关于更好的方法来实现这一目标的意见或建议。该解决方案确实需要使用图层控件来切换底图，同时将水力覆盖保持在顶部。否则，我完全愿意接受替代解决方案。

如果您在跳到之前感到好奇JSFiddle http://jsfiddle.net/knu2xs/FH9VF/3/，这是 JavaScript...

// initialize map
var map = L.map('map', {
    center: [45.7067, -121.5217], // Hood River, OR
    zoom: 7
});

// hydrology overlay layer
var hydro = L.esri.tiledMapLayer('http://hydrology.esri.com/arcgis/rest/services/WorldHydroReferenceOverlay/MapServer');

// basemap layer groups so the hydro overlay always overlays the various basemaps
var nationalGeographic = L.layerGroup([
        hydro,
        L.esri.basemapLayer('NationalGeographic')
    ]),
    esriTopo = L.layerGroup([
        hydro,
        L.esri.basemapLayer('Topographic')
    ]),
    esriShadedRelief = L.layerGroup([
        L.esri.tiledMapLayer('ShadedReliefLabels'),
        hydro,
        L.esri.basemapLayer('ShadedRelief')
    ]),
    esriImagery = L.layerGroup([
        hydro,
        L.esri.basemapLayer('Imagery')
    ]);

// add default layers to map
map.addLayer(esriTopo);

// json object for layer switcher control basemaps
var baseLayers = {
    "National Geographic": nationalGeographic,
    "Esri Topographic": esriTopo,
    "Shaded Relief": esriShadedRelief,
    "Imagery": esriImagery
};

// add layer groups to layer switcher control
var controlLayers = L.control.layers(baseLayers).addTo(map);

解决方案是明确设置水层的 z 指数。搜索出土的 z 索引StackOverflow 上的讨论 https://stackoverflow.com/questions/12848812/layer-ordering-in-leaflet-js并参考Bobby Sudekum 的一个很好的例子 http://bl.ocks.org/rsudekum/5431771。虽然我没有直接实现 Bobby 的解决方案，但它确实让我更深入地研究了API 中的 Leaflet TileLayer http://leafletjs.com/reference.html#tilelayer.

具体来说，zIndex 选项是解决方案。值得注意的是，zIndex 设置为 5 才能正常工作。图层控件自动设置其控制的图层的 z 索引。因此，最初的问题是水层没有索引，但层控制中相互作用的层有索引。结果，图层控制一交互，水层就落到了后面，消失了。因此，对于四个底图图层，Hydro 图层的 z 索引必须为 5，比底图图层的数量多 1，才能显示在所选任何底图图层的顶部。最后，我还实现了 detectorRetina 选项，显着改善了 MacBook Pro 上的显示效果。

这是随附的更新代码更新的 JSFiddle http://jsfiddle.net/FH9VF/11/ http://jsfiddle.net/FH9VF/11/.

// initialize map
var map = L.map('map', {
    center: [45.7067, -121.5217], // Hood River, OR
    zoom: 7
});

// hydrology overlay layer
var hydro = L.esri.tiledMapLayer('http://hydrology.esri.com/arcgis/rest/services/WorldHydroReferenceOverlay/MapServer', {
    zIndex: 5,
    detectRetina: true
});

// basemap layer groups so the hydro overlay always overlays the various basemaps
var nationalGeographic = L.esri.basemapLayer('NationalGeographic'),
    esriTopo = L.esri.basemapLayer('Topographic'),
    esriShadedRelief = L.esri.basemapLayer('ShadedRelief'),
    esriImagery = L.esri.basemapLayer('Imagery');

// add default layers to map
map.addLayer(esriTopo);
map.addLayer(hydro);

// json object for layer switcher control basemaps
var baseLayers = {
    "National Geographic": nationalGeographic,
    "Esri Topographic": esriTopo,
    "Shaded Relief": esriShadedRelief,
    "Imagery": esriImagery
};

// add layer groups to layer switcher control
var controlLayers = L.control.layers(baseLayers).addTo(map);