Kothic JS: рендерер OpenStreetMap, поддерживающий MapCSS/0.2, портировали на джаваскрипт, рисующий по холсту

    Многим поклонникам OpenStreetMap хорошо известен рендерер (отрисовщик) под названием Kothic, отличающийся неплохою поддержкою перспективного черновика стандарта картографических стилей MapCSS/0.2 и способный рисовать зрелищные векторные карты (даже и псевдо-3D — в косоугольной проекции, судя по скриншотам).

    Несколько дней назад без особого шума (если не считать отдельной страницы в вики OSM да ещё одной записи в твиттере у автора другой небезынтересной библиотеки — Leaflet, о которой упоминалось ужé на Хабрахабре и которая успела с тех пор заметно подразвиться) на свет Божий вышла версия Kothic, портированная на JavaScript и называющаяся по такому случаю Kothic JS. Взаимодействуя с Leaflet, скрипт Kothic JS отрисовывает векторную карту на холстах (HTML5 canvas) и формирует из этих холстов квадратные плитки («тайлы») для картографического движка Leaflet. Всё это происходит прямо во браузере.

    Код Kothic JS вы без труда найдёте на GitHub (там же и краткое описание), и есть демонстрационный сайт, рисующий на холсте векторную карту города Минска по данным из OpenStreetMap. Желающим посетить этот сайт я настойчиво рекомендую заранее запасаться терпением: во-первых, генерация каждой квадратной плитки занимает несколько секунд, а во-вторых, вероятен хабраэффект.
    Метки:
    Поделиться публикацией
    Похожие публикации
    Комментарии 37
    • +3
      Ну как же без шума? Довольно широко обсуждалось в списках рассылки (хотя они слабо интересуют обычных участников), плюс новость на штосме. Время генерации тайлов зависит от браузера, в опере всё довольно шустро.
      • –1
        Я помянул отсутствие не шума вообще, а только «особого шума», под которым понимаю появление блогозаписи на Хабрахабре или другое событие сходных масштабов информационного резонанса.
      • +11
        Привет от разработчиков :)
        Анонс был в рассылке talk@openstreetmap.org, lists.openstreetmap.org/pipermail/mapcss/2011-June/000196.html — на мой день рождения. :3
        Скорость отрисовки зависит в основном от браузера. Обычно в Chrome быстрее, в Opera красивее, в Firefox помедленнее.
        Ну и прочие баги браузеров, отловленные в процессе разработки, сведены на github.com/kothic/kothic-js/wiki/Browser-bugs :)
        • +2
          Поздравляю!!! Теперь есть клиент и MapCSS может стать стандартом :)
          Пару вопросов:
          — раскажите reprpoint — это опорная точка объекта (почему не взята просто точка тайла)?
          — properties — это просто набор osm тэгов объекта?
          — поддерживаются мультиполигоны или хотя бы coastline?
          — ради интереса если сжать эти данные в какой-то бинарный формат сколько получится разница по сравнению с osm pbf?

          P. S.: это точно прорыв, осталось дождаться различных красивых стилизаций карты (ночной, для автомобиля) :)
          • +1
            reprpoint — точка, в которой надо рисовать иконку. Если полигон большой, то в тайл может попасть только его маленький кусочек — иконку не надо рисовать несколько раз в разных тайлах. Ну и кроме того, у полигонов вида «бублик» эта точка должна лежать не в дырке, а на самом полигоне.
            properties — просто теги. Название позаимствовано из geojson.
            Мультиполигоны поддерживаются.
            coastline нарезается как полигон natural=coastline.
            В JS ничего быстрее json.gz нету, весить будет точно больше — данные на разных зумах повторяются, пусть и с генерализацией. Зато выборка однозначно на порядок быстрее.

            А рендереров для MapCSS навалом же. Kothic, Halcyon, JOSM, Komap/Mapnik, ceyx,…
        • +5
          Kothic JS может работать самостоятельно, просто мне как принимающему участие в разработке и Leaflet и Kothic JS было очень логично их интегрировать в демонстрационных целях. :)
          • +1
            Ура! Наконец-то рендренг перехал на клиента!
            Покажите 3D на Kothic JS.
            • +1
              Узнал автора, прочитав последнее слово заголовка
              • +4
                Я держался дольше, до этой строчки
                Всё это происходит прямо во браузере.
              • +3
                Все замечательно. Красиво и опрятно. Но с такой скоростью отрисовки многие пользователи будут просто покидать сайт не дождавшись загрузки очередного слоя.
                Возможно я один такой, но не думаю.

                Севастополь, SevStar 20Mbps
                AMD Athlon II X2 2.9
                2GB RAM
                Машинка может и не совсем новая, но в данном случае не справляется.
                • +1
                  браузер? пробовали Chrome/Opera/обновить?
                  ускорения GPU?
                  • 0
                    Firefox 5.0
                    Chrome 12.0.742.91

                    Разницы особой нет.
                    • 0
                      Можно скриншоты в Хроме/Фоксе/Опере/IE9, с открытой картой и отрисованным на правой панельке временем рендерина?
                      У меня аналогичная машина, больше 1-3с редко когда бывает.
                      • 0
                        tile 1181:658:11
                        365 ms layers styled
                        1310 ms map rendered
                        3235 ms icons/text rendered
                        4910 ms total

                        tile 1179:659:11
                        29 ms layers styled
                        1306 ms map rendered
                        3258 ms icons/text rendered
                        4593 ms total

                        tile 1180:659:11
                        167 ms layers styled
                        1230 ms map rendered
                        3413 ms icons/text rendered
                        4810 ms total

                        tile 1181:659:11
                        109 ms layers styled
                        1197 ms map rendered
                        3463 ms icons/text rendered
                        4769 ms total
                        • 0
                          Это для FF
                          • 0
                            А ведь конкретно просил скриншот, а не абстрактную копипасту абстрактных данных :)
                            Какой это браузер (судя по тормозам — фокс)? Какой размер экрана? (четыре тайла — уже как минимум 1280х1024).
                            Какая, в конце концов, операционная система?
                            • +1
                              Я так понимаю скриншот покажет всю указанную вами информацию?
                              скрин

                              1680х1050
                              Win 7 Ultimate 64
                              FF5
                              • +1
                                Спасибо.
                                Похоже, у вас нашлись проблемы посерьёзнее — на надписях отсутствует полужирный, и некоторые буквы как-то странно обрезаны.
                                Посмотреть, как оно «могло бы» выглядеть, можно, нажав кнопку «Compare with Mapnik».

                                Думаю, вам стоит отписать в багзиллу фокса об этой проблеме. Примеры аналогичных багрепортов можете глянуть на github.com/kothic/kothic-js/wiki/Browser-bugs.
                                Можете заодно посмотреть, рисуется ли гладко и однородно-полужирно текст на osmosnimki.ru/kothic/text-rotate, в этом и других браузерах?
                                • 0
                                  Напишу :)
                                  Текст в ФФ криво отображается, в Хроме всё отлично. Спасибо.
                                  • 0
                                    Можно ссылку на ваш репорт?
                          • 0
                            Chrome
                            • 0
                              tile 2360:1316:12
                              54 ms layers styled
                              1223 ms map rendered
                              1707 ms icons/text rendered
                              2984 ms total

                              tile 2362:1316:12
                              529 ms layers styled
                              749 ms map rendered
                              1898 ms icons/text rendered
                              3176 ms total

                              tile 2360:1317:12
                              61 ms layers styled
                              758 ms map rendered
                              2131 ms icons/text rendered
                              2950 ms total

                              tile 2362:1317:12
                              114 ms layers styled
                              740 ms map rendered
                              2493 ms icons/text rendered
                              3347 ms total
                      • +1
                        Учтите, что это пока не рекомендуемое решение для онлайн-карт, а proof of concept «на вырост» — браузеры по скорости быстро подтянутся, а разрабатывать библиотеку надо начинать уже сейчас. :) Тем более что скажем в Хроме, IE9, FF4 производительность вполне неплохая.
                      • 0
                        Первый шаг сделан, поздравляю!
                        Надеюсь когда-нибудь это будет также летать, как векторные google maps v5 на android.
                        Потребуется и сжатый бинарный формат (чтобы зря не расходовать трафик на текстовые вектора).
                        Для ускорения вывода можно и WebGL попробовать.

                        Кстати, здесь недавно был анонс мобильного приложения, которое тоже отображало osm в векторах, решив проблему избыточных данных, возможно стоит совместно выработать единый формат. Потому что рендеринг в браузере — это хорошо, но более приготовые данные отоборажались бы намного быстрее.
                        • 0
                          Данные в тайлах уже приготовлены, и в .js с gzip-сжатием уже весят значительно меньше аналогичных .png.

                          Основная проблема — тормознутый рендеринг самих браузеров, в основном — отрисовка текста.
                          WebGL на двухмерных данных, а тем более на тексте, не сильно поможет, если не помешает.
                          • 0
                            Сравнивал с SVG по скорости? Если в эти тайтлы положить уже готовые векторные svg?

                            p.s. да, js пока для этого тормозной, и binary arrays тоже пока тормозные — blog.n01se.net/?p=248. Думаю на silverlight летало бы, если даже обычные png тайтлы там очень плавные и быстрые — www.bing.com/maps/explore/.
                            • 0
                              js сам по себе очень шустр — применение стилей и js занимает сотни миллисекунд, там оптимизировать нечего и незачем.
                              Тормозит конкретно отрисовка текста. Спросить у браузера ширину сотни букв — и уже набегает полсекунды. Нарисовать те же сотню букв — в хроме займёт секунду, в фоксе все пять. Это надо фиксить разработчикам браузеров, изнутри js с этим ничего не сделаешь. Точка.

                              Силверлайт — проприетарная технология, в связи с этим абсолютно неинтересная. На хабре уже от флеша плюются, а флеш и тот текст на порядок шустрее браузеров рисует :)
                              • 0
                                Но на флэше я например никогда таких быстрых карт, как по ссылке выше, не видел. Да и на js не видел, до появления GPU-ускорения в IE9 и FF4.

                                Может рендерит буквы в кэш-буфер, и уже затем битмэпом их выводить? Здесь же не сто разных шрифтов используется.
                                Спрашивать ширину у браузера как я понимаю нужно только в случае полноценного рендера. Если просчитать всё это заранее на сервере, то и опрашивать ширину букв уже ведь и не нужно?
                                Сравнить с svg всё же было бы интересно.
                                • 0
                                  Если сосчитать всё на сервере, то зачем нам вообще рендеринг на клиенте? Тут как раз вся соль в том, что можно нарисовать всё разными стилями.

                                  Рисовать мелкие повёрнутые надписи картинками… ребята, которые делают виндовый Сафари, так и делают. Рекомендую в нём посмотреть osmosnimki.ru/kothic/text-rotate — там забавные артефакты местами :)

                                  SVG — не сравнивал и не хочу, смысла в нём для карт ноль, разве что для печати.

                                  А про скорость — вот, три дня прошло от первого тикета в Хромовскую багзиллу, и Kothic JS в последних билдах у меня уже отрисовывается мгновенно. Пруфскриншот.
                                  Так что рекомендую попинать всех знакомых и незнакомых разработчиков браузеров в багзиллы, авось подтянутся и тоже ускорятся :)
                                  • 0
                                    Ну если не считать ничего на сервере, тогда пускай оно тянет сразу из planet.osm в реальном времени :)
                                    Кстати, можно кэшировать сгенерированные ранее тайтлы на клиенте, чтобы они каждый раз не просчитывались при прокрутке карты или масштабировании.
                                    • 0
                                      Что такое тайтл? Вероятно, вы говорите о тайлах: ru.wikipedia.org/wiki/%D0%A2%D0%B0%D0%B9%D0%BB

                                      А код библиотеки открыто лежит на гитхабе, github.com/kothic/kothic-js — мы всегда рады Pull Request'ам с исправлениями и доработками в области быстродействия.
                                • 0
                                  > изнутри js с этим ничего не сделаешь. Точка.

                                  [авантюра]А если так?[/авантюра]
                                  • +1
                                    Есть ответ поинтереснее:
                                    canvas-text.googlecode.com/svn/trunk/examples/performance.html
                                    Всё равно медленнее. Но, возможно, и придётся, если авторы браузеров будут продолжать косячить с отрисовкой наклонного текста и его антиалиасингом.
                                    • 0
                                      Или, в качестве временного решения (пока браузеры затыкают дыры), flashcanvas? Если флеш быстрее рендерит текст. Он, правда, в оригинале только для IE, но, наверное, можно и в других браузерах завести.
                                      • 0
                                        Флеш быстрее рендерит текст, но медленен сам по себе. Точнее, медленно взаимодействует флеш и js.

                                        Можно было бы переписать весь Kothic JS на Flash, но тогда получился бы по сути Halcyon :)
                                        • 0
                                          Нет, весь не надо :) Я думал только холст на флеше взять. Да, скорость взаимодействия не учёл.
                            • 0
                              Спустя столько лет стоит сказать о прогрессе:
                              maps.me (mapswithme) для мобильных стал чуть ли не самым известным в мире проектом с osm в основе
                              www.youtube.com/watch?v=lj4SS1NTqyY — появился www.mapbox.com/mapbox-gl-js/examples с webgl на клиенте

                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.