Как выставить координаты для тайлов в Leaflet.js?

Question

[fynjy_8]

Всем привет! У меня есть карта на leaflet.js размер карты 5913x7863 и она в местных плоских координатах (X Y) система координат соответственно L.CRS.Simple

До этого я использовал L.imageOverlay:

var imageBounds = [[1468.9700,-11.7050], [1968.2705,363.7705]];
var file0 = new L.imageOverlay(imageUrl, imageBounds).addTo(map);

И всё было супер
Но я понял, что это плохой путь (единая картинка вылетает на мобилках и так карты не делают) и нужно делать тайлы

Далее я нарезал на тайлы
Тайлы хранятся по папкам "1/1/0" "1/1/1" и т.д.
Я хочу сделать координаты X Y - чтобы карта была в координатах [1468.9700,-11.7050], [1968.2705,363.7705]
Но как сделать даже в координатах [0,0] [5913,7863] я не понимаю.

Код сейчас такой:

map = L.map('map', {
          crs: L.CRS.Simple,
            maxZoom: 4,
            minZoom: 0
        }).setView([-60,100], 1);
 
L.tileLayer('./images/{z}/{x}/{y}.png', {
            continuousWorld: true,
            noWrap: false
        }).addTo(map);

При этом картинка находится в координатах примерно [0,0], [-256,192] - почему именно такие не понимаю вообще.
Еще раз вопрос: как сделать границы именно [1468.9700,-11.7050], [1968.2705,363.7705]?
Почему это так легко сделать в L.imageOverlay и так трудно в L.tileLayer?

Пожалуйста, любые идеи. Мучаюсь уже 2 месяца

Answer 1

[fynjy_8]

Moskus спасибо за комментарии

Сумел воплотить задуманное в openlayers

var mapBounds = new OpenLayers.Bounds(-11.705000, 1468.971000, 363.770500, 1968.271500);
var mapMinZoom = 0;
var mapMaxZoom = 5;
var mapMaxResolution = 0.063500;
var gridBounds = new OpenLayers.Bounds(-11.705000, 1468.971000, 363.770500, 1968.271500);

Вопрос теперь как сделать такое в leaflet :) Я так понимаю простыми манипуляциями не выйдет, нужно пользоваться Proj.4 и Proj4Leaflet, там вообще есть условная местная система координат?

UPD: РЕШЕНИЕ

L.CRS.Wall = L.extend({}, L.CRS.Simple, {
  transformation: new L.Transformation(0.4920000014213405, 5.758860016636791, -0.4920000014213405, 968.389580797584),

    
});

Comments

[Moskus]

Да, идеология свойств у Leaflet и OL несколько различается. Хорошо, что разобрались в любом случае.

В Proj4, естественно, нет никаких готовых МСК, есть методы их описания (определения)
Вот статья, где это описывается gis-lab.info/qa/local-cs.html
И я вас поправлю: между условной и местной СК есть разница. МСК - это, например, система, принятая в каком-то городе или области, реально существующая, она имеет свое начало координат, эллипсоид и прочие свойства.
А условная СК, которую российские специалисты по привычке из Mapinfo называют "план-схема" - действительно условна, так как она не привязана на самом деле к местности вообще.

Answer 2

[Moskus]

Самый простой путь присвоить какие-либо координаты растровому файлу - создать для него так называемый World-файл https://en.wikipedia.org/wiki/World_file
Это текстовый файл, в котором вам нужно заполнить не нулями всего четыре строчки:
- разрешение по оси X (разность крайней правой и крайней левой координаты растра, деленная на число пикселей по оси X)
- ноль
- ноль
- разрешение по оси Y (разность крайней нижней и крайней верхней координаты растра, деленная на число пикселей по оси Y, традиционно - отрицательное число, потому что ось идет снизу вверх)
- координаты центра верхнего левого пикселя по X
- координаты центра верхнего левого пикселя по Y

Далее, вам надо приложить к своему растру еще один файл - файл описания проекции, с тем же именем, что и растр, но с расширением .prj - скачайте его отсюда spatialreference.org/ref/epsg/popular-visualisatio...

Далее вам остается только правильно скормить это www.gdal.org/gdal2tiles.html либо www.maptiler.com и получить искомые тайлы, которые дальше вы сможете подключить к Leaflet, будто у них есть реальные координаты.

Comments

[h8nor]

Круто! Я бы по наитию ни за что не сделал что-то подобное.

[Moskus]

Дѣаволъ: По наитию - не надо никогда, надо документацию читать... Но мой способ - не то чтобы стандартный.
Он просто наиболее коротким способом решает проблему топикстартера.

Потому что "по уму", совсем правильно, ему нужно было бы водрузить плагин Proj4Leaflet https://github.com/kartena/Proj4Leaflet создать свою координатную систему, ознакомившись с тем, как это вообще делается в Proj4, привязать свой растр в чем-то, где можно задать эту систему координат (QGIS?), потом побиться головой об стену, пытаясь заставить gdal2tiles.py понять эту систему при нарезке растра на тайлы.

Я же предлагаю "срезать угол", используя реальную систему координат, которая используется всякими там Google и OSM, но фальшивые координаты. Это экономит усилия.

[fynjy_8]

Moskus: Спасибо за помощь, но не сработало)
Делал в маптилер (пока чисто на пробу, так как в нем легче чем мучатся с gdal2tiles). Прикрутил .wld, на выходе он мне выдал тайлы и страничку в опенлаерс, там да, сработало, но там всё гораздо проще, тупо задаются mapBounds и gridBounds, вот и всё. А в тайлах разницы то и нету. Где в лифлет должны прикручиваться координаты не ясно
Заранее спасибо за ответ

[Moskus]

fynjy_8: Не понял вашего вопроса, о какой разнице в тайлах вы говорите, какие координаты хотите "прикрутить" и так далее.
Что вы хотите получить? Только объясняйте без аналогий, а вот прямо как есть: "хочу чтобы карта делала вот это".

[Moskus]

fynjy_8: Ну и, собственно, раз в openlayers работает, значит оно "сработало". А то, что вы не можете от Leaflet добиться того, что вам нужно - так это другой вопрос уже.

[fynjy_8]

Moskus: Спасибо еще раз, что уделяете мне время)
Суть: есть растр 5913x7863, хочу чтобы его координаты в Leaflet были в МСК [1468.9700,-11.7050], [1968.2705,363.7705] (как вы знаете ось Y идёт положительная вниз)
Именно такие координаты почему? Потому, что будут сверху накладываться куча geojson'ов, они уже готовые и именно в этих координатах, координаты местные.

Почему, как я считаю, сработало в openlayers? Потому, что там есть четкие опции mapBounds и gridBounds, где четко задаются границы. Никаких изменений в нарезанных тайлах я не увидел, поэтому когда я залил тайлы (те, которые были нарезаны с привязкой .wld) в leaflet - ничего не изменилось

[Moskus]

fynjy_8: Значит, MapTiler сожрал ваши тайлы и проигнорировал привязку. Или вместо .wld должен быть .jpw (или .pnw). Здесь есть куча всяких промежуточных тонкостей. Вам придется разобраться - то, что я выше написал, не является исчерпывающей пошаговой инструкцией.

[Moskus]

Так, а вот если это у вас настоящая МСК, да еще с перевернутой осью, то все плохо :) Вам придется ее задать, как полагается, в формате PROJ4.

[h8nor]

Moskus: Вы написали, что использовать вектор или растр - дело разработчика. Подскажите, где можно почитать, как используется память в случае работы с векторными изображениями (не окажется ли так, что в конечном итоге без оптимизации памяти пользователю потребуется больше)? Исхожу из соображений, что считывать всегда приходится больше, чем записывать.

[Moskus]

Дѣаволъ: А как вы это себе представляете, если в таком случае нужно сравнивать несколько картографических интерфейсных фреймворков, разные режимы каждого из них (обычный, Canvas, WebGL), все это - в разных browser-ах под разными ОС?

[h8nor]

Moskus: не думал, что всё так сложно.

[Moskus]

Дѣаволъ: Ну а как еще? Это же web.

[h8nor]

Moskus: по умолчанию вектор весит меньше. Думал сравнить загружаемые в оперативу карты из растра и вектра, и не заморачиваться с ОСями и браузерами. Полагаю, для обработки вектра каким-нить популярным фреймворком может потребоваться дополнительная память.

[Moskus]

Дѣаволъ: Представьте себе, например, что вы используете тот же Leaflet и в нем - Canvas. Вы можете сказать, где в итоге оказывается графика, благодаря поддержки графического ускорения browser-ом?

[h8nor]

Moskus: Нет, не могу. На сколько я представляю себе, - в случае с Canvas для создания растрового изображения потребуется аппаратная поддержка. Даже если обработкой будет заниматься GPU, итог должен перейти в RAM. Что там будет после обработки вектора - вопрос.

[h8nor]

Moskus: Кажется, я нашёл ответ на свой вопрос, - современные браузеры прекрасно оптимизируют SVG.

Answer 3

[h8nor]

Была статья.

Comments

[fynjy_8]

Спасибо за ответ, но там к координатам никакой привязки нету. В комментариях речь только о географических координатах

[Moskus]

fynjy_8: Ну так назначьте изображению фальшивые геодезические координаты в гугловской системе координат, такие, как вам нужны, а потом нарежьте на тайлы gdal2tiles.py из состава GDAL и пользуйтесь.

[fynjy_8]

Moskus: огромное спасибо за ответ, ждал именно Вас, так как на хабре много комментов по теме от Вас, Moskus :)

Можно чуть-чуть поподробнее о привязке к фальшивым координатам тайлов? Я профан в этой теме)

Всё что накопал сейчас, что мне нужно воспользоваться Proj4js и Proj4Leaflet чтобы сделать свою систему координат, но вообще не понял че как там задаётся. Буду рад любой помощи

[Moskus]

fynjy_8: Оформлю отдельным ответом тогда.