С помощью стилей можно изменить параметры стандартного представления геообъектов. Например, можно задать толщину линий ломаных или цвет заливки многоугольника.
styles.html
(http://api.yandex.ru/maps/ymapsml/examples/styles.html)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Примеры YMapsML. Использование стилей</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=<API-ключ>" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
var map;
function init () {
var map = new YMaps.Map(document.getElementById("YMapsId"));
var ml = new YMaps.YMapsML("http://api.yandex.ru/maps/ymapsml/examples/xml/styles.xml");
YMaps.Events.observe(ml, ml.Events.Fault, function (ml, error) {
alert("Произошла ошибка: " + error);
});
map.addOverlay(ml);
map.setCenter(new YMaps.GeoPoint(-1,-1));
};
</script>
</head>
<body onload="init();">
<div id="YMapsId" style="width:640px; height:400px;"></div>
</body>
</html>
styles.xml
(http://api.yandex.ru/maps/ymapsml/examples/xml/styles.xml)
<?xml version="1.0" encoding="UTF-8"?>
<ymaps:ymaps xmlns:ymaps="http://maps.yandex.ru/ymaps-1.x"
xmlns:repr="http://maps.yandex.ru/representation-1.x"
xmlns:gml="http://www.opengis.net/gml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maps.yandex.ru/schemas/ymaps-1.x/ymaps.xsd">
<repr:Representation>
<repr:Style gml:id="customStyle">
<repr:lineStyle>
<repr:strokeColor>FF9911</repr:strokeColor>
<repr:strokeWidth>7</repr:strokeWidth>
</repr:lineStyle>
</repr:Style>
<repr:Style gml:id="customStyle1">
<repr:parentStyle>#customStyle</repr:parentStyle>
<repr:lineStyle>
<repr:strokeColor>FF0000</repr:strokeColor>
</repr:lineStyle>
</repr:Style>
</repr:Representation>
<ymaps:GeoObjectCollection>
<gml:name>Ломаная и её стиль</gml:name>
<gml:featureMembers>
<ymaps:GeoObject>
<gml:name>Маршрут</gml:name>
<gml:description>Маршрут в виде ломаной</gml:description>
<gml:LineString>
<gml:pos>36.243914 54.565467</gml:pos>
<gml:pos>36.259706 54.56447</gml:pos>
<gml:pos>36.269659 54.529742</gml:pos>
<gml:pos>36.303652 54.567863</gml:pos>
</gml:LineString>
<ymaps:style>#customStyle1</ymaps:style>
</ymaps:GeoObject>
</gml:featureMembers>
</ymaps:GeoObjectCollection>
</ymaps:ymaps>
При просмотре в браузере файл styles.html будет выглядеть следующим образом.
Каждому типу геообъектов соответствует собственный элемент YMapsML (потомок элемента
repr:Style), с помощью которого задаются параметры его отображения.
Так, например, для задания параметров отображения ломаных и замкнутых ломаных используется элемент
repr:lineStyle,
метки — repr:iconStyle или
repr:iconContentStyle.
| Элемент, определяющий геообъект |
Элементы, определяющие отображение геообъекта, а также балуна и хинта |
|
gml:Point — геометрическая точка. Отображается с помощью метки
|
repr:iconStyle — параметры значка метки
repr:iconContentStyle — содержимое значка метки
repr:hintContentStyle — ссылка на шаблон, определяющий содержимое всплывающей подсказки, появляющейся при наведении мыши на метку
repr:ballonContentStyle — ссылка на шаблон, определяющий содержимое балуна, появляющегося при нажатии на метку
|
|
gml:LineString — ломаная линия
|
repr:lineStyle — параметры линии
repr:hintContentStyle — ссылка на шаблон, определяющий содержимое всплывающей подсказки, появляющейся при наведении мыши на линию
repr:ballonContentStyle — ссылка на шаблон, определяющий содержимое балуна, появляющегося при нажатии на линию
|
|
gml:LinearRing — замкнутая ломаная
|
repr:lineStyle — параметры линий, соединяющих вершины ломаной
repr:hintContentStyle — ссылка на шаблон, определяющий содержимое всплывающей подсказки, появляющейся при наведении мыши на замкнутую ломаную
repr:ballonContentStyle — ссылка на шаблон, определяющий содержимое балуна, появляющегося при нажатии на замкнутую ломаную
|
|
gml:Polygon — многоугольник
|
repr:polygonStyle — параметры замкнутых ломаных, определяющих границы многоугольника и цвет фона repr:hintContentStyle — ссылка на шаблон, определяющий содержимое всплывающей подсказки, появляющейся при наведении мыши на многоугольник repr:ballonContentStyle — ссылка на шаблон, определяющий содержимое балуна, появляющегося при нажатии на многогольник |
YMapsML поддерживает наследование стилей. Это позволяет использовать в стиле параметры и шаблоны ранее определённые в другом стиле. Для указания наследуемого стиля используется элемент
repr:parentStyle.
<repr:Style gml:id="styleHospital">
<repr:parentStyle>#commonStyle</repr:parentStyle>
</repr:Style>
Пример наследования стиля приведен на странице http://api.yandex.ru/maps/ymapsml/examples/.
Стили могут ссылаться на шаблоны.
Если стиль ссылается на шаблон, то заданные в нём параметры не влияют на внешний вид отображаемого с помощью этого стиля объекта.
Однако эти параметры могут использоваться в самом шаблоне. Ссылка на шаблон задаётся с помощью элемента
repr:template.
<repr:Style gml:id="offices">
<repr:balloonContentStyle>
<repr:template>#balloonTemplate</repr:template>
</repr:balloonContentStyle>
</repr:Style>
Шаблон и наследуемый стиль могут находиться не только в текущем, но и во внешнем YMapsML-файлах, доступных по протоколу HTTP. В этом случае ссылка на них приводится в виде <URL YMapsML-файла>#<идентификатор шаблона(наследуемого стиля)>.
<repr:template>
http://api.yandex.ru/maps/ymapsml/examples/xml/ballooncontentstyle.xml#balloonTemplate
</repr:template>
или
<repr:parentStyle>
http://api.yandex.ru/maps/ymapsml/examples/xml/ballooncontentstyle.xml#offices
</repr:parentStyle>
