Элемент управления слоями листов для слоев группы базовой карты

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 обнаружил это обсуждение Stackru со ссылкой на отличный пример Бобби Судекума. Хотя я не реализовал решение Бобби напрямую, оно привело меня к более глубокому исследованию свойств и методов Leaflet TileLayer в API.

В частности, вариант zIndex оказался решением. Стоит отметить, что zIndex установлен на пять, чтобы это работало. Управление слоями автоматически устанавливает z-индекс слоев, которыми он управляет. Следовательно, первоначальная проблема заключалась в том, что гидрослой не имел индекса, но слои, с которыми взаимодействовали при управлении слоями, делали это. В результате, гидрослой упал на спину, как только управление слоями взаимодействовало и исчезло. Следовательно, для четырех слоев базовой карты гидрослой должен иметь индекс a z, равный пяти, на один больше, чем количество слоев базовой карты, чтобы отображаться поверх любого выбранного слоя базовой карты. Наконец, я также реализовал опцию deteRetina, значительно улучшив отображение на моем MacBook Pro.

Вот обновленный код, сопровождающий 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);