Визуализируй это
Несколько лет назад я делал сайт о рыбалке и публиковал на нём карту окресностей города, отмечая интересные места. Я так увлёкся картами, что и сегодня занимаюсь дизайном геосервисов, а на досуге экспериментирую с картографическими визуализациями. Недавно я визуализировал статистику работы московского велопроката, а ранее опубликовал высотную модель города в виде разноцветной сетки улиц.
Это здорово, когда большие массивы данных об окружающем нас мире становятся визуальными, осязаемыми. Привлекает меня в этом не множество разноцветных линий или точек на тёмном фоне, а возможность наглядно показать и рассказать окружающим интересную историю, сделать эти данные полезными для людей. Мне хочется, чтобы увлечённых этой темой людей становилось больше — делиться знаниями друг с другом, обсуждать идеи.
Дома в центре Москвы разного цвета в зависимости от площади здания.
Данные: © Участники OpenStreetMap
О дизайне в картографии я уже рассказывали ещё буду рассказывать, ведь об этом можно рассказать много интересного. В этой истории, речь пойдёт не про традиционные карты.
Я задумал собрать что знаю про картографические визуализации и рассказать об этом. В итоге, у меня получился онлайн-курс «Визуализация геоданных» — серия мини-лекций об общих принципах и инструментах для работы с геоданными. К каждой части я собрал ссылки на дополнительные материалы и примеры рабочих файлов, чтобы можно было погрузиться в детали и попробовать что-то сделать самостоятельно. Этот пост собран из материалов курса.
На самом деле, нет принципиальной разницы между обычными бумажными картами и новомодными картографическими визуализациями — принцип любой карты: наглядное представление наших знаний о реальном мире.
Я бы выделил несколько характерных компонент хорошей картографической визуализации:
Соединяя хорошо подобранные данные, технологии и дизайн можно сделать много интересных визуализаций. Покажу несколько для примера:
Один из ярких примеров хорошей истории с геоданными — визуализация всех голландских зданий по годам постройки. Помимо зрелищности, на этой карте очень наглядно рассказывается история — как застраивались города.
Все здания в Нидерландах стилизованные по годам постройки
Помимо визуализации нидерландских зданий есть похожие проекты: Бруклин, Нью-Йорк, Москвa.
Ребята из MapBox визуализировали 1 500 000 треков RunKeeper — пробежки, прогулки, поездки на велосипедах. Хорошо видны популярные места для прогулок. Я даже нашёл веломаршруты из дома на работу летом.
1 500 000 треков RunKeeper Данные карты: © Участники OpenStreetMap
Хороший пример в котором соеденились данные, технологии и дизайн — Watercolor Maps от Stamen Design, калифорнийской дизайн-студии, которая давно и очень успешно занимается картографическими визуализациями. В случае с этой картой можно с уверенностью утверждать, что получился великолепный арт-объект.
© Watercolor Maps от Stamen. Данные карты: © Участники OpenStreetMap
Геоданные
Ни одна карта не может быть картой, если она не содержит данных. Данные получают приставку «гео» в тот момент, когда у информации появляется привязка к местности и её можно отобразить на карте. Обычно привязку объекта к местности осуществляют с помощью географических координат — долготы и широты, а там, где требуется трёхмерное представление, указывают ещё и высоту.
Геоданные разделяют на два основных типа: растровые и векторные.
Растровые геоданные, как нетрудно догадаться, это обычные растровые изображения с геопривязкой. Наиболее знакомый всем пример растровых геоданных — спутниковые снимки.
«Облачные улицы» на Чёрном море, снимок 8 января 2015 года © NASA Earth Observatory
Помимо спутниковых снимков, растр используется для цифровых моделей рельефа, где каждый пиксель изображения содержит информацию о высоте над уровнем моря в этой точке местности. Для лучшей узнаваемости частей города, я дополнил картинку сеткой основных улиц.
Высотная модель Москвы © U.S. Geological Survey, SRTM30, данные карты © Участники OpenStreetMap
Растровые данные могут быть и не статичными картинками, технологии позволяют встраивать видео в интерактивную карту.
Векторные геоданные описываются набором или последовательностью координат, геометрией и атрибутивными значениями. Есть три основных типа векторных данных:
Помимо типа геометрии и расположения не менее важна атрибутивная информация. В векторных данных каждый объект может содержать дополнительную атрибутивную информацию. Используя эти атрибуты можно делать выборки объектов и применять к ним различные стилевые правила. На примере слоя дорог из OpenStreetMap: по атрибуту «type» можно выбрать дороги со значением соответствующему «primary» и выделить их на карте особым стилем.
Пример слоя дорог, по значению атрибута «type» выделены главные улицы. Данные карты © Участники OpenStreetMap
Для удобства работы с атрибутами в большинстве инструментов есть возможность просматривать данные в виде таблицы. К слову сказать, атрибуты могут заполняться заранее, а могут и вычисляться в зависимости от каких-либо параметров объекта. Картинка обложки к этому посту — здания из OpenStreetMap в центре Москвы, цвет которых зависит от площади дома.
Для векторных геоданных было разработано большое число разнообразных форматов, расскажу о наиболее популярных:
Инструменты
Тема картографии только кажется специфичной, сложной и запутанной, сейчас всё больше и больше различных технологий и инструментов для «бытовой картографии» становятся доступными для обычным пользователям. Попробую дать краткий обзор того, чем часто пользуюсь сам.
QuantumGIS
Quantum GIS (сокращённо QGIS)— настоящая ГИС в классическом понимании. Продукт кроссплатформенный c открытым исходным кодом и является прекрасной альтернативой дорогостоящим ГИС-пакетам.
Работая с картографией, QGIS стал для меня незаменимым инструментом для работы с геоданными. В первую очередь это возможности просмотра, редактирования, импорта и экспорта различных форматов, а также возможности анализа и работы с выборками объектов. Например, мне часто требуется отфильтровать объекты по какому-либо признаку или выбрать их в какой-либо конкретной области.
Quantum GIS 2.6.1: Слой зданий © OpenStreetMap c категориями по площади, просмотр атрибутов объекта.
Кроме этого у QGIS есть возможности стилизации карты, экспорта изображения карты для печати и публикации в интернете. У Квантума большое сообщество разработчиков, заинтересованных в развитии проекта, и на сегодняшний день разработано большое количество плагинов, которые значительно расширяют функциональные возможности программы.
CartoDB
CartoDB — онлайн сервис работы с вашими геоданными, по сути хостинг геоданных с возможностями визуализации и публикации ваших же данных. Основная схема работы с сервисом такая: требуется загрузить данные, настроить их отображение и уже можно использовать готовую визуализацию — опубликовать ссылку на проект или разместить карту на сайте.
Настройка визуализации землетрясений в CartoDB
В скринкасте про CartoDB я показал как можно за несколько минут создать анимированную визуализацию землетрясений (случившихся за 30 дней, по данным USGS). У CartoDB очень удобно всё сделано для того, чтобы пользователь с любым уровнем подготовки смог бы разобраться с сервисом, а для тех, кому требуется помощь ребята стартовали специальный сайт The Map Academy на котором публикуют примеры и скринкасты, обучающие работе с сервисом, а в блоге публикуется лучшая карта недели созданная с помощью этого сервиса. Для более продвинутых возможностей у CartoDB есть API.
TileMill
На самом деле, компания MapBox, которая разработала TileMill* за эти пару лет уже убежала далеко вперёд: для кастомизации карт выпустили более функциональный продукт Design Studio, онлайн-сервис тоже имеет богатые возможности работы с геоданными, а для разработчиков предлагается широкий спектр API. В своём блоге команда регулярно публикует впечатляющие примеры визуализаций.
MapBox как и CartoDB позволяет хранить ваши геоданные в облаке и публиковать их на различных платформах. Основное отличие: CartoDB позволяет стилизовать и отображать их поверх уже какой-либо готовой карты, а в сервисах MapBox можно кастомизировать и карту, и объекты, которые хотелось бы на ней отобразить. При этом, в CartoDB можно подключить тайлы карты, подготовленной в MapBox.
Основная идея стилизации карт в TileMill заключается в следующем: вы добавляете данные по слоям на карту, и можете стилизовать настроить стиль отображения слоя с помощью CartoCSS — языка настройки внешнего вида, очень похожего на CSS. Картинки в посте про типы данных, или картинка для обложки как раз готовились в TileMill, и если один раз разобраться и понять принцип, делается это удобно, быстро и легко.
MapBox TileMill
Подготовленную карту можно экспортировать или как статичную картинку, или опубликовать в облачное хранилище для дальнейшего использования карты в интернете или на мобильных устройствах. Хранение данных в MapBox — платный сервис по подписке, при этом есть бесплатный тарифный план, которого хватает для знакомства с базовыми возможностями сервиса.
* — пользователям MacOS 10.10 Yosemite нужно скачивать dev-версию
API Яндекс.Карт
API Карт от Яндекса — невероятно богат на различные возможности карты. Для первого знакомства с JavaScript API рекомендую посмотреть на примеры из «Песочницы» — тут можно довольно быстро разобраться как добавить интерактивную карту на страницу с различными параметрами, настроить поведение карты или же добавить различные объекты.
В скринкасте про API я скачал информацию о станциях велопроката в CSV формате, сконвертировал с помощью QGIS эти данные в GeoJSON и далее визуализировал их с помощью API Яндекс.Карт несколькими способами:
Кластеризация пунктов велопроката
Кластеризацию и рисование кругов я использовал в эксперименте с визуализацией общественных туалетов — круги мне очень пригодились показать 5-минутные радиусы, а модуль тепловых карт я использовал в проекте статистки работы московского велопроката.
Тепловая карта в проекте статистики московских Велобайков
Это, конечно же, далеко не все возможности API. При желании можно собрать на основе API Карт достаточно интересный интерактивный проект. Найти интересные примеры визуализаций можно в блоге, клубе разработчиков, «песочнице» или в документации.
Тема картографии бесконечна, и чем больше я погружаюсь в неё, тем более безграничной мне кажется эта картографическая вселенная. Особо внимательные читатели наверняка заметили, что рассказ получился про данные и про технологии, а про дизайн в этой истории сказано мало. В это приключение отправимся позже — пока что я собираю материалы по теме, структурирую и осмысляю собранное.
Итак, самые важные ссылки, для дальнейшего погружения в тему визуализации геоданных.
Ссылки и рабочие файлы для примеров: github.com/minikarma/geotalk
Для обсуждения темы я стартовал группу в Фейсбуке — «Бытовая картография». Очень здорово будет найти единомышленников и обсуждать подобные темы там, делиться экспериментами и опытом.
Планирую продолжить пополнять материалы по мере возможности и буду рад дополнениям и пожеланиям.
Ссылки
Подготавливая информацию к курсу, я насобирал некоторый набор ссылок для самостоятельного изучения. Делюсь и с вами. Будет здорово, если поделитесь в коментариях чем-нибудь интересным со мной.
Как можно управлять интерактивной картой
Смена одной карты на другую доступна только в режимах внешнего вида «Карта FullHD» и «Компакт».
В публичной части наведите указатель на область карты. Всплывет кнопка «Редактировать Карту как html».
В административной – найдите кнопку «Редактировать» у поля «Настройки карты» в Аспро: Digital → Настройки → Разделы.
Эти кнопки вызывают редактор включаемой области. В редакторе вы можете установить карту Google или Яндекс. Действия по добавлению и настройке компонентов аналогичны для карт обоих сервисов.
Рассмотрим замену на примере добавления карты Google.
Удалите компонент «Яндекс.Карты» через меню, вызываемое правой кнопкой мыши.
Вид после удаления:
Захватите справа из раскрывающегося списка Контент → Google Maps компонент «Google: настраиваемая карта» и перетащите его на то место, где была карта от Яндекс.
При добавлении нового компонента откроется окно с его параметрами. Можете настроить компонент сразу или позже. Во втором случае просто закройте окно. Для сохранения изменений окно редактора включаемой области закрывайте кнопкой «Сохранить».
В окне настройки параметров компонента вы можете изменить ширину и высоту карты, настроить стартовый вид. Здесь же есть дополнительные настройки элементов управления.
В зависимости от выбранного сервиса параметры настроек будут отличаться.
Стартовый тип карты
изменение масштаба колесом мыши
изменение масштаба колесом мыши
изменение масштаба двойным щелчком мыши
изменение масштаба двойным щелчком мыши
управление с клавиатуры
изменение масштаба правой кнопкой мыши
Для активации нескольких настроек, делайте выбор с зажатой клавишей «Ctrl».
При выборе сервиса на ваше решение может повлиять дополнительный функционал Google Maps. Посетитель может перетащить изображение человечка
к зданию офиса и рассмотреть вход.
Актуальность фотографий зависит от сервиса Google Maps.
Чтобы отметить местоположение офиса, в редакторе включаемой области нажмите правой кнопкой мыши на компонент карты, которая у вас установлена. Выберите «Параметры компонента». Или вы можете дважды щелкнуть левой кнопкой мыши по компоненту.
В новом окне найдите «Данные выводимые на карте» и нажмите «Изменить».
Чтобы добавить новую точку, снимите галочку «Зафиксировать». В поле поиска адреса введите полный адрес с указанием города. Также вы можете найти местоположение офиса вручную, используя стандартные элементы и способы управления картой («+», «-», колесико мыши и перетаскивание левой кнопкой мыши).
Нажмите справа на элемент управления «Добавить точки». В теле карты наведите указатель на здание и кликните по нему дважды. Будет установлена отметка с приглашением ввести описание.
После ввода описания нажмите «Закончить», чтобы добавить новую точку в список. Установите галочку «Зафиксировать». Теперь если вы переместитесь на карте и захотите быстро вернуться к зафиксированной точке, нажмите «Восстановить», и карта вернется в положение, при котором была активирована галочка «Зафиксировать».
В режимах «Филиалы», «Филиалы (лайт)» и «С выбором региона» точки устанавливаются через карточки.
Управление разделами страницы
Управление разделами стандартно для платформы 1С-Битрикс. Полное управление разделами доступно только через административную часть. В публичной части доступны функции удаления и изменения.
Чтобы добавить новый регион в список, в Центре управления перейдите во вкладку «Контент». Выберите Контент (aspro.digital) ⟶ Контакты. Нажмите кнопку «Добавить раздел».
В редакторе введите название области.
Кнопка «Гамбургер» позволяет удалить или изменить раздел.
Так как разделы отображаются в режимах внешнего вида «Филиалы», «Филиалы (лайт)», «С выбором региона», редактирование разделов в публичной части доступно только в них.
В режиме правки на странице «Контакты» наведите указатель на название редактируемого раздела. Всплывает меню с кнопками управления «Изменить раздел», «Удалить раздел».
Как можно управлять интерактивной картой
Управлять интерактивной картой вы можете как в админке, так и в публичной части сайта. В админке элементы управления находятся Centino → Настройки → Разделы → Настройки карты.
Чтобы вызвать элементы управления в публичной части сайта, переключитесь в режим правки.
Наведите указатель на карту и выберите пункт «Редактировать Map как html»:
В открывшемся окне дважды кликните по кнопке «Яндекс.Карты: настраиваемая карта»:
Откроются «Параметры компонента»:
В основных параметрах доступно 5 тип карт:
§3.9. Геоинформационные системы в Интернете
Содержание урока
Геоинформационные системы в Интернете
Геоинформационные системы в Интернете
Географические информационные системы (ГИС). Геоинформационные системы предназначены для сбора, хранения, анализа и графической визуализации географических данных. Геоинформационные системы включают растровые или векторные карты, а также данные о географических объектах, хранящиеся в базах данных. Таким образом, ГИС позволяют пользователям искать, анализировать и редактировать цифровые карты, а также дополнительную информацию об объектах (например, адрес здания, высоту объекта над уровнем моря и т. д.).
Интерактивные карты в Интернете. В Интернете можно найти интерактивные карты мира, стран и городов. Для нас наибольший интерес представляют интерактивные карты России и российских городов (рис. 3.33). Интерактивной картой можно управлять: увеличивать и уменьшать масштаб и сдвигать её по всем географическим направлениям (север, юг, запад, восток), чтобы просмотреть участки карты за пределами краев экрана. Пример сайта интерактивных карт: http://www.eatlas.ru.
Рис. 3.33
Картографический ресурс Google Earth. Этот ресурс представляет собой программу-навигатор Google Earth, устанавливаемую на локальный компьютер, и удалённую, находящуюся на серверах в сети Интернет, базу географических данных. Основу этих данных представляют спутниковые снимки и топографические карты. Для визуализации изображения используется трёхмерная модель всего земного шара (с учётом высоты над уровнем моря), которая отображается на экране компьютера.
Программа-навигатор Google Earth позволяет изменять масштаб изображения (увеличение, уменьшение), осуществлять сдвиг по осям (вверх, вниз, вправо, влево) и поворачивать изображение. Можно получить координаты любой точки земной поверхности, а также её высоту над уровнем моря.
Практически вся поверхность суши визуализируется изображениями, имеющими разрешение 15 м/пиксель. Есть и отдельные участки поверхности (как правило, столицы и некоторые крупные города), имеющие более подробное разрешение. Например, Москва снята с разрешением 0,6 м на пиксель (рис. 3.34).
Рис. 3.34
По желанию пользователя можно отобразить на земной поверхности названия населённых пунктов, водоёмов, аэропортов, автомобильные и железные дороги и другую информацию. Имеется также функция измерения расстояния между точками на земной поверхности.
Спутниковая навигация. Для определения географических координат точки, в которой находится пользователь, используются данные, полученные с помощью радиосигналов со спутников. Основой системы должны являться 24 спутника (рис. 3.35), причём для определения пространственных координат и точного времени требуется принять и обработать навигационные сигналы не менее чем от 4 спутников.
Рис. 3.35
В настоящее время существуют две системы глобальной спутниковой навигации: американская GPS и российская ГЛОНАСС. Максимальная точность измерения военных навигаторов составляет несколько метров, обычная точность гражданских моделей навигаторов составляет несколько десятков метров.
Существуют GPS-приёмники, имеющие собственный процессор для необходимых расчётов и дисплей для отображения информации, а также GPS-приставки к смартфонам и ноутбукам. Кроме географических координат и точного времени GPS-приемник способен показать текущее положение на электронной карте местности (рис. 3.36).
Рис. 3.36
Вопросы и задания
1. В чём состоит отличие географических информационных систем от обычных географических карт?
2. Что можно определить с использованием спутниковой навигации?
Следующая страница 
Практическая работа 3.6. Геоинформационные системы в Интернете
Cкачать материалы урока
