НОВЫЕ ВИЗУАЛЬНЫЕ ВОЗМОЖНОСТИ В WEB-ГИС ПРОЕКТАХ

Новоселов Д.В.

Руководитель департамента ГИС

 ООО «Арт-мастер», г.Киев

_{для просмотра интерактивных примеров необходим}

С момента создания первой версии Geomedia Professional ее возможности по использованию напрямую большинства стандартных ГИС-форматов поражали воображение.

Взяв курс на непроприетарные (несобственнические) форматы данных, корпорация Intergraph сделала радикальный шаг в мир открытых систем и открытых спецификаций. В линейке серверных продуктов GeoMedia WebMap, GeoMedia WebMap Professional, были унаследованы все архитектурные особенности мультиформатного десктоп продукта GeoMedia, но в части выходных форматов, весьма специфичных для веб-систем, были выбраны растровые и векторные форматы, опирающиеся на встроенные возможности веб-броузеров или на специальные ActiveX плагины для броузеров. Сейчас в версии Geomedia WebMap 6.0 это внушительный список: ActiveCGM (16 и 32 битный), JPEG, PNG, SVG, SVGZ. Причем ActiveCGM поддерживается как для Windows среды с помощью ActiveX, так и для браузеров, не поддерживающих ActiveX, в виде JavaApplet. (см. демо-сайт)

Растровые JPEG и PNG поддерживаются стандартными браузерами. Эти форматы не требуют наличия специфических клиентских программных средств для просмотра карт.

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

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

Итак, самым интересным, по моему мнению, является появившийся еще в GeoMedia WebMap 5.0 формат SVG (Scalable Vector Graphics). SVG - это стандарт, рекомендованый World Wide Web Consortium для описания с помощью XML markup двумерной векторной и комбинированной векторно-растровой графики.

Теперь о вкусностях данного формата:

На самом деле существует по крайней мере два момента, за которые можно полюбить SVG-графику. Интересно, что эти два аспекта лежат в различных плоскостях: визуальной и сугубо технической. Возможно, что эти две плоскости даже представляют сферы деятельности людей с различным образованием и, отчасти, мировоззрением. Категориями первой, визуальной плоскости, руководствуются дизайнеры, картографы и все, кого притягивают визуально привлекательные образы, которые можно создать с помощью SVG. Достаточно простое объяснение визуальной привлекательности SVG состоит в том, что на клиенте (в браузере) SVG-графика отрисовывается с помощью растровых механизмов. Как это? Да очень просто - даю объяснение «от противного»: обычные векторные механизмы рисовки не позволяют качественно отрисовывать шрифты, сложные кривые, да и что там говорить, даже элементарное наложение двух разноцветных идентичных линий приводит к фактической видимости только одной из них – верхней по отображению. Вы встречали берега рек, пропадающие под контурами примыкающих к ним лесов, «утонувшие» острова? Да сколько угодно! Все подобные проблемы не позволяли относится в веб-картографии серьезно по меркам классического картографического дизайна.

Но теперь другое дело! Мы имеем классический растровый рендеринг, поддержку полупрозрачностей (opacity) в каждом объекте/слое, градиенты линейные, градиенты радиальные, визуальные эффекты (тени, отмывки, блестящие поверхности, текстуры (фактуры), паттерны любой конструкции, символы любой сложности) - и все это SVG.

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

Ну а где-же интересы нашего брата-технаря? А вот они, в другой плоскости:  всё, что интересует дизайнера и картографа, реально выжать из SVG с помощью абсолютно стандартной процедуры XSLT-обработки. Что это такое? Ну, прежде всего, вспомним, что SVG - это фактически XML, т.е. тэговый структурированный текстовый документ. Каждый класс объектов, или говоря картографически – слой, имеет собственный идентификатор и правила отображения.

На классическом примере покажем, как нарисовать картинку с помощью текста.

С точки зрения данных, для создания приведенного слева рисунка нужны только слово «SVG» и два вложенных прямоугольника

Два прямоугольника, заметите вы? :-) Да, как ни странно. Это хитрые параметрические прямоугольники, у которых в качестве одного из параметров указаны окружности. Т.е. все данные этого рисунка - это слово и десяток координат, ну а вся остальная специфика изображения - это фильтры. С помощью фильтров создаются визуальные эффекты.

Вообще, любой специалист, работающий с Geomedia, постепенно на 100% пропитывается одним нехитрым, но достаточно революционным принципом:  в системе данные всегда отделены от их отображения. Это когда у вас с одной стороны реляционная база данных и SQL-возможности по извлечению из нее информации, а с другой - миллион способов ее отображения.

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

Теперь соединив две технологии - собственно описания стилей во внешних CSS (строго говоря, в SVG используется следующая версия CSS - CSS2) и обработку XML-кода налету с помощью XSLT- обработки - мы получим поистине неограниченные возможности. Ведь на уровне XSLT-обработки можно динамически переопределять стили, вставлять Java-функции, выполнять вычисления и влиять на изображение SVG.

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

Не креативно? Тогда добавим анимацию путей или анимацию условных знаков, анимацию тултипов (всплывающих подсказок) - смотрите здесь. Опять маловато? Ну тогда давайте сделаем сайт, который автоматически меняет свой вид в зависимости от сезона. Да запросто! Ставим на загрузку Java-функцию,  вычисляющую по дате текущий сезон и в зависимости от этого подгружающую нужные CSS-стили. Зимой на нашем сайте бело-синие тона и деревья укрыты снегом, летом - буйство зелени, а осенью - багряные тона.

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

Хм... занесло, однако…

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

Для меня лично одним из признаков профессионального подхода в картографическом дизайне является бережное отношение к шрифтовым гарнитурам. Неизвестно почему, однако шрифт Arial я органически не терплю на картах. Ну совершенно не смотрятся MS-офисные шрифты на картографических изображениях. Хоть я и не знаком с практической аналоговой картографией и занимаюсь только цифровой около 10 лет, я тем не менее впитал некоторые эстетические стандарты, сформированные поколениями наших картографов.

Давно ли вы видели в Интернете прекрасный БСАМ курсив малоконтрастный(Бм-431) или Рубленый (Р-131)? Уж не говорю про Древний курсив прямой (Д-231), строчные буквы которого невозможно не узнать.

Мы делаем это. Основываемся на SVG, CSS, CEF. Последнее из перечисленного - это специальный формат (Compact Embedded Font) для шрифтов, создать его можно в Adobe Illustrator, шрифты в таком случае встраиваются в SVG.

С помощью CSS мы можем модифицировать параметры шрифта, например, включать отмывки, подсветки, тени.

Д-231 с фильтром «Выпуклый»
P-131 с раздельными стилями для края шрифта и заполнения, а также с фильтром «Подсветка»
Бм-431

_{Лирически-негодующее: мы не используем засечковые шрифты типа TimesNewRoman с пошлым эффектом Halo, который будучи необдуманно применен, выбивает под собой всю подложку карты, как моль старое пальто  :-P.}

Отдельного упоминания заслуживают возможности использования JScripts. Java функции, описанные в JScripts могут (хочется написать – «всё!»)…. быть встроены как обработчики различных событий, связанных с деятельностью пользователя (движение мыши, клик, видовые операции). Можно организовать сколь угодно изощренное интерактивное поведение карты. Сюда же можно отнести очень востребованные функции по обеспечению рисовки объектов. На наших SVG картах можно рисовать точки, символы, линии, полигоны, тексты; при соответствующей серверной поддержке можно записывать эти объекты в базу данных. Пользователи получают возможность создания собственных объектов на фоне или в непосредственной связи с географическими объектами карт.

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

Анимация первого рода применяется для карт с указанием маршрутов, путей следования, следов, различных справочников. Пример находится здесь.

Анимация второго рода - это способ создания динамичных карт. Динамика нужна для отображения каких либо тематических параметров. Классический пример - отрисовка диаграмм. У нас диаграммы - это не картинки с сервера, а векторная графика, которая отрисовывается на клиенте(броузере) исходя из параметров, которые пришли в данных. Таким образом мы можем в реальном времени отображать поверх статичных карт динамичные параметры.

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

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

Мы используем Geomedia WebMap от корпорации Intergraph, а чтобы вам видеть наши сайты, что называется, «в полном качестве», вам необходим ActiveX плагин SVGViewer, бесплатно доступный по ссылке