Размещение интерактивной картографической информации в сети интерне

Автор статьи: Самсонов Александр

>

1. Суть вопроса и актуальность проблемы

Многие люди по роду своей деятельности работают с картографической информацией. Эти карты представлены в форматах редакторов векторной графики (например CorelDraw), либо это файлы геоинформационных систем (таких как ArcView), или же это большое растровое графическое изображение. К сожалению, при этом возникает трудности по переносу этих данных между пользователями: во-первых, потому, что эти файлы имеют очень большой размер, а во-вторых, программы для работы с ними (например ГИС ArcView ) недоступны многим пользователям, т.к. стоят немало и достаточно сложны. Трудности обмена такой информацией приводят к тому, что многие ученые не имеют возможности поделиться своими достижениями или воспользоваться результатами трудов своих коллег.
В то же время существует способ обмена информацией между различными пользователями - это международная компьютерная сеть интернет. Помещать свои данные в этой сети очень удобно, т.к. они становятся доступны для пользователей по всему миру, на компьютерах разных фирм и под различными операционными системами, а также для их просмотра не нужно специальных навыков или дорогих программ. Поэтому вопрос публикации картографической информации в сети очень актуален, и многие пользователи рано или поздно сталкиваются с необходимостью его решения.

2. Что такое "картографическая информация" ?

"Картографическая информация" - это информация, описывающая некоторую область земной поверхности. С точки зрения обработки её на компьютере это информация бывает трех типов.
1. Растровые изображения. Это файлы форматов bmp, gif, tif, jpeg и т.п. Такие файлы могут быть созданы при сканировании карт, а также при работе с пакетами Adobe Photoshop или Corel Photopaint. именно растровые изображения двух форматов (gif и jpeg) и можно увидеть на интернет-странице.
2. Векторные изображения. Это изображения, полученные "обрисовкой" карты в векторном пакете (например, Corel Draw) или оцифровкой с помощью дигитайзера - специального устройства, позволяющего вводить карты в компьютер в векторной форме. У векторной графики есть несколько преимуществ по сравнению с растровой: она легко редактируется и масштабируется без потери качества. В настоящее время такие данные нельзя помещать на веб-страницах, а нужно предварительно переводить в растровый формат (gif или jpeg)
3. Файлы геоинформационных систем. Говоря упрощенно, это графические данные (преимущественно векторные изображения), которые сопровождаются другой (невизуальной) информацией. Например, нарисованный на карте лес сопровождается описанием типов деревьев, река - количеством рыбы, озеро - глубинами и т.п. ГИС-программы позволяют получить эту информацию по запросу пользователя. Наиболее популярная ГИС у нас в стране - это разработанные корпорацией ESRI пакеты программ ArcView и ArcInfo. Файлы ГИС также нельзя выставить в интернет (стандартные браузеры не умеют с ними работать), но в принятом в сети формате данных HTML существуют способы по "привязке" дополнительных данных к карте, подобно тому, как это делается в ГИС.

3. Основные трудности размещения картографической информации в HTML-документе.

3.1. Подготовка графического файла.
Для начала вы должны подготовить графический файл, содержащий вашу карту. Выберите формат файла (это может быть gif или jpg (jpeg). Эти форматы отличаются способом описания изображения. Jpg-файлы имеют большое количество цветов и хорошо подходят для детальных рисунков или фотографий. При использовании gif картинка состоит из небольшого количества цветов (256), но карты с большими областями одинакового цвета имеют небольшой размер (поэтому этот формат в нашем случае более предпочтителен). Если ваша карта в растровом формате другого типа, то вам необходимо конвертировать её в gif или jpeg c помощью графического редактора. Если же вы имеете дело с файлом векторной графики, то вам тоже необходимо сохранить его в описанные выше растровые форматы, но при этом нужно подумать о размере изображения. Если вы создадите файл большого размера, то его будет трудно передавать по каналам связи, если же маленького, то мелкие детали будут потеряны. Если вы имеете подробную карту и файл оказался чрезвычайно большой (например, линейные размеры превышают тысячу точек, и на диске он занимает немало), то можно попробовать его "порезать" и поместить в сети по частям (см. п.5.2.). Я применил такой подход при работе над экологической картой Владивостока, и, по-моему, работа оказалась оправданной.
Если вы создали карту в гео-системе (я знаю, что многие ученые успешно работают в этом направлении), то при переносе её в интернет вас ждут определенные трудности. Вам придется сохранять файл в растровом виде, и вся невизуальная информация, "привязанная" к ней, окажется потеряна. Но вы можете задать такую информацию и средствами HTML (см. пункт 3 данного раздела). Конечно, при этом карта уже не будет обладать всеми возможностями ГИС, но будет более информативна, чем обычное изображение на странице, и станет доступна широкому кругу людей.

3.2. Создание HTML-документа. После того как вы подготовили графическое изображение, вам нужно создать html-файл. Это текстовый файл, который будет "оболочкой" вашей карты и помимо изображения может содержать текст, гиперссылки и т.д. - всё что присутствует на веб-странице. Как и любой текстовый файл, его можно создавать в обычном текстовом редакторе - Notepad (Блокнот) для Windows. Существует масса других редакторов, позволяющих создавать веб-страницы визуально, но их рассмотрение выходит за рамки статьи.
3.3. Обогащение изображения невизуальной информацией (создание интерактивного изображения).
Как уже говорилось, в html-документе можно привязывать к изображению дополнительную информацию. Эта информация может быть получена пользователем, просматривающим вашу карту, если он щелкнет в интересующем его месте изображения левой или правой кнопкой мыши или же просто подведет указатель мыши к этому месту. Браузер может ответить на такой "запрос", показав информацию в виде небольшого прямоугольничка с текстом под указателем мыши, выдать её в строке состояния, открыть новое окно с описанием и т.д.
Для того, чтобы задать на изображении информацию, нужно сделать его "изображением-картой". Существует два типа изображений-карт: изображения-карты на стороне клиента (client-side image maps) и изображения-карты на стороне сервера (server-side image maps). В первом случае вся информация по карте содержится в самом html-файле. Это не требует дополнительных обращений к серверу, и карта мгновенно реагирует на запросы. Во втором случае браузер отслеживает действия пользователя над картой и передаёт информацию интернет-серверу, который реагирует, возвращая ответ. Поэтому для использования этого метода необходимо, чтобы у разработчика карты был прямой доступ к серверу, что в большинстве случаев невозможно.

4. Создание изображений-карт на стороне клиента.

?Итак, если вы сделаете ваш графический файл изображением-картой на стороне клиента, то:

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

Для создания изображений-карт существуют визуальные средства, но сначала нужно поговорить о языке HTML. Вам нужно прочитать этот раздел внимательно (для понимания возможностей, которые предоставляет данный метод).
HTML (HyperText Markup Language) - это язык разметки гипертекста, позволяющий изменять величину, цвет, стиль текста в текстовом документе, создавать таблицы, вставлять ссылки на другие документы, включать графические файлы и т.п. Элементом, позволяющим размечать таким образом текст, является тег. Тег - это часть документа, расположенная между символами < и > . Тег не отображается браузером - программой просматривающей html-файлов, но влияет на текст до или после тега или же на месте тега появляется какой-либо элемент страницы (картинка, кнопка и т.п.). У многих тегов существуют атрибуты. Атрибут - это элемент тега, описывающий его свойства. Например, чтобы вставить картинку на страницу нужно воспользоваться тегом <IMG SRC="имя файла">. Здесь SRC="имя файла" - это атрибут, указывающий имя графического файла, который будет размещен на странице. У тега <IMG>, как и у многих тегов, существуют и другие атрибуты.
Если вы хотите сделать изображение интерактивным (т.е. создать изображение карту), то вам необходимо добавить к тегу <IMG> атрибут USEMAP="#MAPNAME", где MAPNAME - это имя изображения-карты. Затем в этом документе вы должны вставить теги :
<span class=pre><MAP NAME="MAPNAME">
<AREA ...>
<AREA ...>
. . .
</MAP>
</span>
Между тегами <MAP> и </MAP> будет находиться информация, описывающая и карту. Для того, чтобы разные части изображения-карты несли различную информация, вводится тег <AREA>(область). Тег <AREA> описывает одну область на карте, но совокупность областей описывает всю карту и позволяет задать разнообразную информацию. Вот краткое описание этого тега:
<AREA
SHAPE = "RECT | CIRCLE | POLY"
COORDS = "список координат через запятую"
HREF = "путь к файлу"
[TARGET = "имя окна браузера"]
[ALT = "текст, который будет выведен как подсказка"]
[onClick="реакция на нажатие мыши"]
[onMouseOver="реакция на появление указателя мыши над областью"]
[onMouseOut=" реакция на уход указателя мыши с области"] >
Обозначения:
| - выбор одного элемента
[ ] - необязательный параметр

Русские предложения в этом описании, конечно, не являются частью формата и введены для наглядности.
Атрибут SHAPE описывает геометрический тип области: RECT, CIRCLE или POLYGON - прямоугольник, круг или многоугольник соответственно. Ясно, что многоугольная область может быть любой формы (с любым количеством произвольно расположенных вершин), что развязывает руки создателям изображений-карт.
Атрибут COORDS описывает координаты области в пикселях (точках) экрана. Он зависит от геометрического типа (SHAPE) области. Очевидно, что задание этого атрибута путем прямого редактирования html-файла - крайне трудоёмкий и неэффективный процесс.
Атрибут HREF задаёт ссылку на документ в сети. Если пользователь щёлкнет мышкой по области, то соответствующий документ будет открыт. Если вы не хотите делать область гиперссылкой, можете задать этому атрибуту значение #.
Атрибут TARGET задает окно, в котором будет открыт документ, заданный в HREF.
Атрибут ALT задаёт выпадающую подсказку - небольшой прямоугольник с текстом появляющейся под указателем мыши, когда этот указатель находится над областью.
Атрибуты OnClick, OnMouseOver, OnMouseOut могут содержать описание действий, которые будут выполнены, если над областью произойдет событие, соответствующее атрибуту. Этим трем атрибутам соответствуют события "щелчок мыши", "наезд мыши", "съезд мыши". У тега <AREA> существуют и другие атрибуты и события (например "двойной щелчок" и т.п.) подробней о которых вы можете узнать по адресу: http://www.fegi.ru/geohtml/
?Итак, теперь мы знаем, что область может :

• являться гиперссылкой, т.е. ей можно задать адрес документа в сети, который появится после того, как пользователь щелкнет мышкой;
• реагировать на появление курсора мыши над областью появлением выпадающей подсказки.
• реагировать на действия пользователя и другим образом, заданным в "событиях" области -атрибутах начинающихся с приставки On. Ниже вы узнаете, как таким образом выводить текст в строку состояния браузера.

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

5. Программа GeoHTML

5.1. Необходимость создания.
Эта программа была написана мной в связи с необходимостью размещения в сети экологической карты Владивостока. После того как эта карта была нарисована в CorelDraw и экспортирована в gif-файл, оказалось, что она имеет линейные размеры порядка 2000x2000 точек и объём 400 Кбайт. Т.е. возникли проблемы, описанные в п. 3.1. К тому же для создания интерактивного изображения из этой карты не подошёл ни один распространяемый по интернету редактор изображений-карт. Главная причина в том, что эти программы создавались для работы с небольшими изображениями (например, меню на сайтах), а не для работы с многоуровневой гео-информацией. Отсюда и название программы GeoHTML, которая создана для облегчения переноса гео-данных в файлы HTML с последующим размещением в сети.
5.2. Возможности.
Программа GeoHTML работает с Dynamic HTML - современной версией языка HTML, ориентированной на работу с языком сценариев JavaScript. Программа берет на себя всю работу с тегами <IMG>, <MAP>, <AREA> и позволяет :

• Создавать html-файлы с изображениями-картами или редактировать существующие. При этом в одном html-файле можно создавать несколько изображений-карт.
• Визуально создавать и редактировать области на карте. Визуально - значит, вы наносите область на карту с помощью мыши и во время проектирования можете видеть границы области поверх графического файла. Также с помощью мыши можно редактировать границы областей, перемещая вершины или передвигая всю область.
• Задавать атрибуты областей с помощью окна Area Inspector (инспектор областей). В данный момент инспектором областей поддерживается 26 атрибутов Dynamic HTML, тем не менее, если вы хотите задать другой, в программе есть такая возможность. Также это окно содержит одно "виртуальное" поле Status (состояние), которое позволяет задать текст, отображающийся в строке состояния браузера (в этой строке вы обычно видите "Waiting for replay" или "Document done"). Теперь, если пользователь подведет курсор мыши на область, он увидит в этой строке заданный вами текст. Если вы зададите это поле у нескольких соседних областей разными значениями, то пользователь, ведя указатель мышки по карте, будет наблюдать постоянно изменяющийся текст. Поле Status работает с событиями Dynamic HTML - OnMouseOver и OnMouseOut и записывает в них необходимый код JavaScript, что позволяет использовать возможности Dynamic HTML людям, по роду своей деятельности не связанных с программированием. Ясно, что таких "виртуальных" полей можно придумать много, их появление целиком зависит от активности пользователей программы.
• Пользоваться слоями (уровнями) для создания изображений-карт, подобно тому, как это делается в редакторе векторной графики CorelDraw или ГИС ArcView. При этом, изменяя свойства уровня, можно менять цвет или стиль областей, расположенных на нем, либо включать/выключать на время их видимость, что в ряде случаев очень удобно.
• Редактировать html-файл в текстовом режиме. Нельзя только удалять или редактировать теги <IMG>, <MAP>, <AREA>, соответствующие карте (для этого служат визуальные средства программы). Возможность редактировать текст html-файла будет полезна, если в него необходимо внести небольшие изменения, например, написать функцию на языке сценариев JavaScript, чтобы поставить её вызов в каком-либо событии области. Язык JavaScript был введен производителями браузеров для того, чтобы веб-дизайнеры сами решали, какие действия будет совершать элемент страницы, что позволяет избавиться от большого количества атрибутов и даёт очень широкие возможности.
• Создавать атласы. Другими словами, "разрезать" большую карту на несколько частей, чтобы выставить их в сети все. Созданные части связываются между собой гиперссылками автоматически. При этом пользователь, просматривая вашу карту, имеет возможность выбрать район, который он хотел бы увидеть, что ускоряет доставку необходимой ему информации по медленным каналам связи. Этот метод позволяет выставлять в сети карты очень больших размеров, при этом в получившиеся части карты в нужных местах вставляются области (теги <AREA>), заданные на исходной карте (т.е. части карты сохраняют интерактивные свойства исходной). Метод работает быстро и просто, возлагая все рутинные операции по пересчёту координат областей, редактированию графического изображения и т.п. на программу.

Программа работает под управлением Windows 95/98/NT, имеет интерфейс на английском языке и файл справки (help-файл) на двух языках (русском и английском). Также в программу внедрён справочник по языку HTML, составленный Стефаном Ле Ханте на английском языке.
Детальную информацию о работе с программой смотрите в файле справки и на сайте программы.

6. Особенности браузеров

Браузер - программа для просмотра страниц в интернет. Это интерпретатор HTML. Читая размеченный текст, браузер визуализирует его на экране как документ, руководствуясь информацией, заданной тегами. В настоящее время различные браузеры могут отображать один и тот же файл несколько по-разному. Cледует остановиться на том, как же интерпретируют браузеры интерактивную карту, а именно - содержимое тега <AREA>. Здесь будут исследованы наиболее популярные браузеры - Netscape Navigator 4.05 (далее NN) и Internet Explorer 4.0 (IE).
Первым делом нужно сказать, что гиперссылка (поля Href и Target) корректно работает в обоих браузерах.
Чтобы добиться всплывающей подсказки в NN, необходимо задать атрибут Alt, а в IE 4.0. этому соответствует атрибут Title.(IE 5.0. стал понимать и Alt). В NN подсказка странным образом зависит от геометрических особенностей области. Она не работает на круглых областях, не всегда на прямоугольных и дает стабильный результат только на многоугольниках. В связи с этим в GeoHTML предусмотрена возможность конвертировать области (например, из прямоугольника в многоугольник).
Оба браузера реагируют на события Dynamic HTML. Это дает возможность создавать очень мощные интерактивные карты. Огорчает то, что IE 5.0. запретил вывод информации в строку состояния, хотя в NN и IE 4.0. такая возможность есть (может, в IE 5.0 это надо делать теперь как-то по-другому?).
Такие разночтения, несколько удивительные с первого взгляда, но привычные для веб-дизайнеров - результат бурного развития языка HTML и конкуренции между производителями браузеров, и с этим приходится мириться. Конечно, со временем эти разногласия уйдут в прошлое, что обеспечит ещё большие возможности интернет-страниц.

7. Заключение

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

8. Ссылки

Программу GeoHTML вы можете получить бесплатно по адресу: http://www.fegi.ru/geohtml/
Смотрите на Экологическом сайте Владивостока пример использования программы GeoHTML http://www.fegi.ru/ecology/