Стили
С помощью стилей можно изменить параметры стандартного представления геообъектов. Например, можно задать толщину линий ломаных или цвет заливки многоугольника.
<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.{{ domain }}/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 — параметры значка метки |
gml:LineString — ломаная линия |
repr:lineStyle — параметры линии |
gml:LinearRing — замкнутая ломаная |
repr:lineStyle — параметры линий, соединяющих вершины ломаной |
gml:Polygon — многоугольник |
repr:polygonStyle — параметры замкнутых ломаных, определяющих границы многоугольника и цвет фона |
YMapsML поддерживает наследование стилей. Это позволяет использовать в стиле параметры и шаблоны ранее определённые в другом стиле. Для указания наследуемого стиля используется элемент repr:parentStyle.
<repr:Style gml:id="styleHospital">
<repr:parentStyle>#commonStyle</repr:parentStyle>
</repr:Style>
Пример наследования стиля http://api.yandex.{{ domain }}/maps/doc/ymapsml/1.x/examples/#styleInheritance приведен на странице http://api.yandex.{{ domain }}/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.{{ domain }}/maps/ymapsml/examples/xml/ballooncontentstyle.xml#balloonTemplate
</repr:template>
или
<repr:parentStyle>
https://api.yandex.{{ domain }}/maps/ymapsml/examples/xml/ballooncontentstyle.xml#offices
</repr:parentStyle>