При настройке символики элементов HTML используются таблицы стилей CSS:
Код: Выделить всё
.someClass {
background-color: blue;
border-width: 1px;
border-color: olive;
}
OpenLayers.Filter
При настройке символики в OpenLayers в качестве селектора выступает фильтр (объект OpenLayers.Filter). Предположим, что вы хотите применить стиль ко всем объектам, имеющим атрибут "someClass", тогда фильтр будет выглядеть следующим образом:
Код: Выделить всё
new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: "class",
value: "someClass"
})
Эквивалент описания стилей CSS в OpenLayers - хэш Symbolizer:
Код: Выделить всё
{
fillColor: "blue",
strokeWidth: 1,
strokeColor: "olive"
}
Объединение 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"
}
})
По аналогии с 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})
]
});
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"
})
});
Код: Выделить всё
var buildings = new OpenLayers.Layer.Vector("Buildings",{styleMap:mystyleMap})