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指数。通过引用this discussion on StackOverflow搜索未发掘的an excellent example by Bobby Sudekum z索引。虽然我没有直接实施Bobby的解决方案，但它确实让我对Leaflet TileLayer in the API的属性和方法进行了更深入的研究。

具体来说，zIndex选项被证明是解决方案。值得注意的是，zIndex设置为5才能生效。图层控件自动设置其控制的图层的z-index。因此，最初的问题是水层没有指数，但是层控制中的层与之相互作用。结果，一旦层控制与之相互作用并且消失，水层就会落到后面。因此，对于四个底图图层，水图层的z索引必须为5，比底图图层的数量多一个，以显示在所选的任何底图图层之上。最后，我还实现了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);

Answer 2

你需要做这样的事情：

//define base layers
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var normalView = L.tileLayer(osmUrl, {styleId: 997, attribution: osmAttributes, maxZoom: 18 });
...

//define overlay layers
var markersLayer = new L.layerGroup();
var linesLayer = new L.layerGroup();
...

//create MAP with default base and overlay layers
var map = L.map('map', {
layers: [normalView, markersLayer]
}).setView([45.2516700, 19.8369400], 12);

//add layers to the base and overlay
var baseMaps = {
    "Normal view": normalView,
    "Night view": nightView,
    "MapQuest layer": mapQuest
};

var overlayMaps = {
    "Markers": markersLayer,
    "Lines": linesLayer,
    "3D layer": osmbView
};

//add layer control to the map
L.control.layers(baseMaps, overlayMaps).addTo(map);

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

2 个答案: