底图组图层的单张图层控件

Question

简而言之,我需要通过传单层控制来控制图层组,一次两到三个.在这个JSFiddle中,当更改底图时,水印覆盖需要持续保持在各种底图之上.

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

任何有关更好的方法来实现这一目标的意见或建议都是受欢 该解决方案确实需要使用图层控件来切换底图,同时保持水印覆盖在顶部.否则,我对替代解决方案完全开放.

如果你在跳转到JSFiddle之前很好奇,这里是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);

Answer 1

解决方案是明确设置水层的 z 指数。搜索 z 索引在 StackOverflow上发现了这个讨论，并参考了 Bobby Sudekum 的一个很好的例子。虽然我没有直接实现 Bobby 的解决方案，但它确实让我深入研究了 API 中 Leaflet TileLayer的属性和方法。

具体来说，zIndex 选项被证明是解决方案。值得注意的是，zIndex 设置为 5 以使其正常工作。图层控件会自动设置它所控制的图层的 z-index。因此，最初的问题是水文图层没有索引，但图层控件中与之交互的图层有。结果，水层一接触图层控件就掉到后面消失了。因此，对于四个底图图层，水文图层的 az 索引必须为 5，比底图图层的数量多 1，才能显示在所选底图图层的顶部。最后，我还实施了 detectRetina 选项，显着改善了我的 MacBook Pro 上的显示效果。

这是更新后的 JSFiddle 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);