вебмастер, фидошник
0,1
рейтинг
14 июня 2011 в 14:31

Разработка → 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. Желающим посетить этот сайт я настойчиво рекомендую заранее запасаться терпением: во-первых, генерация каждой квадратной плитки занимает несколько секунд, а во-вторых, вероятен хабраэффект.
Mithgol the Webmaster @Mithgol
карма
60,5
рейтинг 0,1
вебмастер, фидошник
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (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 на клиенте

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