basemap 组图层的传单图层控制

Question

简而言之，我需要由传单图层控件控制的图层组，一次两到三个。在此 JSFiddle ，在更改 basemap 时，水力叠加层需要始终位于各种 basemap 之上。

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

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

如果您在跳到 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索引this discussion on StackOverflow引用 an excellent example by Bobby Sudekum .虽然我没有直接实现 Bobby 的解决方案，但它确实让我对 Leaflet TileLayer in the API 的属性和方法进行了更深入的调查。 .

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

这是 an updated 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);