Что использовать для создания интерактивной карты посёлка?
Товарищи, нужен ваш совет!
Есть карта посёлка в виде простого большого изображения. Нужно создать интерактивную карту, с зумом, на которой можно выбрать конкретный дом/участок и посмотреть о нём какую-то информацию. Ещё есть разные типы участков - нужно их выделять разным цветом.
Что для этого можно использовать? Есть какие-то готовые скрипты?
Самое простое, что вы можете сделать - использовать картографический фреймворк Leaflet.js leafletjs.com , данные хранить в UTFGrid https://github.com/consbio/Leaflet.UTFGrid и GeoJSON
Готовить данные - в QGIS.
Если не хотите программировать front-end сами, воспользуйтесь внедренным окном с сервиса nextgis.com
Вы знакомы, как я понимаю, с этим фреймворком и картографией вообще?
Не очень понимаю, как воспользоваться имеющимся у меня изображением карты посёлка.
Прочитал туториал про не-географические карты, вроде, всё понятно, но есть проблема - изображение карты весит около 200МБ, что никуда не годится.
Правильно я понимаю, что нужно использовать tileLayer?
Никита Мелихов, во-первых, у вас очень даже географическое изображение, это же карта поселка, а не вымышленная какая-то. И как иначе вы будете совмещать на ней какие-то данные?
Так что привязывайте изображение в QGIS к географическим координатам, экспортируйте в тайлы (формат TMS), подключайте тайловый (да, это tileLayer) источник к Leaflet. 200Мб - прекрасно, в форме тайлов пользователь будет грузить только нужные фрагменты.
Ожидаемо, задача не решается сходу по пошаговым инструкциям, а требует освоения картографических и веб-картографических технологий с пониманием.
Moskus, я на тайлах как-раз и застрял в этой теме. Сначала пытался Яндекс.Карты использовать, но там, как я понял, свои тайлы под разный зум и не особо у меня получилось их сделать.
Вопросик по Leaflet. Я правильно понимаю, что могу использовать L.CRS.Simple для декартовых координат, а не географических, и tileLayer для подгрузки только нужных фрагментов?
В принципе, если (когда :) я с этим разберусь, то останется только разобраться с размещением объектов (участков) на карте, а дальше останется только ловить события по клику на объект и, в общем-то, готово :)
Никита Мелихов, да, TMS предполагает (и так должно быть) разные тайлы для разных масштабов. Еще раз: привязывайте изображение в QGIS, экспортируете в GeoTIFF, скармливаете его скрипту gdal2tiles, получаете тайлы. Именно для того, чтобы соединять разные слои, вам нужны реальные координаты. С условной системой координат вы потом еще намучаетесь. Не изобретайте велосипед.
Никита Мелихов, на Хабре была статься про библиотеки для визуализации карт https://habr.com/post/318600/ - они несколько проще, но используя библиотеки узкого назначения, всегда есть шанс зайти в тупик, когда добавление нового функционала потребует переписывать вообще все с нуля.
Ну раз есть одна картинка, то тут ничего сложного нету. Создай div размером с картинку, поставь ее на фон любым способом. Внутрь накидай элементов, обозначающие разные объекты и размести их на своих местах. По скролу увеличивай/уменьшай размер контейнера (transform:scale). Сделай какой-то drag&drop чтоб двигать контейнер по экрану. Ничего сложного тут нет. Если у участков есть координаты, то просто сгенерируй все объекты на основе данных.
Никита Мелихов, В чем проблема разбить картинку на множество квадратов и грузить их, тем самым фон будет контейнером из квадратов картинок. Загружать в определенном радиусе от центра экрана. Попадает ли координата в центр окружности считается легко.