Как стать автором
Обновить

Комментарии 37

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

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

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

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

Разницы особой нет.
Можно скриншоты в Хроме/Фоксе/Опере/IE9, с открытой картой и отрисованным на правой панельке временем рендерина?
У меня аналогичная машина, больше 1-3с редко когда бывает.
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
Это для FF
А ведь конкретно просил скриншот, а не абстрактную копипасту абстрактных данных :)
Какой это браузер (судя по тормозам — фокс)? Какой размер экрана? (четыре тайла — уже как минимум 1280х1024).
Какая, в конце концов, операционная система?
Я так понимаю скриншот покажет всю указанную вами информацию?
скрин

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

Думаю, вам стоит отписать в багзиллу фокса об этой проблеме. Примеры аналогичных багрепортов можете глянуть на github.com/kothic/kothic-js/wiki/Browser-bugs.
Можете заодно посмотреть, рисуется ли гладко и однородно-полужирно текст на osmosnimki.ru/kothic/text-rotate, в этом и других браузерах?
Напишу :)
Текст в ФФ криво отображается, в Хроме всё отлично. Спасибо.
Можно ссылку на ваш репорт?
Chrome
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
Учтите, что это пока не рекомендуемое решение для онлайн-карт, а proof of concept «на вырост» — браузеры по скорости быстро подтянутся, а разрабатывать библиотеку надо начинать уже сейчас. :) Тем более что скажем в Хроме, IE9, FF4 производительность вполне неплохая.
Первый шаг сделан, поздравляю!
Надеюсь когда-нибудь это будет также летать, как векторные google maps v5 на android.
Потребуется и сжатый бинарный формат (чтобы зря не расходовать трафик на текстовые вектора).
Для ускорения вывода можно и WebGL попробовать.

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

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

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

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

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

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

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

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

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

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

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

Публикации

Истории