04.01.2010 23:49

 

KML - BalloonStyle. Создание шаблона отображения окна описания метки.


<BalloonStyle> это один из параметров описания стилей отображения объектов в Google Earth.
Именно этот параметр отвечает за описание стиля отображения окна описания метки.
Когда Вы кликаете на какой либо метке, линейном или площадном объекте (если у этого объекта введено описание в тегах

<description></description>) открывается окно в котором отображается имя объекта name и его описание description.
Используя параметр описания стилей BalloonStyle вы можете задавать цвет фона открывающегося окна, цвет текста в этом окне, а также формат выводимой в окне информации.


Вы можете например:
- задать ширину открываемого окна;
- задать шрифт которым будет отображаться текст в открывающемся окне;
- задать текст который будет предварять описание метки;
- задать текст завершающий описание метки;
- скрыть текст ссылок "Сюда" "Отсюда"
- и другое...

Основной синтаксис таков
<BalloonStyle id="ID">
<bgColor>ffffffff</bgColor>                 <!-- kml:Цвет фона -->
<textColor>ff000000</textColor>        <!-- kml:Цвет текста -->
<text>...</text>                               <!-- Шаблон выводимой информации (описания метки) -->
<displayMode>default</displayMode>    <!-- kml:Свойство отображения -->
</BalloonStyle>

где,
<textColor>
Цвет основного текста. По умолчанию установлен черный цвет (ff000000).
<text>
Текст, выводимый в окне описания. Если текст не указан, Google Earth выводит окно описания по умолчанию (цвет фона - белый, имя объекта <name> полужирным шрифтом, описание объекта <description>, ссылки для прокладки маршрута "Сюда" "Отсюда").
Кроме того, в <text> с помощью следующего формата можно добавить объекты для ссылки на дочерние элементы, а именно $[name] - ссылка на имя объекта, $[description] - ссылка на описание объекта, $[address]- ссылка на адрес объекта, $[id]- ссылка на код объекта, $[Snippet]. Программа Google Earth выполняет поиск соответствующих данных в текущем объекте и заменяет эту информацию в  окне описания. Для включения ссылок прокладки маршрута ("Сюда" "Отсюда") используется тег $[geDirections]. Чтобы в окне не появлялись ссылки прокладки маршрута не включайте в элемент <text> тег $[geDirections].
<displayMode>
Если <displayMode> – свойство указывающее Google Earth показывать ли окно с описанием при клике на метке в окне карты. При установке default, Google Earth использует для создания комментария информацию из тега <text> и отображает окно описания. Если <displayMode> – hide, то Google Earth отобразит окно описания только при клеке на метке в окне списка меток и не отобразит это окно при клике по метке в окне карты.

В качестве примера возьмем измененный кусочек кода описывающего метки фотопанорам интересных мест Кирова


<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
<Document>
<name></name>
<open>1</open>
<Style id="sn_camera">
<BalloonStyle>
<bgColor>ffffffff</bgColor>
<text><![CDATA[
<img src="http://www.kirov2kml.ru/City_to_KML/_image/balloon_im_320x1.png"/>
<b>Фотопанорамы. Интересные места.</b></br></br>
<b><font face="Courier" color="#000000" size="+3">$[name]</font>
</b><br/><br/>
<font face="Arial" color="#FF0000">$[description]</font><br/><br/>
<font face="Courier" color="#000000"><i>Пример использования BalloonStyle</i></font>]]>
</text>
</BalloonStyle>
</Style>
<Placemark>
<name>Театральная площадь 2009.06.10</name>
<description><![CDATA[Для просмотра пройдите по ссылке <a href="http://www.kirov2kml.ru/City_to_KML/Kirov/fotopanorama/interesting_places/panorama_0001.swf">смотреть...</a>]]></description>
<styleUrl>#sn_camera</styleUrl>
<Point>
<coordinates>49.666666,58.603548,0</coordinates>
</Point>
</Placemark>
</Document>
</kml>

В данном случае:
- Цвет фона принят белым;
- В качестве предварительного текста используется текст "Фотопанорамы. Интересные места";
- В качестве текста окончания используется текст "Пример использования BalloonStyle" кеглем Италик;
- Для отображения имени метки $[name] указанно использовать шрифт Courier черного цвета на три кегля больше обычного;
- Для отображения описания метки $[description] указанно использовать шрифт Arial красного цвета;
- Помимо этого в шаблон добавлено изображение balloon_im_320x1.png размером соответственно 320х1 пикселей, для задания минимальной ширины открываемого окна;
- И в теги <text></text> не включен параметр $[geDirections], тоесть ссылки прокладки маршрута ("Сюда" "Отсюда") показываться не будут.

Результат выполнения данного кода Вы можете увидеть на скриншоте ниже.