Обновление overlayLayers в LeafLet

Не знаете, где задать вопрос? Задавайте здесь.
Ответить
Vady
Интересующийся
Сообщения: 16
Зарегистрирован: 03 май 2018, 14:28
Репутация: -1
Откуда: Россия

Обновление overlayLayers в LeafLet

Сообщение Vady » 10 ноя 2018, 10:23

Здравствуйте!
Создаю базовые слои с помощью 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 обновить список оверлейных слоев:

Код: Выделить всё

newOverlayLayers = JSON.parse(data)
где data содержит примерно то же, что и overlayLayers, но с другим набором карт.
Вопрос: как заменить набор старых оверлеев новыми?

Аватара пользователя
antonv
Участник
Сообщения: 96
Зарегистрирован: 29 ноя 2016, 10:44
Репутация: 30
Откуда: Санкт-Петербург

Re: Обновление overlayLayers в LeafLet

Сообщение antonv » 12 ноя 2018, 12:16

Vady, можно сначала удалить уже прикреплённый к карте оверлей, а затем снова прикрепить, уже новый:

Код: Выделить всё

map.removeLayer(overlayLayers['Карта-1']);
newOverlayLayers['Карта-1'].addTo(map);
Или требуется что-то другое..?
P.S.: непонятно, зачем в вашем куске кода последняя строка - вы ведь предпоследней строкой уже добавили все оверлеи на карту, зачем добавлять слой "Карта-1" ещё раз?

Vady
Интересующийся
Сообщения: 16
Зарегистрирован: 03 май 2018, 14:28
Репутация: -1
Откуда: Россия

Re: Обновление overlayLayers в LeafLet

Сообщение Vady » 12 ноя 2018, 18:21

antonv писал(а):
12 ноя 2018, 12:16
непонятно, зачем в вашем куске кода последняя строка - вы ведь предпоследней строкой уже добавили все оверлеи на карту, зачем добавлять слой "Карта-1" ещё раз?
Потому что оверлеи добавлены, но не отображаются на карте - вижу только OSM-карту и не более. А чтобы показывать один из оверлеев, добавляю ту самую последнюю строку.
По Вашему предложению с решением моей проблемы позже посмотрю и отпишусь о результатах. Спасибо, что откликнулись!

Аватара пользователя
antonv
Участник
Сообщения: 96
Зарегистрирован: 29 ноя 2016, 10:44
Репутация: 30
Откуда: Санкт-Петербург

Re: Обновление overlayLayers в LeafLet

Сообщение antonv » 12 ноя 2018, 23:39

Vady, а консоль в браузере что говорит по поводу неотображенных слоёв? Сервер тайлы не отдал или ошибка Лифлета?

freeExec
Гуру
Сообщения: 864
Зарегистрирован: 23 апр 2011, 10:32
Проекты: 1
Репутация: 129
Откуда: Ульяновск

Re: Обновление overlayLayers в LeafLet

Сообщение freeExec » 13 ноя 2018, 09:30

Код: Выделить всё

L.control.layers(baseLayers, overlayLayers).addTo(map);
Это просто добавить на панельку управления, оверлеи не включаются по-умолчанию.

Vady
Интересующийся
Сообщения: 16
Зарегистрирован: 03 май 2018, 14:28
Репутация: -1
Откуда: Россия

Re: Обновление overlayLayers в LeafLet

Сообщение Vady » 13 ноя 2018, 10:50

antonv писал(а):
12 ноя 2018, 23:39
Vady, а консоль в браузере что говорит по поводу неотображенных слоёв? Сервер тайлы не отдал или ошибка Лифлета?
Изначально из моих строк ничего, все работает как надо - зачем пользователю сразу 10 групп тайлов загружать? Одного достаточно, а остальные пусть сам из панельки выберет и включит.
freeExec писал(а):
13 ноя 2018, 09:30
Это просто добавить на панельку управления, оверлеи не включаются по-умолчанию.
Именно так, задачка в том, чтобы изменить состав этой панельки и, соответственно, список тайлов на карте.

Аватара пользователя
antonv
Участник
Сообщения: 96
Зарегистрирован: 29 ноя 2016, 10:44
Репутация: 30
Откуда: Санкт-Петербург

Re: Обновление overlayLayers в LeafLet

Сообщение antonv » 13 ноя 2018, 16:24

Vady, а, я понял. У панельки, которая в лифлете зовётся Control, есть методы addOverlay(layer, название_слоя) и removeLayer(layer)

Vady
Интересующийся
Сообщения: 16
Зарегистрирован: 03 май 2018, 14:28
Репутация: -1
Откуда: Россия

Re: Обновление overlayLayers в LeafLet

Сообщение Vady » 13 ноя 2018, 23:31

В общем, решение такое: для начала создаю переменную-объект этой панельки, т.е. вместо

Код: Выделить всё

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. В результате тестирования все-таки выявлены некоторые мелкие баги, хотя они, думаю, вполне поправимые, так что прошу сильно не пинать меня. Всем ответившим спасибо большое!
Последний раз редактировалось Vady 14 ноя 2018, 23:16, всего редактировалось 1 раз.

Vady
Интересующийся
Сообщения: 16
Зарегистрирован: 03 май 2018, 14:28
Репутация: -1
Откуда: Россия

Re: Обновление overlayLayers в LeafLet

Сообщение Vady » 14 ноя 2018, 22:35

Тут такой нюанс: если оверлей включен (т.е. на панельке отмечен флаг напротив имени оверлея), то после срабатывания success (см. последний код выше) в панельке отмеченный ранее флагом оверлей пропал. В смысле, не вижу на панельке оверлея 'Карта-1'.
Проще говоря, из моего примера флаг стоит напротив 'Карта-1', вызываю success, отладчиком вижу 'Карта-1' в data, присутствует и в key. В newOverlayLayers присутствует такой элемент 'Карта-1'.
И напоследок, в myMapControl присутствует свойство name со значением 'Карта-1'.
Просмотрел HTML-код этой панельки, там действительно не упоминается DIV с таким оверлеем, как 'Карта-1'.
Подозреваю, что именно строчка

Код: Выделить всё

myMapControl = L.control.layers(baseLayers, newOverlayLayers); 
не вставляет див с 'Карта-1'. Помогите пожалуйста разобраться в премудростях кода этого лифлета!

Аватара пользователя
antonv
Участник
Сообщения: 96
Зарегистрирован: 29 ноя 2016, 10:44
Репутация: 30
Откуда: Санкт-Петербург

Re: Обновление overlayLayers в LeafLet

Сообщение antonv » 15 ноя 2018, 12:53

Vady, а зачем вам переменная newOverlayLayers? Вы можете проитерироваться по вашему json'у и для каждого его элемента сделать

Код: Выделить всё

myMapControl.addOverlay(L.tileLayer(...), "Имя нового слоя")
И потом удалить "лишние" слои.

Vady
Интересующийся
Сообщения: 16
Зарегистрирован: 03 май 2018, 14:28
Репутация: -1
Откуда: Россия

Re: Обновление overlayLayers в LeafLet

Сообщение Vady » 17 ноя 2018, 19:26

antonv, спасибо, уже разобрался!

Ответить

Вернуться в «Я новичок!»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость