Стили

С помощью стилей можно изменить параметры стандартного представления геообъектов. Например, можно задать толщину линий ломаных или цвет заливки многоугольника.

<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="https://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
    <script language="JavaScript" type="text/javascript">
       window.onload = function () {
            ymaps.ready(function () {
                var myMap = new ymaps.Map('map', {
                    center: [54.53, 36.27],
                    zoom: 12
                });
                // После того как данные YmapsMl-файла загрузятся, вызывается callback-функция
                ymaps.geoXml.load("/maps/doc/ymapsml/1.x/examples/xml/styles.xml")
                            .then(function (res) {
                // Добавление коллекцию геообъектов на карту
                                myMap.geoObjects.add(res.geoObjects);
                                  }, function (error) {
                                       alert("При загрузке стилей произошла ошибка: " + error);
                             });
            });
        }
</script>
</head>
<body>
    <div id="map" 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="https://maps.yandex.ru/ymaps-1.x"
       xmlns:repr="https://maps.yandex.ru/representation-1.x"
       xmlns:gml="http://www.opengis.net/gml"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://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 — ссылка на шаблон, определяющий содержимое балуна, появляющегося при нажатии на многоугольник


Элемент, определяющий геообъект	Элементы, определяющие отображение геообъекта, а также балуна и хинта
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/doc/ymapsml/1.x/examples/#styleInheritance приведен на странице 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>
    https://api.yandex.ru/maps/ymapsml/examples/xml/ballooncontentstyle.xml#balloonTemplate
</repr:template>

или

<repr:parentStyle>
    https://api.yandex.ru/maps/ymapsml/examples/xml/ballooncontentstyle.xml#offices
</repr:parentStyle>