Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 60
Очень здорово, если администрация вашего города примет ваш вариант, в течении 5 лет учавствовал в создании схем генеральных планов, обычно никто не делает на своем сайте нормальную визуализацию =( Посмотрите хотя бы на то, как выглядит подача генплана Санкт-Петербурга. www.kgainfo.spb.ru/picturemap/originalpicture.html?showmap&imageid=325af33d8a2e51d2bec5aedf7e0c5da3
А ведь по идее из такой карты можно много интересной информации подчерпнуть. Где будут газ прокладывать, дороги новые, где садоводства в ИЖС будут на перспективу переводить.
А если развить идею с leaflet, то можно сделать еще интереснее, например выложенные схемы спозиционировать друг относительно друга и сделать select для карт. Навелся на свой район и переключаешь схемы — газовую, транспортную, и.т.д
А ведь по идее из такой карты можно много интересной информации подчерпнуть. Где будут газ прокладывать, дороги новые, где садоводства в ИЖС будут на перспективу переводить.
А если развить идею с leaflet, то можно сделать еще интереснее, например выложенные схемы спозиционировать друг относительно друга и сделать select для карт. Навелся на свой район и переключаешь схемы — газовую, транспортную, и.т.д
О, да, если этим заниматься, то можно много интерактивных вещей наделать. Но еще мне кажется, что это будет развиваться, если люди будут хотеть получить это от администрации.
Просто все привыкли, что Яндекс, Google, 2Gis делают красивые, удобные приложения, где можно получить нужную информацию. И даже от них периодически просят добавить новую функциональность. Мне, например, нравится от 2Gis фишка — входы в здание, очень удобно.
А требовать от администрации удобно оформленной информации — это как-то нонсенс. А обсуждается, в общем-то представленная чиновниками стратегия развития города. Которую неплохо бы проанализировать с разных сторон. А чтобы предметно проанализировать, необходимо покрутить-повертеть разные схемы и планы, может быть даже действительно сравнить разные слои на предмет странных соседств.
Просто все привыкли, что Яндекс, Google, 2Gis делают красивые, удобные приложения, где можно получить нужную информацию. И даже от них периодически просят добавить новую функциональность. Мне, например, нравится от 2Gis фишка — входы в здание, очень удобно.
А требовать от администрации удобно оформленной информации — это как-то нонсенс. А обсуждается, в общем-то представленная чиновниками стратегия развития города. Которую неплохо бы проанализировать с разных сторон. А чтобы предметно проанализировать, необходимо покрутить-повертеть разные схемы и планы, может быть даже действительно сравнить разные слои на предмет странных соседств.
Хорошая реализация. Я что-то наподобие делал на Яндекс api. с переключение генплана на Яндекс карту и соответственно с отметками участков. Возможно для следующий реализации буду пользоваться leaflet.js
Как говорится «мопед не мой»: ) в данном представлении генплана использовались возможности leaflet.js, которые представлены у них в примере на первой странице сайта, поэтому не могу советовать в чем лучше или хуже использовать ее относительно яндекс api. Но в целом, получилось очень быстро.
Если серьезно, то отчасти целью этой заметки было показать, что можно сделать удобно, потратив лишь немного времени. Сейчас есть много удобных инструментов (в их числе leaflet.js), используя которые (даже неспециалист) может делать круто работающие сайты и приложения на любой платформе или браузере.
Если серьезно, то отчасти целью этой заметки было показать, что можно сделать удобно, потратив лишь немного времени. Сейчас есть много удобных инструментов (в их числе leaflet.js), используя которые (даже неспециалист) может делать круто работающие сайты и приложения на любой платформе или браузере.
Лучше попросить у них вектор, могут и предоставить, отрисовать его каким-нибудь TileMill`ом )
Вероятнее всего всю документацию, в том числе и эти картинки-схемы, готовит один из НИИ, заявленных как разработчики генплана. Посему получение вектора может затянуться на неопределенное количество времени. А слушания по генплану Красноярска начались уже.
А еще вектор обратно отскейлить по горизонтали можно.
Не какой-то НИИ, а Гипрогор. На схеме из примера штамп стоит в нижнем правом углу =)
Вообще вектор у администрации точно есть, т.к это обязательное условие по ТЗ. У них даже скорее всего есть 2 диска:
1. Карты для общественного пользования
2. Карты для служебного пользования
и они бы без проблем могли дать вам один из них, но не дадут, т.к им не хочется проблем и лишней головной боли. Если бы хотели — выложили бы на сайт.
Вообще вектор у администрации точно есть, т.к это обязательное условие по ТЗ. У них даже скорее всего есть 2 диска:
1. Карты для общественного пользования
2. Карты для служебного пользования
и они бы без проблем могли дать вам один из них, но не дадут, т.к им не хочется проблем и лишней головной боли. Если бы хотели — выложили бы на сайт.
TillMill'ом — это будет воистину титанической задачей, т.к карты сделаны в спец ПО(карта из топика, к примеру, в MapInfo) и нужно будет делать оформление для каждого слоя снова.
Бесценно, когда находишь на хабре статьи по задачам, с которыми тоже приходилось сталкиваться.
Огромное спасибо автору!
Огромное спасибо автору!
Недавно использовал leaflet отображения зумирующейся картинки — планов этажей.
Для нарезки пользовался библиотекой GDAL (gdal2tiles.py). Результатом доволен. На всех зумах с четкостью отлично.
В настройках слоя в leaflet надо ставить tms:true.
Идею и описание брал здесь
Еще есть очень удобная программа MapTiler, но очень она ограничена в бесплатном варианте.
Есть нарезчик тайлов от Яндекса. У него с резкостью было не очень (может только в моем случае)
Для нарезки пользовался библиотекой GDAL (gdal2tiles.py). Результатом доволен. На всех зумах с четкостью отлично.
В настройках слоя в leaflet надо ставить tms:true.
Идею и описание брал здесь
Еще есть очень удобная программа MapTiler, но очень она ограничена в бесплатном варианте.
Есть нарезчик тайлов от Яндекса. У него с резкостью было не очень (может только в моем случае)
По секрету всему свету:
Есть такой сервис (не очень известный) — geohosting.pro/products/tiler/
Позволяет взять картинку, разрезать ее на тайлы и залить на Яндекс.Диск.
После чего подключить как слой в Яндекс.Карты (или в гугл, или в леафлет — принцип везде один)
Никаких imagemagic и скриптов на php — все работает на клиенте.
Есть такой сервис (не очень известный) — geohosting.pro/products/tiler/
Позволяет взять картинку, разрезать ее на тайлы и залить на Яндекс.Диск.
После чего подключить как слой в Яндекс.Карты (или в гугл, или в леафлет — принцип везде один)
Никаких imagemagic и скриптов на php — все работает на клиенте.
Вчера попробовал несколько раз загрузить картинку для нарезки: один раз браузер у меня завис, а пару других получались в нарезке просто черные квадраты.
И что же за картинка там была?
Взята здесь в архиве: www.admkrsk.ru/citytoday/building/town_planning/Pages/shema_univers.aspx
У меня получилось открыть и использовать, вот тут она в слое «Универсиада»
Т.е. получилось нарезать в сервисе geohosting.pro/products/tiler/?
У меня в этом сервисе не получилось нарезать, а gdal2tiles.py'ем только так нашинковал.
У меня в этом сервисе не получилось нарезать, а gdal2tiles.py'ем только так нашинковал.
3. Переименование файлов из линейной нумерации в сетку XxY
Можно проще. Я делал что-то типа такого:
convert file_to_convert.png -crop 100x100 -set filename:tile "%[fx:page.x/100]_%[fx:page.y/100]" "folder/%[filename:tile].png"
О, спасибо, добрый человек! Я пытался вкурить эту страницу www.imagemagick.org/Usage/crop/, найти пример, где есть нарезка сеткой. Но сделать надо быстро, и поэтому на php переименование запилил.
Выглядит круто. Чтоб добро не пропадало, выложи, пожалуйста, на гитхаб. И статью по использованию на хабр выложи. И будет и карма, и благодарность, и может кого на мысль наведешь, и к делу побудишь.
Так-то вот к этому проекту можно было прикрутить пожелания жителей, их замечания, предложения по изменению генплана. Хорошо бы легло в твою cms, наверное.: )
Так-то вот к этому проекту можно было прикрутить пожелания жителей, их замечания, предложения по изменению генплана. Хорошо бы легло в твою cms, наверное.: )
мне кажется, что вы слишком самокритичны: переделать, ajax это не модно и т.д.: ) добейте до minimum viable product, зарелизьте, будет код шуршать на сервере, пользователи уже кнопки понажимают, а там уже к новому году причешете до «все ок».
а то столько кода и не работает.
а то столько кода и не работает.
я буду вашим первым пользователем, жду версию для быстрого запуска. на гитхабе поставил watcher, чтобы отследить изменения проекта.
Отлично, было интересно прочитать историю проекта.
Лично я всегда радуюсь за людей, которые решают какие-то задачи подручными средствами, рассказывают об этом, получают обратную связь, а затем либо улучшают свое решение, либо используют полученные навыки при решении других задач.
Ваш проект напомнил мне habrahabr.ru/post/221653/
Лично я всегда радуюсь за людей, которые решают какие-то задачи подручными средствами, рассказывают об этом, получают обратную связь, а затем либо улучшают свое решение, либо используют полученные навыки при решении других задач.
Ваш проект напомнил мне habrahabr.ru/post/221653/
А мне вот, в свое время, работа не помешала. И вырос похожий проект, с похожими целями, в есоседи.
Если не ошибаюсь, esosedi неколько лет использовали карты и объекты wikimapia, так что я даже считал это клоном wikimapia.
А еще панорамио, википедии, osm и букинга. Да и «карт» у викимапии нет. Но давайте об этом в другой раз.
Тем не менее esosedi до сих пор использует базу wikimapia (и использовала ещё за 5 лет до открытия API, что наводит на связь с создателями wikimapia), и в первую очередь отличается от wikimapia лишь отсутствием полноэкранного режима, что наводит на мысль о клоне-сателлите и аффилированных создателях.
Ваш неизвестный проект симпатичнее выглядит, чем есоседи. Чисто субъективно.
А www.localway.ru еще лучше выглядит. А еще 20 других сайтов выглядят по другому. А на хабре вообще карты нет.
А АПИ Яндекс.Карт лучше леафлета. Чисто субъективно гарантирую.
А АПИ Яндекс.Карт лучше леафлета. Чисто субъективно гарантирую.
Вы абсолютно правы, более того хорошо, когда есть проекты на разный вкус, цвет и аудиторию, когда есть разные средства, в том числе и для реализации карт. Я смотрел на есеседях Красноярск, ко многим местам описания и комментарии на карте — это какие-то воспоминания, типа здесь был аэропорт, а здесь были бега. Этакий историческое наслоение, интересно почитать.
Заглушка вылезает «О смене браузера» под яндекс.браузером
Для нарезки тайлов я использую gdal2tiles. Но предварительно его нужно будет немного пропатчить.
После установки и последующего патчинга нарезание тайлов выглядит довольно просто:
Все тайлы будут аккуратно сложены в директорию с названием, как у файла-исходника с картинкой.
Здесь 0-6 — это минимальный и максимальный зум для карты.
Определить максимальное значение для зума (чтоб не было размытия картинки) можно следующим образом:
Таким образом, если у вас максимальная сторона картинки-исходника равна 19256 px, максимальный зум должен быть равен 7 (будет 0-7 в вашем случае).
Кроме того, правильно будет ещё и сжать готовые тайлы для более быстрой загрузки. Для этого я использую утилиту pngquant.
После нарезки тайлов заходим в директорию с ними:
И ужимаем все найденные файлы по маске:
Здесь я ищу все файлы с расширением png и ужимаю их, попутно уменьшая количество цветов до 256. В результате сжатия итоговый размер тайлов уменьшается более, чем в 2 раза без видимого ухудшения качества.
После установки и последующего патчинга нарезание тайлов выглядит довольно просто:
gdal2tiles.py -p raster -z 0-6 -w none testimage.pngВсе тайлы будут аккуратно сложены в директорию с названием, как у файла-исходника с картинкой.
Здесь 0-6 — это минимальный и максимальный зум для карты.
Определить максимальное значение для зума (чтоб не было размытия картинки) можно следующим образом:
- Zoom level 0: 256 px
- Zoom level 1: 512 px
- Zoom level 2: 1024 px
- Zoom level 3: 2048 px
- Zoom level 4: 4096 px
- Zoom level 5: 8192 px
- Zoom level 6: 16384 px
- Zoom level 7: 32768 px
- и т.д.
Таким образом, если у вас максимальная сторона картинки-исходника равна 19256 px, максимальный зум должен быть равен 7 (будет 0-7 в вашем случае).
Кроме того, правильно будет ещё и сжать готовые тайлы для более быстрой загрузки. Для этого я использую утилиту pngquant.
После нарезки тайлов заходим в директорию с ними:
cd testimageИ ужимаем все найденные файлы по маске:
find . -name '*.png' -exec pngquant --ext .png --force 256 {} \;Здесь я ищу все файлы с расширением png и ужимаю их, попутно уменьшая количество цветов до 256. В результате сжатия итоговый размер тайлов уменьшается более, чем в 2 раза без видимого ухудшения качества.
Поймите меня правильно, я не хочу принизить заслуги автора, но к уже сказанному в комментариях про использование средств, которые не надо изобретать, я хотел бы добавить тот факт, что работа с картой без реальных координат — это как построить самодельный автомобиль, но ездить на нем, разгоняя его собственными ногами, вместо того, чтобы заправлять бензином.
Без этого, например, невозможно наложение на другие карты, измерение расстояний и прочее.
Почитать можно тут www.digital-geography.com/qgis-tutorial-i-how-to-georeference-a-map/
Без этого, например, невозможно наложение на другие карты, измерение расстояний и прочее.
Почитать можно тут www.digital-geography.com/qgis-tutorial-i-how-to-georeference-a-map/
Мне кажется, вы сравниваете коробку автомат и механку. Большинству людей реальные координаты к чему? Надо просто посмотреть на карте место, прочитать названия, соориентироваться на месте относительно других каких-то известных точек.
Еще одной целью было сделать просто и быстро за полдня карту, самый простой вариант был просто нарезать картинки и в html кнопками вверх-вниз, вправо-влево пододвигать на ряд картинок. А получилось быстро да еще и на leaflet.js. И одной из целей публикации было узнать о других более быстрых средствах подготовки своих карт. И как показывают комментарии выше, такое проделывали многие. Вчера попробовал скрипт gdal2tiles.py (по совету makis и Nop), и после нескольких прогонов получил нужный результат.
Еще одной целью было сделать просто и быстро за полдня карту, самый простой вариант был просто нарезать картинки и в html кнопками вверх-вниз, вправо-влево пододвигать на ряд картинок. А получилось быстро да еще и на leaflet.js. И одной из целей публикации было узнать о других более быстрых средствах подготовки своих карт. И как показывают комментарии выше, такое проделывали многие. Вчера попробовал скрипт gdal2tiles.py (по совету makis и Nop), и после нескольких прогонов получил нужный результат.
Я уже объяснил, для чего людям реальные координаты. Могу объяснить подробнее:
— для того, чтобы иметь возможность совмещать карту с другими картами и снимками, векторными пользовательскими данными;
— для того, чтобы другие люди могли использовать подготовленные вами тайлы в стандартном формате и стандартной схеме именования в каких-то своих проектах;
— для того, чтобы измерять расстояние в метрах, а не в попугаях;
— для того, чтобы иметь возможность осуществлять геокодирование (ткнуть в карту и получить адрес, либо, наоборот, по адресу найти координаты, чтобы забить их потом в навигатор) по внешним сервисам вроде Nominatim;
— для того, чтобы прокладывать маршрут, используя внешние сервисы (OSRM);
— конкретно в случае вашей карты это бы исправило искажение формы объектов (растяжение по вертикали), которое видно невооруженным глазом.
То есть конечно, если лично вы не собираетесь развивать это — пожалуйста, имеете полное право оставить это в виде простой картинки, которую можно прокручивать, приближать и удалять.
— для того, чтобы иметь возможность совмещать карту с другими картами и снимками, векторными пользовательскими данными;
— для того, чтобы другие люди могли использовать подготовленные вами тайлы в стандартном формате и стандартной схеме именования в каких-то своих проектах;
— для того, чтобы измерять расстояние в метрах, а не в попугаях;
— для того, чтобы иметь возможность осуществлять геокодирование (ткнуть в карту и получить адрес, либо, наоборот, по адресу найти координаты, чтобы забить их потом в навигатор) по внешним сервисам вроде Nominatim;
— для того, чтобы прокладывать маршрут, используя внешние сервисы (OSRM);
— конкретно в случае вашей карты это бы исправило искажение формы объектов (растяжение по вертикали), которое видно невооруженным глазом.
То есть конечно, если лично вы не собираетесь развивать это — пожалуйста, имеете полное право оставить это в виде простой картинки, которую можно прокручивать, приближать и удалять.
Мне кажется основной посыл статьи в том, что многие сайты, например сайт Красноярской администрации выкладывают файлы over 100500 мб, которые не удобно смотреть даже если скачаешь себе на комп и показал простой и быстрый способ улучшить юзабилити. А материал автор взял, какой был, он судя по всему не картограф.
Кстати, растяжение по вертикали появилось потому, что генпланы делаются в местной системе координат, для наименьших искажений реальных размеров. Также чтобы привязать такие материалы к WGS84(на которой работает GPS к примеру) нужны ключи перевода, которые доступны для служебного пользования. Такая вот секретность у нас по закону.
Кстати, растяжение по вертикали появилось потому, что генпланы делаются в местной системе координат, для наименьших искажений реальных размеров. Также чтобы привязать такие материалы к WGS84(на которой работает GPS к примеру) нужны ключи перевода, которые доступны для служебного пользования. Такая вот секретность у нас по закону.
Материал называется «Свои карты на Leaflet.js» а не, например, «Как просматривать большие-большие картинки в browser-е, чтобы они не тормозили». Перефразируя пословицу: «Назвал свое творение картой — полезай в основы веб-картографии».
Утверждение в вашем втором абзаце полностью не соответствует истине, потому что:
— искажено само изображение карты, что можно увидеть по вертикально растянутым кругам в легенде карты — они не изображены в масштабе карты, но все равно растянуты;
— действительно, местные системы координат выбираются так, чтобы изображать ограниченную территорию (область или город) с минимальными искажениями формы и размеров объектов на всей территории, где действует данная МСК, потому никакой растянутости в них не наблюдается (то есть вы сами привели аргумент, который опровергает, а не подтверждает ваш же тезис);
— конкретно в Красноярском крае приняты местные системы координат, которые основаны на поперечной проекции Меркатора (потому что образованы сдвигом из СК-42, где используется именно эта проекция), что полностью соответствует предыдущему пункту;
— наличие ключей перехода для МСК Красноярского края не дало бы абсолютно ничего для данного конкретного случая, потому что на этой карте отсутствуют координаты и даже сетка проекции, так что переводить из МСК в WGS84 банально нечего;
— для привязки данной карты, учитывая ее степень подробности, было бы достаточно координат точек пересечения дорог, взятых из OpenStreetMap, например, так что ключи перехода тут совершенно бесполезны.
P.S.: Загляните в список моих публикаций на Хабре, прежде чем продолжать спор по теме, в которой, очевидно, слабо ориентируетесь.
Утверждение в вашем втором абзаце полностью не соответствует истине, потому что:
— искажено само изображение карты, что можно увидеть по вертикально растянутым кругам в легенде карты — они не изображены в масштабе карты, но все равно растянуты;
— действительно, местные системы координат выбираются так, чтобы изображать ограниченную территорию (область или город) с минимальными искажениями формы и размеров объектов на всей территории, где действует данная МСК, потому никакой растянутости в них не наблюдается (то есть вы сами привели аргумент, который опровергает, а не подтверждает ваш же тезис);
— конкретно в Красноярском крае приняты местные системы координат, которые основаны на поперечной проекции Меркатора (потому что образованы сдвигом из СК-42, где используется именно эта проекция), что полностью соответствует предыдущему пункту;
— наличие ключей перехода для МСК Красноярского края не дало бы абсолютно ничего для данного конкретного случая, потому что на этой карте отсутствуют координаты и даже сетка проекции, так что переводить из МСК в WGS84 банально нечего;
— для привязки данной карты, учитывая ее степень подробности, было бы достаточно координат точек пересечения дорог, взятых из OpenStreetMap, например, так что ключи перехода тут совершенно бесполезны.
P.S.: Загляните в список моих публикаций на Хабре, прежде чем продолжать спор по теме, в которой, очевидно, слабо ориентируетесь.
Да, вы правы, я сразу не обратил внимание на появившееся вертикальное искажение, посмотрел оригинальный файл на сайте администрации, там такого нет. Осталось попробовать сделать GeoTiff, нарезать его на тайлы и посмотреть что получится. Интересно почему из-за простой нарезки на тайлы появились искажения, а также муть при приближении?
Также попробовал наложить OSM слой и карту из примера, наложились с минимальными искажениями.
Также попробовал наложить OSM слой и карту из примера, наложились с минимальными искажениями.
Решил развить идею автора с учетом замечаний Moskus, что получилось можно посмотреть тут http://mirr04.github.io/index.html. Привязал ту же карту, что и в топике. Чтобы она включилась в правом верхнем углу меняйте слой на «My».
Кстати встал вопрос куда лучше загружать тайлы, т.к если zoom х15 — это 22,8 мб, 2108 файлов
zoom x16 — уже 8258 файлов
zoom x17 — 32634 файла
На github заливает очень медленно =( Да и на хостинг по FTP тоже.
Тайлы делал MapTiler'ом, который посоветовал Synoptic.
Кстати встал вопрос куда лучше загружать тайлы, т.к если zoom х15 — это 22,8 мб, 2108 файлов
zoom x16 — уже 8258 файлов
zoom x17 — 32634 файла
На github заливает очень медленно =( Да и на хостинг по FTP тоже.
Тайлы делал MapTiler'ом, который посоветовал Synoptic.
На github так можно сделать?
На хостинге ssh нет =) Попробую подрубить, спасибо
На хостинге ssh нет =) Попробую подрубить, спасибо
Спасибо за подсказку, обновил сервис mirr04.github.io/index.html, теперь там еще карта объектов универсиады и основной чертеж до 17-го зума.
Спасибо antirek за наводку, идея крутая. Часто за то же самое, но на базе Arcgis server бешенные деньги платят. Или публичная кадастровая карта сделана на MapInfo MapExtreme , а по приятности отрисовки мне кажется leafletjs выигрывает.
Спасибо antirek за наводку, идея крутая. Часто за то же самое, но на базе Arcgis server бешенные деньги платят. Или публичная кадастровая карта сделана на MapInfo MapExtreme , а по приятности отрисовки мне кажется leafletjs выигрывает.
Круто получилось, что когда переключаешься между слоями, просматриваешь одно и то же место. Чтобы так получилось надо в MapTiler'е картинки совмещать и одинаково резать?
Чтобы так получилось, нужно сделать привязку своих данных к реальным координатам. А одинаковая нарезка получается автоматически, потому что стандартные тайловые форматы для веб-картографии имеют общую схему деления на тайлы.
В MapTiler'е есть удобная штука, визуальная привязка, вот как это выглядит. А дальше, как Moskus ниже написал оно само =) Плюс бонусом такие фишки как наложение gps-треков, измерение длин и площадей и такое прочее.
Еще думаю доделать, чтобы легенду просматривать одновременно с картой, а то неудобно получается, но это уже завтра =)
Еще думаю доделать, чтобы легенду просматривать одновременно с картой, а то неудобно получается, но это уже завтра =)
В Safari не пашет.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Свои карты на leaflet.js