НА ГЛАВНУЮ СТРАНИЦУ

СОЗДАЁМ СВОЮ HTML-КАРТУ

Как это устроено

Вы наверняка встречали в интернете эффектные картинки либо карты, где можно щелкать мышкой на разные объекты, и переходить на них по ссылке, словно в тексте. Объекты показаны на карте, при наведении мыши курсор становится "указательным", появляется подсказка. Всего этого вполне достаточно, чтобы добиться эффекта интернет-карты. Точнее, её нужно называть схемой или планом... - масштаб такой "схемы" произвольный, и измерение расстояний невозможно. Но и это уже шаг вперед от бесконечных текстовых содержаний! Хотя никто не мешает нанести на такую картинку масштабную линейку... Да почему бы и не карта? Тем более, что такую раскладку на плотной бумаге, c возможностью наглядного выбора по ней, спокон веку и называли "картой" - таков исконный смысл этого слова! Карта меню, карта посетителя, карта выбора.

Здесь показана сокращенная версия такой живой html-карты. Её полноразмерную версию можете найти по ссылке на одном из наших "географических" сайтов, но для освоения сойдет и эта. Если вы совсем не знакомы с созданием HTML-страниц, ознакомьтесь с этим тут. Хороший самоучитель, кстати. Делается это все довольно просто, начнем с элементарного примера - да простит нас великий Яндекс :)

МГУ

Объект ссылки подсвечен красным: это пятнышко просто-напросто намалевано на исходной картинке. Другая, более подробная карта появляется при нажатии мышкой. Над ссылкой курсор меняет форму и сопровождается подсказкой, так что ошибиться трудно. В примере задействованы две картинки - исходная, которая сопровождается неким HTML-кодом, и конечная, которая может быть просто картинкой или даже любым документом. HTML-код, который реализует столь наглядный интерфейс, состоит всего из четырёх простых строк:

<IMG SRC=VGORY.GIF USEMAP=#MGU>
<MAP NAME=MGU>
<AREA HREF=VGORY2.GIF SHAPE=RECT COORDS=76,86, 100,110 ALT=МГУ>
</MAP>

Кроме этого, НИЧЕГО не нужно. Если не верите, скопируйте вышележащий код в отдельный файл, приложите к нему обе картинки и попробуйте. Названия картинок должны быть как в тексте, VGORY.GIF и VGORY2.GIF. HTML-файл с кодом назовите как угодно, лишь бы расширение его было .htm - иначе Internet Explorer его не распознает и не загрузит.

Немного остановимся на самом коде: тэг IMG SRC задает имя первой картинки, опция USEMAP показывает, что для этой картинки есть некая "карта выбора" с указанием координат активных областей. Сама карта выбора начинается с тэга <MAP> и расположена ниже. В ней всего одна ссылочная область AREA, хотя может быть сколько угодно. Опция SHAPE определяет форму области, в данном случае прямоугольную. Область описана всего двумя парами координат. Координаты задаются в пикселях картинки, от верхнего левого угла. Остальное, думаю, и так понятно.

Итак, вы уже поняли, что ссылки на картинке можно проставить в HTML-странице с помощью конструкции MAP. Одинарная HTML-инструкция AREA, задающая одну сложную ссылочную область, выглядит так:

<AREA HREF="BAY2.JPG" SHAPE="POLY" COORDS="
221,111,
221,88,
254,88,
254,111
" ALT="МЫС КАЗАНТИП">

Форма области в этом случае, как вы можете догадаться, полигональная. Координаты угловых точек полигона просто перечисляются одна за другой, парами, сначала X, затем Y и так для каждой точки. Для наглядности я расположил координаты столбиками, как мы привыкли, и отделил переносами от остального кода. На работе это не скажется, Internet Explorer переносы игнорирует.

Какое всё это имеет отношение к ГИС? Прямое, ведь координаты области могут быть сложными, и лень будет их выписывать вручную с картинки: тем более что у нас есть такой мощный координатный инструмент. Карта в начале страницы была сделана именно с помощью ArcView. Сойдет и Arcmap и MapInfo, если ArcView не найдется. Кроме того, нужен будет PhotoShop и текстовой редактор.

Готовим картинки

Фоновая картинка была создана из снимка Ландсат. Где его взять и как обработать, рассказано здесь. Добавлю лишь, что с водой и с сушей пришлось повозиться по отдельности - уж больно они разные. Модель рельефа для отмывки не использовалась, но было добавлено выдавливание по береговой линии, и теневой эффект для имитации обрывистого берега. Как добавлять эффекты в фотошопе, можно почитать тут.

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

Сохраняем готовую картинку как jpeg, безо всяких слоёв, целиком и сплошняком, как можно видеть в начале этой странички.

Добываем координаты

Далее загружаем картинку в ArcView или ArcMap. Восстанавливать привязку космоснимка не требуется: ведь нам понадобятся координаты в пикселах самой картинки. Поэтому грузим растр в ГИС "как попало", в ноль координат, без world-файла. Далее создаем пустой полигональный шейп-файл, обводим картинки полигонами с некоторым запасом, как показано на рисунке. Название файла каждой пиктограммы лучше сразу вставить как атрибут в колонку "Name", помечая таким образом каждый полигон, чтобы потом не путаться со ссылками. Хорошая идея проверить названия полигонов еще в ГИС, путем простановки надписей (Labels).

Разбиваем все полигоны на точки с помощью, например, EdiTools. В таблице точек все колонки, кроме координат X,Y и Name, скрываем или удаляем - они не нужны. Экспортируем эти три колонки в текстовой файл. Да, перед этим нужно обязательно пересчитать координату Y, ведь AV считает началом координат НИЖНИЙ левый угол, а Internet Explorer будет отсчитывать пиксели от ВЕРХНЕГО левого угла. Для коррекции этого факта просто вычтем Y из высоты картинки. Текстовой файл с координатами должен выглядеть примерно так:

"x2","y2","Name"
221,111,bay2
221,88,bay2
254,88,bay2
254,111,bay2
221,111,bay2
310,191,vid3
343,191,vid3
345,200,vid3
342,208,vid3
311,208,vid3
307,204,vid3
308,197,vid3
310,191,vid3
310,191,pines
343,191,pines
345,200,pines
342,208,pines
311,208,pines
307,204,pines
308,197,pines
310,191,pines
...

Создаем код страницы

В этом текстовом файле спереди добавляем заголовок конструкции MAP:

<IMG SRC="MAPFILENAME.JPG" USEMAP="#MAPNAME">
<MAP NAME="MAPNAME">

Где, напоминаю, "MAPFILENAME.JPG" просто имя файла фоновой карты, "MAPNAME" - условное название карты выбора внутри HTML-текста. Сама роспись карты выбора пойдет ниже.

Удаляем строку-заголовок колонок, она не нужна. Далее займемся описаниями ссылок. Как вы помните, каждая ссылка на картинке задается инструкцией AREA. Чтобы сформировать такую инструкцию, перед группой координат, отражающей точки одного полигона, добавляем

<AREA HREF="NAMELINK.JPG/HTM/TXT" SHAPE="POLY" COORDS="
(Последняя кавычка обязательна!)

Здесь NAMELINK.JPG/HTM/TXT - имя файла документа, вызываемого по ссылке, странички, НА которую ссылается соответствующая пиктограмма. Это может быть картинка Jpeg, Html-документ, текстовой файл, что угодно (согласно правилам интернета). Удаляем также последнюю строку в группе точек, она идентична первой - это "замыкание" полигона, оно уже не нужно. После этого удаляем ненужные названия текущей группы точек (колонку Name), аккуратно оставляя запятые после координаты Y. Снизу в группе удаляем еще и последнюю запятую, вместо нее добавляя

" ALT="NAMEPOLY"> Это текст для всплывающей подсказки, полное название объекта. Сберегите первую кавычку! Все это можно делать в простом текстовом редакторе.

Проверьте, каждая группа должна быть замкнута угловой скобкой после команды ALT="NAMEPOLY". Так нужно обработать каждую группу. Если их немного, это не составляет труда, и нет смысла в автоматизации. Удобно, когда редактор имеет функции работы с прямоугольными текстовым блоками.

В конце файла можно замкнуть карту выбора тэгом </MAP>, но и без него все будет работать. Это все... Выглядеть HTML-страница для первых трёх ссылок должна вот так.

<IMG SRC="MAPFILENAME.JPG" USEMAP="#MAPNAME"> 
<MAP NAME="MAPNAME">
<AREA HREF="NAMELINK1.JPG" SHAPE="POLY" COORDS="
221,111,
221,88,
254,88,
254,111" ALT="NAMEPOLY1">

<AREA HREF="NAMELINK2.JPG" SHAPE="POLY" COORDS="
310,191,
343,191,
345,200,
342,208,
311,208,
307,204,
308,197" ALT="NAMEPOLY2">

<AREA HREF="NAMELINK3.JPG" SHAPE="POLY" COORDS="
310,191,
343,191,
345,200,
342,208,
311,208,
307,204,
308,197" ALT="NAMEPOLY3">
...

</MAP>

Можно грузить готовую страницу в Internet Explorer. Как должна выглядеть страница полностью, можете подглядеть в исходном коде текущей страницы. Раскладка карты расположена в самом низу, ниже моей подписи. Вот так и устроена механика интерактивной карты. Можно было бы, конечно, создать скрипт, однако неохота такое изящное дело как карта, пускать на поток - вручную вышивать приятнее :)

Geologic

Статью можно обсудить здесь, на форуме GeoFAQ Мыс Казантип Полуостров на ладони Сосновый лес Бухта Двойная Солонец Велопути-дороги Бывшая атомка