HTML5 Canvas Map — реализация картографического движка

[bomj]

весьма шустро
есть ещё kothic.org/js

[Kotofey]

когда оптимизируем тайлы, должно стать еще шустрее
сейчас они весят 50-120Kb, а надо бы как минимум раза в два-три уменьшить

[dom1n1k]

Нет, это другое. Кothic — это именно Canvas-рендер, который по координатам генерит картинку прямо в браузере.
Т.е. сервер разгружается, но на клиенте мы получаем дикие тормоза и плюс пока ещё не совсем совершенное качество картинки.

А тут движок, который на канвас лишь кладет предварительно отрендеренные тайлы.
Это, безусловно, по-своему интересно… но практическую пользу я не очень уловил.

Вопрос к автору топика: в чем конкретный практический профит? Из статьи это неясно.

[Kotofey]

Самый главный профит — то что это canvas, который, в отличие от dom-элементов, дает широкий инструментарий и в перспективе можно делать много интересных интерактивных вещей, как-то: повороты, вращения, рисование и тп визуализации, при этом без безумных подтормаживаний.

Согласитесь, что надо двигаться в ногу со временем и переходить на новые технологии. Не зря же вон даже Adobe отказывается от flash в пользу html5.

Что же касаемо компании, в которой я работаю, то тут чисто корпоративная политика, предполагающая независимость и использование исключительно своих сервисов, так как даже у гугл-карт и яндекс-карт есть ограничения в их использовании.

[dom1n1k]

Соглашусь лишь частично.
Двигаться ногу со временем и переходить на новое только лишь потому что оно новое? Не думаю.
Поймите правильно, я совсем не против Canvas вообще — даже наоборот, сам активно интересуюсь этой темой — но в данном конкретном случае особой пользы не вижу.

Рисовать что-то поверх можно и на отдельном холсте, можно при помощи SVG… Ну вот разве что поворот карты — это да :) Хотя пока не знаю, зачем это может понадобиться.
И вот ещё я сейчас побродил по вашей карте с Файрбагом — тайлы как-то очень непонятно кэшируются. И кэшируются ли вообще…

[Kotofey]

Польза в данном конкретном случае в том, что на разработку было потрачено совсем немного времени и был задействован всего лишь один разработчик. При этом есть хорошие перспективы для дальнейшего развития, которые так же будут внедряться в кратчайшие сроки. Поставьте себя на место заказчика и эти факторы, уверен, сыграют решающую роль.

Никакого специального кода для кеширования нет. Зачем? Если мы начнем кешировать картинки, то никакой оперативной памяти не хватит же… Пусть уж это будет на «совести» браузера )

[dom1n1k]

Про стоимость разработки понял. Если компания хочет иметь полностью независимые решения… ну что ж, хозяин-барин.

Кэширование — нет-нет, я не имел в виду специальный код для этого. Речь именно о «совести браузера» :) Что при таком подходе она как-то странно и малопонятно работает.

[Kotofey]

Попробуйте погонять в chrome и посмотреть в его отладчике, там хорошо видно что таки кешируется.
Да и в firebug'e вроде все ок (ver 1.9.0b2).

[fedclud]

Побродил по карте, тайтлы не кэшируются и это плохо, при возврате на предыдущую позицию, даже если я сдигал совсем немного в сторону все заново перерисовывается, неужели еще и подгружается? Я считаю это серезным недостатком, так как это сильно снижает удобство пользования. Таск манагер хрома показывает использование памяти на около 150 метров. Врядли этот проект вменяемо будет работать на мобильных устройствах. Кешируйте! Пусть лучше все будет плавненько.

[Mourner]

К сожалению, на данный момент Canvas в таких случаях очень сильно проигрывает по быстродействию по сравнению с обычными DOM-элементами — в частности, поэтому такой подход я использовал в Leaflet. Повороты и вращения осуществляются и без канваса с помощью CSS3 Transforms, анимация — с помощью CSS3 Transitions (которые работают намного быстрее ручной перерисовки в канвасе). Canvas используется пока только там, где это выгодно (отрисовка векторных данных).

[Kotofey]

В случае с картами использование Canvas'a вполне оправдано. Так как в некоторых браузерах некоторые карты просто бессовестно тормозят.
К тому же, как я уже отмечал, у нас есть что оптимизировать дабы увеличить производительность.

[Kotofey]

посмотрел Кothic и соглашусь, что это совсем другой случай

[sindrom]

Интересно, почему canvas, а не SVG? Векторная графика лучше подходит для таких целей, как мне кажется.

[spmbt]

Векторная больше тормозит при большом количестве элементов. Это уже давно проверенный факт, поэтому классические движки остаются тайловыми (при малой детализации вектор обходит, с этим экспериментируют).

В реализации на Canvas — хороший опыт практической обкатки, в будущем позволит выявить достоинства и узкие места. Плата — неподдержка старых браузеров (хотя, возможно, вы реализуете простые тайлы для них). Можно узнать компанию, которая делает этот заслуживающий внимания эксперимент? (Можно в ЛС, я этим занимался как разработчик.)

[Kotofey]

Спасибо что уже ответили за меня )
Я бы еще добавил к минусам svg преемственность от xml и довольно ощутимо разнящиеся реализации в разных браузерах.

Плюс к этому выбор в пользу canvas'a пал потому-то у нас есть проект с использованием WebGL и еще на этапе выбора у нас уже существовали растровые тайлы.

По поводу названия компании ответил в ЛС.

[AHrEJI]

Возможно накрывает хабраэффектом, но у меня ооочень долго грузится.

Leaflet — мой выбор. Очень шустрая библиотека для отображения тайловых карт. Еще чуть-чуть и монструозный OpenLayers уйдет в небытие :)

[Kotofey]

Загрузка сервера 0.3%. Возможно вы просто находитесь далеко от нашего сервера.

Leaflet — все же немного не по теме. Это обычная карта с использованием dom-элементов.

[kirushik]

Вроде в доках заявлена поддержка канваса:
leaflet.cloudmade.com/reference.html#tilelayer-canvas

Used to create Canvas-based tile layers where tiles get drawn on the browser side. Extends TileLayer, implements ILayer interface.

Сам правда ещё не пробовал либу, спасибо Ахреджи за наводку!

[Mourner]

Канвас там пока что используется только как один из движков для отрисовки векторных данных (в дополнение к SVG) — один или другой вариант могут быть производительнее в зависимости от характера данных и браузера. А упомянутый выше класс — просто для удобства реализации кастомных слоёв, рисующих канвасными тайлами.

[Mourner]

Спасибо за упоминание Leaflet, стараемся :)

[cst]

Круто выглядит с тенями, как будто настоящая бумажная карта лежит.

[Kotofey]

Это не тени. Это рельеф )

[AterCattus]

Больше всего похоже на скан обычной карты из-за этих постоянных сладок и перепадов, не совпадающих с самой картой.

[AterCattus]

Не сразу понял, что имелось в виду под «рельефом».
Смотрится отлично :)

[shebanoff]

Нескромный вопрос: а почему вы выбрали именно jquery? Ну, и если прямо — то почему не мутулс? Решено исходя из поставленных задач, или потому что привычнее?

Спрашиваю потому, что сам недавно мигрировал в мутулс из jquery и нашел для себя много крутых плюшек. В частности для ситуаций, когда работа с DOM сведена к минимуму (как у вас) и нужно делать грамотное, приятное JS API.

[Kotofey]

Признаться да, jQuery был выбран именно потому что он привычнее. Хотя по Вашей наводке надо будет посмотреть мутулс. Глядишь и мигрируем )

[shebanoff]

Когда меня посадили на мутулс, я пришел в шок и совсем не думал, что буду в дальнейшем кому-то советовать этот фреймворк) Но потом понял — акценты в нем смещены на более низкий уровень, чем у jquery, работа с элементами — всего лишь частный случай. Появляется честное ООП, удобный функционал для работы со стандартными объектами и полная свобода его расширения. Сейчас используем mootools в связке с node.js, где вообще отсутствует объект window и прочие.

Пример:
var Animal = new Class({
initialize: function(age){
this.age = age;
}
});
var Cat = new Class({
Extends: Animal,
initialize: function(name, age){
this.parent(age); // calls initalize method of Animal class
this.name = name;
}
});
var myCat = new Cat('Micia', 20);
console.log(myCat.name); // 'Micia'.
console.log(myCat.age); // 20.


[Mourner]

Mootools — замечательный фреймворк, но к сожалению совершенно не подходит в качестве основых для других библиотек, т.к. в отличие от jQuery модифицирует нативные прототипы и добавляет кучу глобальных переменных в код, что может конфликтовать с другими библиотеками.

[Mourner]

Не совсем понятно, зачем вам строго завязываться на jQuery, если библиотека всё равно в основном работает с канвасом, а не DOM-элементами.

[Kotofey]

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

[shergin]

Точно, jQuery хорошо подходит для тех, кто мало что понимает в JS и хочет вставить в сайт пару свистелок, чтобы было по-современней. Когда же разрабатываются столь сложные штуки, эффективно использовать библиотеку которая только и делает что сглаживает шероховатости стандартного апи и проблемы несовместимости.

[shergin]

Может быть, имеет смысл при обработке операции drag-n-drop перемещать не тайлы в одном канвасе, а весь сам канвас, а после производить амнистию и оптимизацию.

[Kotofey]

Да, это Вы хорошо подметили. Я уже думал над тем, чтобы перемещать всю картинку уже сгенерированную в canvas'e, а полную перерисовку делать при необходимости удаления невидимых тайлов, добавлении новых, зуме и тому подобных ситуаций.
Будет задел к оптимизации.

[3ds]

Косяк карты или отрисовки?

[Kotofey]

косяк утилиты генерации тайлов
и таких моментов довольно много…
я уже отмечал, что это дело еще предстоит плотно оптимизировать

[Sannis]

У вас свой рендер тайлов? :)

[Kotofey]

Да, ниже немного подробнее о нем написано.

[Grox]

При хорошем канале Интернет не хватает предзагрузки для невидимых областей. Если клиент двигает карту по чуть-чуть, то 1 тайла, если резче, то нескольких тайлов. Тогда казалось бы, что вся карта уже есть. И соответственно делать прорисовку большей области и двигать канву, как выше написали.

[Kotofey]

> не хватает предзагрузки для невидимых областей

Тут я с вами не соглашусь. В самом простом случае тогда придется дополнительно подгружать 8 тайлов, а в реальных условиях много больше (> 15). Это практически в два раза повышает нагрузку на сервера и на браузер клиента. В перспективе, когда размер тайлов будет уменьшен в 2-3 раза, их подгрузка при перемещении будет происходить так же быстро как и у, например, яндекс-карт (они к слову предзагрузку тоже не делают, думаю по схожим соображениям).

[Grox]

Я говорю об удобстве пользователя, которого обычно не интересует нагрузка на сервер :) На браузер — готов поставить галочку «работать с предзагрузкой».

[Kotofey]

Занес в вишлист )

[ruASG]

Карта, как я понимаю, Геоцентр-Консалтинг и она очень старая с кучей ошибок. Даже если это просто для теста, лучше OSM.

[kashey]

Работает на удивление хорошо.
Но механизм плавного зуминга у вас просто фееричен :)

[markoffko]

Довольно шустро работает, но инструменты лучше пофиксить.

[Kotofey]

А что с ними не так? Нашли какой-то баг?

[markoffko]

Может так задумано конечно же, но как мне нарисовать два разных полигона например? Я рисую один полигон, выключаю инструмент, хочу нарисовать полигон в другом месте, но он продолжает рисовать предыдущий. Ну еще выключение инструментов довольно не интуитивное на мой взгляд.

[Kotofey]

Да, насчет выключения инструмента соглашусь, надо еще подумать над этим моментом.

По поводу рисования множества полигонов: возможно в будущем, сейчас они сделаны по большей части для демонстрации.

[mggtsnppr]

Еще бы тайтлы кэшировались, и было бы вообще замечательно!

[Zak]

Расскажите подробнее про утилиту генерации тайлов, где она живет, как прикручина к бэкэнду, какова ее производительность.
А кэширование тайлов на стороне сервера есть?
Почему тайлы PNG а не GIF, их размер 50-100kb у яндекса и гугла 10-20Kb.
Подгрузка тайлов происходит только после отпускания кнопки мыши, это недоработка или фича?

[Sannis]

Наверняка просто не прогоняют через pngcrush/optipng. В остальном с PNG только плюс: гифками гибрид не нарисовать.

[Kotofey]

Нет, наша утилита умеет сохранять в любом формате.
У нас есть проект, для которого нужен формат с альфа-каналом для отрисовки текста, поэтому для него в PNG генерировали. А чтобы не плодить сущностей на данном этапе разработки для canvas карты испульзуем те же самые тайлы.

[Kotofey]

> Расскажите подробнее про утилиту генерации тайлов, где она живет, как прикручина к бэкэнду, какова ее производительность.
А кэширование тайлов на стороне сервера есть?

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

> Почему тайлы PNG а не GIF, их размер 50-100kb у яндекса и гугла 10-20Kb.

Для теста решили сделать в PNG, после оптимизации конечно же будем менять формат.
Такой большой размер из-за, опять таки, формата и отображения рельефа.

> Подгрузка тайлов происходит только после отпускания кнопки мыши, это недоработка или фича?

Сейчас попробовал в Firefox, Chrome и Opera — везде подгрузка происходит во время нажатой кнопки мыши. Каким браузером пользуетесь? Возможно просто был лаг и не дождались подгрузки?

[Doberman]

Разыскивается человек, знающий HTML5, canvas, возможно Adobe EDGE. Для работы в офисе над созданием интерактивного контента. Кому интересно — стучите.

[Mourner]

Кстати говоря, уже есть библиотека для онлайн-карт, которая полностью построена на работе с канвасом — tile5.org. Посмотрите на досуге, может, почерпнёте что-нибудь полезное. :)