Координатная сетка

Communities Россия (Russia)
1

Добрый день!
Для отображения карты на сайте я использую тайлы, поскольку стоит задача работать с картой оффлайн.
Мне необходимо отображать координатную сетку. Для работы с картой я использую библиотеку leaflet.
Вот код
var map = L.map(‘map’).setView([54.46, 38.70], 1);
map.setMaxBounds([[90, -180], [-90, 180]]);
L.tileLayer(‘Tiles//{z}/{x}/{y}.png’,{ noWrap: true}).addTo(map);

Подскажите пожалуйста как мне отобразить на карте координатную сетку? Я ужу два дня не могу найти решение.
Заранее спасибо.

2

Так что ли?
Я только связи не вижу между “задача работать с картой оффлайн” и “Мне необходимо отображать координатную сетку”.

3

Попробуйте https://github.com/turban/Leaflet.Graticule

4

Огромное спасибо за помощь! Хорошее и простое решение плагин Leaflet.Graticule. Вариант, который предложил freeExec тоже подходит, но он сложнее, надо разбираться.

5

Да, сетка добавилась. А есть ли возможность, используя этот же плагин, подписать координаты?

6

Не знаю, сам я его никогда не использовал. Тоесть возможность то конечно есть, но можно ли это сделать через конфигурацию плагина или надо этот плагин доработать - я не смотрел. Вообще если вы разрабатываете что-то интересное, то поделитесь полной картинкой проекта, может у кого-нибудь возникнет желание поучаствовать и допилить плагин.

7

Задача такая: На странице сайта расположить карту мира с возможностью зума 3-4 уровня (использую тайлы). На ней отображается сеть точек (по координатам B, L). Требуется, чтобы на карте отображалась координатная сетка с подписанными осями. Это задача-минимум на сегодня. Похоже, что плагин не позволяет подписывать оси, но кажется что его не слишком сложно доработать.
Вот код:

8

function add_map(){
//Определяем карту, координаты центра и начальный масштаб
var map = L.map(‘map’).setView([54.46, 38.70], 1);
map.setMaxBounds([[90, -180], [-90, 180]]);

	L.tileLayer('Tiles//{z}/{x}/{y}.png',{ noWrap: true}).addTo(map);
	L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
	
	
	// Specify divisions every 10 degrees
	L.graticule({ interval: 20 }).addTo(map);

	$.ajax({  
        type: "POST",  
        url: 'ShowStationsServlet',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(),  
        dataType: "json",  
        context: this,  
        success: function(result) {
        	alert(result);
        	//Добавляем маркер
    		makeMarker(map,result[0].all_stations);
        },
        error: function(error){
        	
        }
    });
	
	
	
	
	
}
9

Как вариант - нарисуйте полупрозрачные тайлы уже с координатной сеткой и используйте как дополнительную подложку, если надо до 4 зума всего.

10

Я попробую докрутить L.Graticule.
Вот кусочек кода оттуда. Если можно рисовать линии, то наверное можно и текст выводить.
// Meridians
for (var lng = 0; lng <= 180; lng = lng + interval) {
features.push(this._getFeature(this._getMeridian(lng), {
“name”: (lng) ? lng.toString() + “° E” : “Prime meridian”
}));
if (lng !== 0) {
features.push(this._getFeature(this._getMeridian(-lng), {
“name”: lng.toString() + “° W”
}));
}
}

Похоже, что “name”: (lng) ? lng.toString() + “° E” : “Prime meridian” должно выводить текст на карту. Но что-то не работает.