OpenLayers: базовые сведения о стилях

[Denis Rykov]

Источник: http://workshops.opengeo.org/openlayers ... intro.html

При настройке символики элементов HTML используются таблицы стилей CSS:

Код: Выделить всё

.someClass {
    background-color: blue;
    border-width: 1px;
    border-color: olive;
} 

В приведенном примере .someClass - это селектор, позволяющий выбрать все элементы класса "someClass", а текст в фигурных скобках - непосредственное описание стиля.

OpenLayers.Filter

При настройке символики в OpenLayers в качестве селектора выступает фильтр (объект OpenLayers.Filter). Предположим, что вы хотите применить стиль ко всем объектам, имеющим атрибут "someClass", тогда фильтр будет выглядеть следующим образом:

Код: Выделить всё

new OpenLayers.Filter.Comparison({
    type: OpenLayers.Filter.Comparison.EQUAL_TO,
    property: "class",
    value: "someClass"
}) 

Symbolizers

Эквивалент описания стилей CSS в OpenLayers - хэш Symbolizer:

Код: Выделить всё

{
    fillColor: "blue",
    strokeWidth: 1,
    strokeColor: "olive"
}
 

OpenLayers.Rule

Объединение OpenLayers.Filter c хэшем symbolizer достигается путём использования правил (объекта OpenLayers.Rule):

Код: Выделить всё

new OpenLayers.Rule({
    filter: new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.EQUAL_TO,
        property: "class",
        value: "someClass"
    }),
    symbolizer: {
        fillColor: "blue",
        strokeWidth: 1,
        strokeColor: "olive"
    }
}) 

OpenLayers.Style

По аналогии с CSS, где можно иметь множество селекторов и связанных с ними описаний стилей, OpenLayers позволяет создать объект, содержащий в себе описание стилей различных объектов слоя - OpenLayers.Style. Если вы хотите раскрасить все объекты слоя в красный цвет, за исключением объекта атрибут class которого имеет значение "someClass", то объект OpenLayers.Style будет выглядеть следующим образом:

Код: Выделить всё

var myStyle = new OpenLayers.Style({
    // this is the base symbolizer
    fillColor: "red"
}, {
    rules: [
        new OpenLayers.Rule({
            filter: new OpenLayers.Filter.Comparison({
                type: OpenLayers.Filter.Comparison.EQUAL_TO,
                property: "class",
                value: "someClass"
            }),
            symbolizer: {
                fillColor: "blue",
                strokeWidth: 1,
                strokeColor: "olive"
            }
        }),
        new OpenLayers.Rule({elseFilter: true})
    ]
}); 

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

OpenLayers.StyleMap

CSS позволяет использовать в селекторах псевдо классы. В OpenLayers нечто подобное реализовано через концепцию "render intent". "render intent" - это набор различных состояний объектов, которым можно поставить в соответствие объект OpenLayers.Style. Достигается это за счёт использования объекта OpenLayers.StyleMap:

Код: Выделить всё

var mystyleMap = new OpenLayers.StyleMap({
    "default": myStyle,
    "select": new OpenLayers.Style({
        fillColor: "fuchsia"
    })
}); 

В данном примере описаны два значения "render intent" - "default" (обычное состояние объекта) отрисовывается стилем myStyle, описанным выше и "select" - стиль выделенного объекта. Пример использования описаных стилей на реальном слое:

Код: Выделить всё

var buildings = new OpenLayers.Layer.Vector("Buildings",{styleMap:mystyleMap}) 

[Mavka]

все элементы класса ".someClass"

Маленькая опечатка - точку нужно убрать, просто "someClass" (в оригинале ее нет).
В CSS есть два типа селекторов: по классу (с точкой) и по id (с решеткой):

Код: Выделить всё

.someClass {
    ...
}
#someDiv {
    ...
} 

Соответственно элементы отмечаются:

Код: Выделить всё

<a class="someClass">anything</a>
<div id="someDiv">anything</div> 

[Denis Rykov]

Спасибо, что заметили, исправил.