Используем HTML5 Canvas

Карты и Google Maps

Очень интересный сайт с тепловой картой цен на недвижимость Москвы и Санкт-Петербурга https://квартиры-домики.рф/карта-цен

guru написал 9 месяцев,1 неделя назад

Строка распознавания User-Agent браузера

iPad 3G

Mozilla/5.0 (iPad; CPU OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3

Параметр в about:config для изменения general.useragent.override

guru написал 1 год,3 месяцев назад

Карта Московского Метро. SVG-версия

Продолжаю тему разработки динамической векторной (по координатам) карты для браузера dbcartajs. В новой версии (v2) я перевел отрисовку объектов с канваса на SVG. И переделал несколько примеров, в частности карту метро Москвы. В своем посте про канвасную версию карты я сравнивал ее с svg-версией из Википедии, сделав акцент на скорости загрузки, которая у канваса оказалась выше. Но воспроизведя карту через svg-обработчик в новой версии проекта, я понял, что скорость загрузки, пожалуй, единственное преимущество канваса перед SVG.

mosmetro-svg

Во-первых, потребовалось меньшее количество кода для создания на svg.

Во-вторых, простота и удобство создания кода. У svg логика строится на отдельных объектах, их свойствах и методах. Например, чтобы определить объект под курсором, нужно создать обработчик события для данного объекта (circle для станций метро), в котором можно поменять его свойства — цвет, масштаб (на картинке для значка станции «Ходынское поле» применен метод scale) и др. У канваса логика отрисовки построена на перерисовке всей карты. И для выделения отдельных объектов нужно перерисовывать и масштабировать всю карту. Кроме этого, канвас не хранит отрисованные объекты в памяти, их нужно отдельно сохранять в переменных (в dbcartajs в объекте mflood) и самому следить за ними (добавлять, удалять). SVG-изображение хранит отрисованные объекты в DOM-модели и к ним можно обращаться напрямую.

В-третьих, возможностей в svg намного больше, чем в канвасе, например, анимация, фильтры для изображений.

В-четвертых, совместимость с браузерами. У SVG она выше. C SVG я проблем не заметил. В канвасе некоторые свойства в Firefox 3.x и новых версиях работают по разному (например setDashLine, isPointInPath). Internet Explorer до 9 версии и Safari до 4 версии канвас вообще не поддерживали.

И svg, и канвас могут манипулировать готовыми изображениями (png, jpeg). Правда, только канвас может обращаться к нему попиксельно. И это, как и скорость отрисовки, пожалуй, его главная особенность.

В общем, кому интересно, смотрите примеры на egaxegax.github.io.

egax написал 2 лет,7 месяцев назад

Пересчет изображений под разные картографические проекции в webGL

В посте на своем блоге "gdal_translate и gdalwarp для перепроицирования изображений" описывался процесс получения картинок под разные проекции с помощью утилит GDAL. Полученные изображения я использовал как подложку для карт в примерах проекта dbCartajs. Позже, работая над портированием канвасной версии своего планетария на webGL, описанной в статье "Звездное небо на webGL с использованием three.js" на Хабре, у меня возникла мысль со временем перенести не только глобус, но и плоские на карты на webGL, используя вместо фона текстуры.

buttefly.png

Мысль так и оставалась мыслью пока я не познакомился с очень интересным примером отображения картинки в разных проекциях на webGL "Spinnable World Maps" от Марко Тарини. Этот пример показал коллега по работе еще год назад, но заинтересовался я им недавно. Код примера интересен еще и оригинальными комментариями автора на итальянском, например punto centrale или mostra/nasconde griglia.

Код Тарини оказался насыщен вычислениями всего чего угодно: размеров экрана, координат курсора мыши в пикселах и треугольниках, координат геометрий проекций, матриц поворота геометрий. При этом полностью картинка с меридианами и измененными цветами формируется в шейдерах. Мне захотелось отрисовать что-нибудь на этой карте, скажем границы стран. Но для этого пришлось бы вставлять код вычислений пикселов линий в код шейдера как с случае с меридианами, а это уже слишком. Поэтому возникла мысль совместить изображение карты в канвасе 2d с перепроицированием через webGL и формулы Тарини. То есть использовать канвас как источник текстуры для наложения на геометрию. В исходниках Three.js встречаются такие примеры.

Из кода Spinnable Maps я взял в основном вычислительные формулы, а из примеров dbcartajs - логику создания карты по слоям, пересчет координат мыши в пиксели, таймер. Результат слияния двух проектов можно посмотреть здесь.

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

egax написал 3 лет назад

Звездное небо на webGL с использованием three.js

В посте про "Звездное небо на Canvas" я уже описывал проект, где при помощи JavaScript на канвасе 2d формируется изображение глобуса Земли на фоне звезд, планет и орбит космических аппаратов. Для создания трехмерной картины звездного неба на плоскости я использовал формулы перевода трехмерных координат X, Y, Z отображаемых объектов: звезды, планеты, космические аппараты (КА), - в плоские декартовые координаты X, Y. Основную часть этих формул я взял из проекта Marble для KDE. Портированный с C++ на JavaScript код я сохранил в файле starry.js.

sky3d

Уже тогда я знал, что для вывода трехмерных объектов у канваса есть специальный движок webGL. Но для того, чтобы им воспользоваться нужно было близко познакомиться с этой технологией, а самое главное - найти качественные и понятные примеры его реализации. Те примеры, которые я смотрел, например, khronos с библиотеками J3DI0000.js и J3DIMath.js от Apple для работы с webGL, меня не вдохновляли: код громоздкий и сложный. Все изменилось, когда я познакомился с проектом three.js. Простота написания кода и огромное количество примеров (работающих в оффлайне) в нем удивили и порадовали одновременно.

Уже почти закончив свою версию звездного неба в 3d, я познакомился с еще одним очень интересным проектом на apoapys.com. Автор с помощью скриптов three.js воспроизводит объекты Солнечной Системы с эффектами, как в самой Celesia - эталонным для многих звездых проектов астрономическом атласе с открытым кодом. Из проекта apoapsys.com я позаимствовал координаты созвездий (файл sfa_constellation_lines.js), картинки для текстур звезд, облаков и космических аппаратов.

Свой код трехмерного неба, как и в плоской версии, я постарался сделать максимально простым и компактным, чтобы в нем легко можно было разобраться. Кроме того, я решил не использовать метод window.requestAnimationFrame, как в большинстве примеров из three.js и apoapsys.com, поскольку его использование сильно нагружает браузер и процессор. Для этого я использовал код из OrbitControls.js из three.js для управления камерой. Посмотреть трехмерную версию неба можно все там же на сайте проекта dbcartajs.

Что нового

В отличие от плоской версии неба здесь объекты Солнечной Системы показаны с учетом их реальных размеров и расстояний до них в км.

Для расчета орбит и положений КА используется код из satellite.js, как и в плоской версии. Данные о положении КА (TLE) обновлены с celestrak.com. В tledata.js добавил данные о группировках GLONASS, GPS, ISS (космические станции в т.ч. МКС).

Управление

Управлять камерой можно мышью - поворот правой, смещение левой кнопкой и масштабирование колесиком, ма, стрелками на клавиатуре или через touch-интерфейс на сенсорных экранах. Собственно все события управления обрабатывает код из OrbitControls.js.

Что еще

В планах научиться фокусировать в центре сцены другие объекты, кроме Земли, также добавить новые объекты - астероиды, кометы.

guru написал 3 лет,4 месяцев назад

gdal_translate и gdalwarp для перепроицирования изображений

В составе проекта GDAL есть полезные утилиты для работы с изображениями через консоль

  • gdal_translate
  • gdalwarp

В среде Windows они доступны, например, в сборке программ MS4W.

Для своего проекта dbCartajs мне потребовались изображения для разных проекций. Изображения я хочу вывести на канвас вместе с векторными данными. Для этого цели из программы Orbitron я позаимствовал картинку с плоской картой Земли в небольшом разрешении.

worldmap.jpg

Она отлично подходит для экспериментов, но как быть с другими проекциями - меркатор, сфера? Я нашел несколько картинок в разных проекциях, но все они оказались в разных цветовых сочетаниях и разрешениях, поэтому решил попробовать самостоятельно преобразовать исходную картинку с помощью утилит gdal, используя их описание и примеры.

Сначала, преобразуем исходную картинку в формат tiff - родной формат gdal - и задаем координаты привязки изображения.

gdal_translate -of Gtiff -co "TFW=YES" -a_ullr -180 90 180 -90 worldmap.png worldmap.tif

Для проекции Меркатора нужно ограничить размеры на полюсах (80-85 градусов).

gdal_translate -of Gtiff -projwin -180 84 180 -84 worldmap.tif worldmap-1.tif

Теперь формируем изображение в проекции Меркатора в формате tiff.

gdalwarp -s_srs EPSG:4326 -t_srs EPSG:3857 worldmap-1.tif worldmap-merc.tif

Браузер не работают с tiff, поэтому переводим его в jpeg.

gdal_translate -of JPEG worldmap-merc.tif worldmap-merc.jpg

Вот результат

worldmap-merc.jpg

Аналогично получаем картинки для других проекций, например ortho.

gdalwarp -s_srs EPSG:4326 -t_srs "+proj=ortho +lon_0=0 +lat_0=0" worldmap-1.tif worldmap-ortho.tif
gdal_translate -of JPEG worldmap-ortho.tif worldmap-ortho.jpg

worldmap-ortho.jpg

egax написал 4 лет,1 месяц назад

Звездное Небо на Canvas. Созвездия

Продолжение темы, начатой в предыдущей статье. Идеей к ее развитию послужило прочтение статьи на Хабре «LibCanvas: На пути к звёздам», где описывается реализация планетария на Canvas с выводом созвездий и планет в азимутальной системе координат. В посте автор дает ссылку на базу данных звезд и созвездий, которой я любезно воспользовался. Файл содержит координаты прямого восхождения (Right Ascension, в часах) и склонения (Declination, в градусах) звезд, точек созвездий и их названий. Я перевел их в радианы и сохранил в файл constellations.js для своего "звездного" проекта Starry Sky.

Starry Sky

Разница

Сравнив результаты я заметил, что в оригинальном планетарии все выглядит зеркально наоборот. То есть звезды выведены на внешнюю сторону сферы, а у меня - на внутреннюю. Я решил воспользоваться другим планетарием как эталоном. Для этой цели выбрал проект "Звезды" на Картах@Mail.ru. Оказалось, что правильный вариант отображения - на внутренней стороне звездной сферы. Это видно на рисунке (время 2/3/2014 17:2:0, точка наблюдения - д 37,ш 55 Москва).

planets-diff

Что нового

Помимо созвездий в своем планетарии Starry Sky я добавил вывод информации по звездам, планетам, точкам космических аппаратов при наведении мышью на них (активные области). Для звезд выводится номер из каталога Henry Draper'a (HD).

Кроме звезд и планет на карте добавлены три космических аппарата из группировки ГЛОНАСС. Данные взяты с ресурса celestrak.com и сохранены в файле tledata.js. Всего в группировке 28 аппаратов, но для наглядности выведены 3 первых по списку. Для расчета орбит и положений КА я использовал модуль satellite-js.

Изменение масштаба карты привязано к изменению высоты над поверхностью Земли. Размер звездной сферы зафиксирован поскольку в противном случае теряется реалистичность изображения, кода края небесной сферы становятся меньше краев карты. В идеале хотелось бы создать эффект бесконечной Вселенной как в Celestia с удалением и приближением звезд и планет.

Включать или выключать слои (группы объектов) теперь можно через отдельный список layers...

  • cntlines - линии созвездий,
  • cntpos - названия созвездий,
  • star - звезды,
  • sun Солнце,
  • moon - Луна,
  • planet - планеты,
  • earth - Земля,
  • sattrac - орбиты КА,
  • satsurface - подспутниковые точки КА,
  • sattrace - проекции эфемерид КА на Землю,
  • satsector - поля зрений КА (18 градусов),
  • satpos - точка КА на орбите,
  • terminator - ночная зона.

Результаты

Главной проблемой планетария с astrokot.ru, как пишет автор, является медлительность программы. Я замерил времена в профайлере Firefox 19. В Planetarium - 1168 ms, в Starry - 608 ms. Действительно медленно, в Starry объектов больше, а время в 2 раза меньше. Видимо в циклах используются лишние вычисления, которые замедляют вывод.

Исследуя звездные алгоритмы для своего проекта, я пытаюсь максимально упрощать вычисления и код, чтобы они были понятны и наглядны. Изучая коды других проектов (Celestia, Stellarium, libastro), особенно на WebGL, очень трудно разобраться, какие используются формулы и как они работают. Для себя я выделил пока два проекта - libnova и Marble - код которых понятен и максимально пригоден для портирования в другие среды, например в JS.

egax написал 4 лет,2 месяцев назад

Теперь примеры и статьи доступны также в блоге на dbcartajs.blogspot.ru.

egax написал 4 лет,5 месяцев назад

Схема пригородного движения ж/д сообщения Москвы и МО

Ещё одна схема движения железнодорожного транспорта с использованием возможностей Canvas и dbCartajs. mosrails

В оригинале она называется Moscow Underground and Commuter Rail Map, её можно видеть в тамбурах подмосковных электричек. Изначально я хотел реализовать именно эту карту в качестве очередного демо к проекту dbCartajs, но в Сети нашёл лишь копию карты, снятую на мобильный телефон с неважным качеством. Зато с легкостью нашел с десяток схем Московского метро. Самая красивая, на мой взгляд, в Википедии, самая неказистая оказалась почему-то у Яндекса с его-то возможностями. Собственно SVG-вариант из Википедии я и переделал под Canvas, о чем писал в предыдущей статье.

Спустя некоторое время я нашел на форумах два варианта схем в формате JPEG и решил реализовать первоначальную задумку. Ссылки на источники я потерял, поэтому еще раз выложил эти картинки в оригинале, если кому интересно, здесь: mosrailmap и vkontur.

Онлайн-версию моей версии карты можно увидеть на dbcartajs.appspot.com. Из-за ограничений на количество просмотров на бесплатном хостинге сайт может быть заблокирован, поэтому я советую брать и смотреть проект с github.

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

Для тех, кто впервые видит виджет dbCarta напомню про управление картой:

  • Левый клик центрирует точку на карте в плоских проекциях, поворачивает глобус в сферических проекциях;
  • Кнопки масштаба [+|-] расположены на правой стороне карты.

Кроме того, навигация возможна по списку станций.

В общем, как говорится, жителям Подольска, Люберец и Луховиц добро пожаловать, москвичам просьба не беспокоить.

egax написал 4 лет,6 месяцев назад

Карта Московского метро на Canvas

Идея попробовать нарисовать карту появилась после просмотра карты метро в Википедии в формате SVG. В Firefox она открывается долго, к тому же при разрешении 1600x1300 она не вмещается в экран, а скроллинг по ней работает тоже очень долго. Стало интересно, а в Canvas она тоже будет тормозить? Решил нарисовать свою версию карты метро в качестве очередного демо для проекта dbCartajs.

mosmetro.png

Canvas поддерживает далеко не все возможности, которые есть в SVG. Например, как выяснилось, он частично поддерживает рисование пунктирных линий: метод setDashLine поддерживает только Chrome, а Firefox использует свое свойство mozDash. Зато Canvas поддерживает Bezier Curve для отрисовки плавных изгибов. Я добавил возможность использования метода bezierCurveTo в dbCartajs, если в тройке координат третьим параметром идет символ 'Q', например, для объекта с координатами [[1,1,'Q'],[2,2,'Q'],[3,3,'Q'],[4,4,'Q'],[5,5,'Q'],[6,6,'Q']] метод bezierCurveTo будет вызван 2 раза. Также добавил проверку для поддержки Dash Line, который можно задать как свойство dash в mopt.

Пиксельные координаты линий, станций, каналов, рек, ж/д путей переведены в градусы с долготой и широтой. Новые координаты объектов сохранены в файле mosmetro.js.

Из станций сформирован выпадающий список. Выбор станции в нем центрирует ее на карте.

В целом получается, что в Canvas карта отрисовывается намного быстрее, чем в SVG. Особенно это заметно на планшете.

egax написал 4 лет,8 месяцев назад

Стр. 1 из 2 Далее ›

Войдите, чтобы оставлять сообщения.