Страница 1 из 1
Обновление overlayLayers в LeafLet
Добавлено: 10 ноя 2018, 10:23
Vady
Здравствуйте!
Создаю базовые слои с помощью LeafLet, затем оверлейные:
Код: Выделить всё
var map = L.map('map').setView([55.60475, 31.1905], 13)
var defaultLayer = L.tileLayer.provider('OpenStreetMap.Mapnik').addTo(map);
var baseLayers = {
'OpenStreetMap': defaultLayer,
'Bing': L.tileLayer.bing(BING_KEY)
};
var overlayLayers = {
'Карта-1': L.tileLayer('http://xxx.ru/tiles/1/{z}/{x}/{-y}.png', {id: 'L_1', maxZoom: '13'}),
'Карта-2': L.tileLayer('http://xxx.ru/tiles/2/{z}/{x}/{-y}.png', {id: 'L_2', maxZoom: '13'}),
'Карта-3': L.tileLayer('http://xxx.ru/tiles/3/{z}/{x}/{-y}.png', {id: 'L_3', maxZoom: '13'}),
'Карта-4': L.tileLayer('http://xxx.ru/tiles/4/{z}/{x}/{-y}.png', {id: 'L_4', maxZoom: '13'}),
'Карта-5': L.tileLayer('http://xxx.ru/tiles/5/{z}/{x}/{-y}.png', {id: 'L_5', maxZoom: '13'}),
'Карта-6': L.tileLayer('http://xxx.ru/tiles/6/{z}/{x}/{-y}.png', {id: 'L_6', maxZoom: '13'}),
'Карта-7': L.tileLayer('http://xxx.ru/tiles/7/{z}/{x}/{-y}.png', {id: 'L_7', maxZoom: '13'}),
'Карта-8': L.tileLayer('http://xxx.ru/tiles/8/{z}/{x}/{-y}.png', {id: 'L_8', maxZoom: '13'})
};
L.control.layers(baseLayers, overlayLayers).addTo(map);
overlayLayers['Карта-1'].addTo(map);
Далее хочу с помощью JSON обновить список оверлейных слоев:
где data содержит примерно то же, что и overlayLayers, но с другим набором карт.
Вопрос: как заменить набор старых оверлеев новыми?
Re: Обновление overlayLayers в LeafLet
Добавлено: 12 ноя 2018, 12:16
antonv
Vady, можно сначала удалить уже прикреплённый к карте оверлей, а затем снова прикрепить, уже новый:
Код: Выделить всё
map.removeLayer(overlayLayers['Карта-1']);
newOverlayLayers['Карта-1'].addTo(map);
Или требуется что-то другое..?
P.S.: непонятно, зачем в вашем куске кода последняя строка - вы ведь предпоследней строкой уже добавили все оверлеи на карту, зачем добавлять слой "Карта-1" ещё раз?
Re: Обновление overlayLayers в LeafLet
Добавлено: 12 ноя 2018, 18:21
Vady
antonv писал(а): ↑12 ноя 2018, 12:16
непонятно, зачем в вашем куске кода последняя строка - вы ведь предпоследней строкой уже добавили все оверлеи на карту, зачем добавлять слой "Карта-1" ещё раз?
Потому что оверлеи добавлены, но не отображаются на карте - вижу только OSM-карту и не более. А чтобы показывать один из оверлеев, добавляю ту самую последнюю строку.
По Вашему предложению с решением моей проблемы позже посмотрю и отпишусь о результатах. Спасибо, что откликнулись!
Re: Обновление overlayLayers в LeafLet
Добавлено: 12 ноя 2018, 23:39
antonv
Vady, а консоль в браузере что говорит по поводу неотображенных слоёв? Сервер тайлы не отдал или ошибка Лифлета?
Re: Обновление overlayLayers в LeafLet
Добавлено: 13 ноя 2018, 09:30
freeExec
Код: Выделить всё
L.control.layers(baseLayers, overlayLayers).addTo(map);
Это просто добавить на панельку управления, оверлеи не включаются по-умолчанию.
Re: Обновление overlayLayers в LeafLet
Добавлено: 13 ноя 2018, 10:50
Vady
antonv писал(а): ↑12 ноя 2018, 23:39
Vady, а консоль в браузере что говорит по поводу неотображенных слоёв? Сервер тайлы не отдал или ошибка Лифлета?
Изначально из моих строк ничего, все работает как надо - зачем пользователю сразу 10 групп тайлов загружать? Одного достаточно, а остальные пусть сам из панельки выберет и включит.
freeExec писал(а): ↑13 ноя 2018, 09:30
Это просто добавить на панельку управления, оверлеи не включаются по-умолчанию.
Именно так, задачка в том, чтобы изменить состав этой панельки и, соответственно, список тайлов на карте.
Re: Обновление overlayLayers в LeafLet
Добавлено: 13 ноя 2018, 16:24
antonv
Vady, а, я понял. У панельки, которая в лифлете зовётся Control, есть методы addOverlay(layer, название_слоя) и removeLayer(layer)
Re: Обновление overlayLayers в LeafLet
Добавлено: 13 ноя 2018, 23:31
Vady
В общем, решение такое: для начала создаю переменную-объект этой панельки, т.е. вместо
Код: Выделить всё
L.control.layers(baseLayers, overlayLayers).addTo(map);
пишу:
Код: Выделить всё
var myMapControl = L.control.layers(baseLayers, overlayLayers).addTo(map);
Затем веду нехитрые манипуляции:
Код: Выделить всё
success: function(data){
overlays = JSON.parse(data)
map.eachLayer(function(layer){
if( (layer._url!="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")&&(layer._url.indexOf(".tiles.virtualearth.net/")==-1)){
map.removeLayer(layer)
myMapControl.removeLayer(layer)
}
})
newOverlayLayers = {}
for(key in overlays){
newOverlayLayers[key] = L.tileLayer(overlays[key])
//newOverlayLayers[key].addTo(map);
}
myMapControl = L.control.layers(baseLayers, newOverlayLayers);
}
P.S. В результате тестирования все-таки выявлены некоторые мелкие баги, хотя они, думаю, вполне поправимые, так что прошу сильно не пинать меня. Всем ответившим спасибо большое!
Re: Обновление overlayLayers в LeafLet
Добавлено: 14 ноя 2018, 22:35
Vady
Тут такой нюанс: если оверлей включен (т.е. на панельке отмечен флаг напротив имени оверлея), то после срабатывания success (см. последний код выше) в панельке отмеченный ранее флагом оверлей пропал. В смысле, не вижу на панельке оверлея 'Карта-1'.
Проще говоря, из моего примера флаг стоит напротив 'Карта-1', вызываю success, отладчиком вижу 'Карта-1' в data, присутствует и в key. В newOverlayLayers присутствует такой элемент 'Карта-1'.
И напоследок, в myMapControl присутствует свойство name со значением 'Карта-1'.
Просмотрел HTML-код этой панельки, там действительно не упоминается DIV с таким оверлеем, как 'Карта-1'.
Подозреваю, что именно строчка
Код: Выделить всё
myMapControl = L.control.layers(baseLayers, newOverlayLayers);
не вставляет див с 'Карта-1'. Помогите пожалуйста разобраться в премудростях кода этого лифлета!
Re: Обновление overlayLayers в LeafLet
Добавлено: 15 ноя 2018, 12:53
antonv
Vady, а зачем вам переменная newOverlayLayers? Вы можете проитерироваться по вашему json'у и для каждого его элемента сделать
Код: Выделить всё
myMapControl.addOverlay(L.tileLayer(...), "Имя нового слоя")
И потом удалить "лишние" слои.
Re: Обновление overlayLayers в LeafLet
Добавлено: 17 ноя 2018, 19:26
Vady
antonv, спасибо, уже разобрался!