Leaflet — новая JavaScript-библиотека для карт от CloudMade

Communities Россия (Russia)
414

Вопрос не по OSM - просто на работе поставили задачу сделать онлайн-карту на основе собственных карт. Взял Leaflet, порезал карту на плитки, всё работает нормально.

Теперь же я пытаюсь сообразить: как научить Leaflet использовать не пиксельные координаты карты, а географические (широту/долготу). Проблема в том, что карты охватывают большой кусок поверхности:

Поэтому обойтись простым смещением и масштабированием не получится, надо использовать трансформации. А как их использовать - не могу понять. Вроде для этого нужно использовать L.Projection.SphericalMercator, но понятных примеров для своих карт найти не могу. В лучшем случае попадается что-то вроде такого (с использованием библиотеки Proj.4js):

var proj = new L.Proj.CRS.TMS('EPSG:3414', "+proj=tmerc +lat_0=1.366666666666667 +lon_0=103.8333333333333 +k=1 +x_0=28001.642 +y_0=38744.572 +ellps=WGS84 +units=m +no_defs",
    [4257.9355, 11470.3186, 64359.3062, 49067.5413], 
    {
        resolutions:[76.4372195411057,38.2186097705529,19.1093048852764,9.55465244263822,4.77732622131911,2.38866311065955,1.19433155532978,0.597165777664889,0.298450596901194]
    }
);

но откуда берутся все эти параметры непонятно, везде подразумевается, что это и так очевидно.

Подскажите, пожалуйста, есть ли какие-то статьи, где более-менее понятно разжёвывается этот кейс для программистов, которые новички в картографии? Или, может, где-то есть несложный пример, где для своей карты (не OSM, Google, Яндекс и пр.) делается эта операция?

Спасибо!

415

помогите. у меня все сломалось. раньше вроде работало.


	$(".delete_place").live('click',function(){
			
				var i=0;
	var element_link=$(this).parent().parent().children().text()[0];
console.log(layer);
	layer.eachLayer(function (layer) {
		i++;
		if (element_link==i) map.removeLayer(layer); 
		
	});
			console.log(element_link);

	layer.eachLayer(function (layer) {
		console.log(layer.getLatLng().lat);

		
	});
			
			
				$(this).parent().parent().remove();

что делать? выше код, который удаляет точку с карты и списка. однако console.log(layer.getLatLng().lat); после каждого удаления показывает что все точки на месте. и соответственно когда добавляю новую точку на карту, у меня в списке опять все удаленные точки появляются!

и еще какая-то неизвестная мне ошибка в консоли браузера
TypeError: this._northEast is undefined leaflet

помогите. помогите. как удалять точки.

416

А живой пример то есть?

417

http://moe26.ru/?do=maps
для логина можно “testreg@ya.ru”,“”
жму Добавить нарушение, кликаю по карте много раз. потом Просмотреть места. Удаляю все. Кликаю по карте опять. Удаленные места появляются снова в списке с добавленными

418

Галочка “запомнить” логин, пароль почему-то обязательна О_о

var element_link=$(this).parent().parent().children().text()[0];

Будет работать не корректно при номере больше 9 и вместо 10 выберет 1.

Проблема мне видится в этом


	$(".add_file_place").live('click', function() {
		var i = 0;
		var element_link = $(this).parent().parent().children().text()[0];
		layer.eachLayer(function(layer) {
			i++;
			if (element_link == i)
				map.removeLayer(layer);
		});
		$(this).parent().parent().remove();
	});
	layer.addLayer(marker);

Маркер ты добавляешь в layer.addLayer, а удаляешь из map.removeLayer, поэтому в одном месте его нет, в другом он остаётся.

П.С. И, да, кажется что-то ушло на сервер :frowning:

419

верно. гугл говорит что удалять точку нужно так map.removeLayer
а добавлять так .addLayer(marker1);
я делаю все как написано
что делать

420

Я не знаю, что там говорит гугль, я вижу что map._layers и ваш layer._layers совершенно разные объекты.
Но раз вам так хочется следовать гуглю, тогда добавляйте метки на окно просмотра из map.

421

так как мне удалить одну точку то?
вы так пишете, будто мне надо удалять точку из layer._layers. но мне не надо оттуда удалять эту точку. потому что если я напишу в коде

layer.eachLayer(function (layer123) {
i++;
if (element_link==i) {
map.removeLayer(layer123);
layer.removeLayer(layer123);

}
});

то у меня все точки после с карты тоже пропадут. т.е. нажму удалить на 5 точку. 6,7 и прочие с карты исчезнут. а нет. они совсем исчезнут.

422

и я не понял о чем вы. у меня метки добавляются этим кодом. как я должен изменить тогда этот код чтобы “Но раз вам так хочется следовать гуглю, тогда добавляйте метки на окно просмотра из map.”
var marker=new L.marker(e.latlng,{draggable:true}).addTo(map);

423

ау ау. за полтора часа я так и не понял что вы хотели этим сказать. (а за 4 часа не понял как метку удалить)
метки у меня добавляются так
function onMapClick(e) {
var marker=new L.marker(e.latlng,{draggable:true}).addTo(map);

а удаляются так
$(“.add_file_place”).live(‘click’, function() {
var i = 0;
var element_link = $(this).parent().parent().children().text()[0];
layer.eachLayer(function(layer) {
i++;
if (element_link == i)
map.removeLayer(layer);
});
$(this).parent().parent().remove();
});
layer.addLayer(marker);

что в этом не так? помогите кто-нибудь

424

Создаёшь LayerGroup и добавляешь его на карту. Метки добавляешь и удаляешь только в LayerGroup.


		var lg = L.layerGroup();
		lg.addTo(map);

		var marker=new L.marker(new L.LatLng(53.6755, 49.936),{draggable:true});
		lg.addLayer(marker);

		var marker2=new L.marker(new L.LatLng(53.6765, 49.926),{draggable:true});
		lg.addLayer(marker2);

		var marker3=new L.marker(new L.LatLng(53.6765, 49.966),{draggable:true});
		lg.addLayer(marker3);

		lg.removeLayer(marker2);
425

Решил облегчить Leaflet, пересобрав его.
Бета версия (1.x) собирается нормально, а стабильная (0.7) - никак :frowning:
Пробовал разные версии nodejs, нечего не помогает.
Что за проблема, куда копать?

426

Ребята, помогите разобраться. Создал несколько групп слоев (Layer Groups), но не могу понять, как сделать так, чтобы в меню можно было выбрать одновременно несколько слоев для отображения, а не один единственный.

427

http://leafletjs.com/reference.html#control-layers
Тебе нужно добавить слои в группу overlay

428

Сразу добавил, прочитав документацию. Вот пример - http://pastebin.com/5CwCuhhW. Четыре слоя, нужно чтобы можно было включать одновременно четыре, или первый и второй только, например. Пока получается отоброжать только один, при выборе следующего предыдущий обнуляется.

429

Дык неправильно, должно быть

L.control.layers(osm, overlays).addTo(map);
430

Пропало меню со слоями

431

http://jsfiddle.net/tqop7t2r/1/

432

Косяк понял, спасибо!

433

Для проекта, ищу одного из разработчиков leaflet или хотя бы человека хорошо разбирающегося в исходном коде leaflet и способного его доработать.