Карты и Google Maps

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

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

Строка распознавания 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 написал 9 месяцев назад

Карта Московского Метро. 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 лет,1 месяц назад

Пересчет изображений под разные картографические проекции в 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 написал 2 лет,6 месяцев назад

Звездное небо на 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 написал 2 лет,10 месяцев назад

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 написал 3 лет,7 месяцев назад

Звездное Небо на 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 написал 3 лет,8 месяцев назад

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

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

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

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

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

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

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

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

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

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

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

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

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

Карта Московского метро на 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 лет,1 месяц назад

Звездное небо на Canvas

В этой статье я хочу более подробно рассказать о примере Starry Sky (Звездное Небо), реализованном с помощью скриптов dbCartajs. Starry Sky включает в себя идеи других "звездных" проектов, которые были портированы на JavaScript. Рассмотрим их подробнее. Алгоритм формирования звездного неба был позаимствован из проекта Marble KDE (плагин stars), расчет положения планет построен на основе замечательной статьи шведского астронома Поля Шлетера, модель движения космических аппаратов SGP4/SDP4 предоставлена модулем satellite-js (проект в github), формулы солнечного терминатора (ночной зоны) взяты с астрономического форума. Вид орбит как эллипсов подсмотрен у Сelestia.

Пример имеет чисто технологическое назначение: вывести в заданное время точку положения космического аппарата при заданных орбитальных параметрах. В Canvas это получилось очень красиво и я решил подробнее написать об этом. Если нужно что-то поменять в выводе объектов, настройках не нужно перекомпилировать программу как Marble или Xephem (и соответственно устанавливать компилятор или среду разработки) достаточно иметь лишь браузер. В Mozilla или Chrome уже есть встроенные панели отладки, где можно посмотреть, скажем, массив точек траектории аппарата. Это гораздо удобнее чем "вытаскивать" их из C-й.

Управление

Вращение Земли происходит по клику в любой точке глобуса. В демо предусмотрен авторежим с ускорением времени (1 сек~15 минут, кнопка play рядом с датой). Анимацию с суточным периодом можно посмотреть здесь, простой скриншот приведен ниже.

Starry Sky

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

Идея

Решил написать пост о популярном нынче Canvas из HTML5 и о своем проекте dbCartajs, его использующем. Почему Canvas? Немного истории. Прежде для создания изображений, иллюстрирующих различные расчетные модели (например, вывод окружности по радиусу и центру в координатах, вывод многоугольника с количеством вершин N и площадью S, вывод окружности на сферу и т.д.), я и мои коллеги по работе в институте использовали различные элементы управления из разных сред разработки: PictureBox их VB6, QPainter и QCanvas из Qt, Canvas из Tk и, наконец, создание изображений по mapfile из MapServer. Позже после знакомства с возможностями HTML5 я решил перейти на использование Canvas и Web-разработку с JavaScript. Удобно - для отладки и разработки нужен лишь браузер. Собравшись с силами и вооружившись документацией от W3C, я переписал часть функционала компонентов, которые мы используем в работе, на JavaScript, оформив это в проект dbCartajs на GitHub. Код реализован в виде объекта dbCarta, чтобы использовать его как виджет на страницах без копирования частей исходного кода.

Скриншот виджета с dbCarta
Виджет с dbCarta.

Собственно идейно dbCartajs портирован из проекта dbCarta на googlecode, реализованном на Python и Tkinter.

Как это работает

dbCartajs использует Canvas для вывода объектов по координатам (долгота, широта в градусах) или пойнтам (points). В проект включена библиотека Proj4js, реализующая пересчеты картографических проекций. Из нее на использование настроены несколько проекций - это сферические nsper, ortho, laea и меркатор (как у популярного Google Maps - Google Mercator). По умолчанию используется холст с соотношением сторон ширина-высота 2:1, что соответствует плоской проекции longlat из Proj4js. Если proj4js-combined.js подгружен, то доступны другие проекции через интерфейсы changeProject или initProj объекта dbCarta.

Конечно, не все возможности Canvas реализованы в dbCartajs, но некоторым я постарался уделить внимание. Первое, это шрифты. При масштабировании они не меняются. Второе, это использование метода isPointInPath, позволяющего реализовать аналог использования элементов MAP, AREA и IMG. И третье, это возможность совмещения объектов из разных проекций. В демо StarrySky для вывода границ Земли, контуров материков используется сферическая проекция nsper, для вывода звезд, орбит космических аппаратов - плоская проекция longlat. Для смены проекций используются методы initProj (с указанием параметров проекции для Proj4js) или changeProject (без параметров).

Скриншот с демо StarrySky
Совмещение проекций в StarrySky.

Про управление

Перемещение по карте доступно по клику (по клику центрируется точка в пределах карты). Масштабирование карты осуществляется через интерфейс scaleCarta или по кнопкам +/-, расположенным справа. В сферических проекциях вращение глобуса осуществляется через интерфейс initProj.

Где посмотреть

Примеры проекта можно посмотреть на сaйте dbcartajs.appspot.com. Исходники доступны в GiHub http://github.com/egaxegax/dbCartajs.

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

Заметки, отзывы, планы проекта карты dbCartajs

Идея проекта создать инструмент отображения географических объектов (имеющих координаты), который можно было бы использовать на любых платформах для отладки и разработки более сложных геоинформационных систем.

Демо и исходники доступны на dbcartajs.appspot.com.

dbCartajs для рисования использует объект Canvas, который доступен в новых версиях браузеров, поддерживающих разметку HTML5.

Для пересчета координат из одной проекции в другую используется код Proj4js. В версии 1.0 доступны следующие проекции:

  • merc (Меркатор)
  • ortho (Ортографическая)
  • laea (Азимутальная проекция Ламберта)

Проекции пересчитываются из плоских декартовых координат longlat. Если скрипты Proj4js не подключены доступна только плоская проекция longlat.

Скриншот с dbcartajs.appspot.com

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

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