Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 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 :)
Анонс был в рассылке 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 — это просто набор osm тэгов объекта?
— поддерживаются мультиполигоны или хотя бы coastline?
— ради интереса если сжать эти данные в какой-то бинарный формат сколько получится разница по сравнению с osm pbf?
P. S.: это точно прорыв, осталось дождаться различных красивых стилизаций карты (ночной, для автомобиля) :)
reprpoint — точка, в которой надо рисовать иконку. Если полигон большой, то в тайл может попасть только его маленький кусочек — иконку не надо рисовать несколько раз в разных тайлах. Ну и кроме того, у полигонов вида «бублик» эта точка должна лежать не в дырке, а на самом полигоне.
properties — просто теги. Название позаимствовано из geojson.
Мультиполигоны поддерживаются.
coastline нарезается как полигон natural=coastline.
В JS ничего быстрее json.gz нету, весить будет точно больше — данные на разных зумах повторяются, пусть и с генерализацией. Зато выборка однозначно на порядок быстрее.
А рендереров для MapCSS навалом же. Kothic, Halcyon, JOSM, Komap/Mapnik, ceyx,…
properties — просто теги. Название позаимствовано из geojson.
Мультиполигоны поддерживаются.
coastline нарезается как полигон natural=coastline.
В JS ничего быстрее json.gz нету, весить будет точно больше — данные на разных зумах повторяются, пусть и с генерализацией. Зато выборка однозначно на порядок быстрее.
А рендереров для MapCSS навалом же. Kothic, Halcyon, JOSM, Komap/Mapnik, ceyx,…
Kothic JS может работать самостоятельно, просто мне как принимающему участие в разработке и Leaflet и Kothic JS было очень логично их интегрировать в демонстрационных целях. :)
Ура! Наконец-то рендренг перехал на клиента!
Покажите 3D на Kothic JS.
Покажите 3D на Kothic JS.
Узнал автора, прочитав последнее слово заголовка
Все замечательно. Красиво и опрятно. Но с такой скоростью отрисовки многие пользователи будут просто покидать сайт не дождавшись загрузки очередного слоя.
Возможно я один такой, но не думаю.
Севастополь, SevStar 20Mbps
AMD Athlon II X2 2.9
2GB RAM
Машинка может и не совсем новая, но в данном случае не справляется.
Возможно я один такой, но не думаю.
Севастополь, SevStar 20Mbps
AMD Athlon II X2 2.9
2GB RAM
Машинка может и не совсем новая, но в данном случае не справляется.
браузер? пробовали Chrome/Opera/обновить?
ускорения GPU?
ускорения GPU?
Firefox 5.0
Chrome 12.0.742.91
Разницы особой нет.
Chrome 12.0.742.91
Разницы особой нет.
Можно скриншоты в Хроме/Фоксе/Опере/IE9, с открытой картой и отрисованным на правой панельке временем рендерина?
У меня аналогичная машина, больше 1-3с редко когда бывает.
У меня аналогичная машина, больше 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
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).
Какая, в конце концов, операционная система?
Какой это браузер (судя по тормозам — фокс)? Какой размер экрана? (четыре тайла — уже как минимум 1280х1024).
Какая, в конце концов, операционная система?
Спасибо.
Похоже, у вас нашлись проблемы посерьёзнее — на надписях отсутствует полужирный, и некоторые буквы как-то странно обрезаны.
Посмотреть, как оно «могло бы» выглядеть, можно, нажав кнопку «Compare with Mapnik».
Думаю, вам стоит отписать в багзиллу фокса об этой проблеме. Примеры аналогичных багрепортов можете глянуть на github.com/kothic/kothic-js/wiki/Browser-bugs.
Можете заодно посмотреть, рисуется ли гладко и однородно-полужирно текст на osmosnimki.ru/kothic/text-rotate, в этом и других браузерах?
Похоже, у вас нашлись проблемы посерьёзнее — на надписях отсутствует полужирный, и некоторые буквы как-то странно обрезаны.
Посмотреть, как оно «могло бы» выглядеть, можно, нажав кнопку «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
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 в векторах, решив проблему избыточных данных, возможно стоит совместно выработать единый формат. Потому что рендеринг в браузере — это хорошо, но более приготовые данные отоборажались бы намного быстрее.
Надеюсь когда-нибудь это будет также летать, как векторные google maps v5 на android.
Потребуется и сжатый бинарный формат (чтобы зря не расходовать трафик на текстовые вектора).
Для ускорения вывода можно и WebGL попробовать.
Кстати, здесь недавно был анонс мобильного приложения, которое тоже отображало osm в векторах, решив проблему избыточных данных, возможно стоит совместно выработать единый формат. Потому что рендеринг в браузере — это хорошо, но более приготовые данные отоборажались бы намного быстрее.
Данные в тайлах уже приготовлены, и в .js с gzip-сжатием уже весят значительно меньше аналогичных .png.
Основная проблема — тормознутый рендеринг самих браузеров, в основном — отрисовка текста.
WebGL на двухмерных данных, а тем более на тексте, не сильно поможет, если не помешает.
Основная проблема — тормознутый рендеринг самих браузеров, в основном — отрисовка текста.
WebGL на двухмерных данных, а тем более на тексте, не сильно поможет, если не помешает.
Сравнивал с SVG по скорости? Если в эти тайтлы положить уже готовые векторные svg?
p.s. да, js пока для этого тормозной, и binary arrays тоже пока тормозные — blog.n01se.net/?p=248. Думаю на silverlight летало бы, если даже обычные png тайтлы там очень плавные и быстрые — www.bing.com/maps/explore/.
p.s. да, js пока для этого тормозной, и binary arrays тоже пока тормозные — blog.n01se.net/?p=248. Думаю на silverlight летало бы, если даже обычные png тайтлы там очень плавные и быстрые — www.bing.com/maps/explore/.
js сам по себе очень шустр — применение стилей и js занимает сотни миллисекунд, там оптимизировать нечего и незачем.
Тормозит конкретно отрисовка текста. Спросить у браузера ширину сотни букв — и уже набегает полсекунды. Нарисовать те же сотню букв — в хроме займёт секунду, в фоксе все пять. Это надо фиксить разработчикам браузеров, изнутри js с этим ничего не сделаешь. Точка.
Силверлайт — проприетарная технология, в связи с этим абсолютно неинтересная. На хабре уже от флеша плюются, а флеш и тот текст на порядок шустрее браузеров рисует :)
Тормозит конкретно отрисовка текста. Спросить у браузера ширину сотни букв — и уже набегает полсекунды. Нарисовать те же сотню букв — в хроме займёт секунду, в фоксе все пять. Это надо фиксить разработчикам браузеров, изнутри js с этим ничего не сделаешь. Точка.
Силверлайт — проприетарная технология, в связи с этим абсолютно неинтересная. На хабре уже от флеша плюются, а флеш и тот текст на порядок шустрее браузеров рисует :)
Но на флэше я например никогда таких быстрых карт, как по ссылке выше, не видел. Да и на js не видел, до появления GPU-ускорения в IE9 и FF4.
Может рендерит буквы в кэш-буфер, и уже затем битмэпом их выводить? Здесь же не сто разных шрифтов используется.
Спрашивать ширину у браузера как я понимаю нужно только в случае полноценного рендера. Если просчитать всё это заранее на сервере, то и опрашивать ширину букв уже ведь и не нужно?
Сравнить с svg всё же было бы интересно.
Может рендерит буквы в кэш-буфер, и уже затем битмэпом их выводить? Здесь же не сто разных шрифтов используется.
Спрашивать ширину у браузера как я понимаю нужно только в случае полноценного рендера. Если просчитать всё это заранее на сервере, то и опрашивать ширину букв уже ведь и не нужно?
Сравнить с svg всё же было бы интересно.
Если сосчитать всё на сервере, то зачем нам вообще рендеринг на клиенте? Тут как раз вся соль в том, что можно нарисовать всё разными стилями.
Рисовать мелкие повёрнутые надписи картинками… ребята, которые делают виндовый Сафари, так и делают. Рекомендую в нём посмотреть osmosnimki.ru/kothic/text-rotate — там забавные артефакты местами :)
SVG — не сравнивал и не хочу, смысла в нём для карт ноль, разве что для печати.
А про скорость — вот, три дня прошло от первого тикета в Хромовскую багзиллу, и Kothic JS в последних билдах у меня уже отрисовывается мгновенно. Пруфскриншот.
Так что рекомендую попинать всех знакомых и незнакомых разработчиков браузеров в багзиллы, авось подтянутся и тоже ускорятся :)
Рисовать мелкие повёрнутые надписи картинками… ребята, которые делают виндовый Сафари, так и делают. Рекомендую в нём посмотреть 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'ам с исправлениями и доработками в области быстродействия.
А код библиотеки открыто лежит на гитхабе, github.com/kothic/kothic-js — мы всегда рады Pull Request'ам с исправлениями и доработками в области быстродействия.
Есть ответ поинтереснее:
canvas-text.googlecode.com/svn/trunk/examples/performance.html
Всё равно медленнее. Но, возможно, и придётся, если авторы браузеров будут продолжать косячить с отрисовкой наклонного текста и его антиалиасингом.
canvas-text.googlecode.com/svn/trunk/examples/performance.html
Всё равно медленнее. Но, возможно, и придётся, если авторы браузеров будут продолжать косячить с отрисовкой наклонного текста и его антиалиасингом.
Или, в качестве временного решения (пока браузеры затыкают дыры), flashcanvas? Если флеш быстрее рендерит текст. Он, правда, в оригинале только для IE, но, наверное, можно и в других браузерах завести.
Спустя столько лет стоит сказать о прогрессе:
maps.me (mapswithme) для мобильных стал чуть ли не самым известным в мире проектом с osm в основе
www.youtube.com/watch?v=lj4SS1NTqyY — появился www.mapbox.com/mapbox-gl-js/examples с webgl на клиенте
maps.me (mapswithme) для мобильных стал чуть ли не самым известным в мире проектом с osm в основе
www.youtube.com/watch?v=lj4SS1NTqyY — появился www.mapbox.com/mapbox-gl-js/examples с webgl на клиенте
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Kothic JS: рендерер OpenStreetMap, поддерживающий MapCSS/0.2, портировали на джаваскрипт, рисующий по холсту