TODO:

•  http://doc.openlayers.org/library/feature_styling.html: Custom Rules / 'temporary' / Style Properties
•  The OpenLayers Styles Framework
• Styled Layer Descriptor (SLD) Example - using of SLD
•  Labels for vector features
• Marker Shadows using Background Graphics/Z-Indexes
• Z-Index/Y-Order Example

Стили

При создании слоя, основанного на классе Vector, можно передать параметр 'styleMap'.

var layer = new OpenLayers.Layer.Vector('Points', {
	styleMap: new OpenLayers.StyleMap(style)
});

Его значением должен быть набор стилей - OpenLayers.StyleMap, в котором содержатся экземпляры OpenLayers.Style. Начнем с создания одного простого стиля для точечного слоя:

var mystyle = new OpenLayers.StyleMap({
	"default": new OpenLayers.Style({
		pointRadius: 4,
		fillColor: "#ffcc66",
		strokeColor: "#ff9933",
		strokeWidth: 1
	})
});

Параметры могут быть переменными. Допустим, слой WFS содержит поле 'size' [не забудьте при создании слоя указать 'extractAttributes: true'], которое определяет размер точки на карте. Тогда достаточно изменить значение pointRadius на:

		pointRadius: "${size}",

Например, такая техника используется в StyleMap Example.

Контекст

Если же зависимость более сложная, то можно определить собственную функцию. Раскрасим точки в зависимости от значений поля 'type':

var mycontext = {
	getColor: function(feature) {
		if (feature.attributes["type"] == 0)
			return "red";
		else
			return "cyan";
	}
};

И при создании стиля укажем на этот контекст:

var mystyle = new OpenLayers.StyleMap({
	"default": new OpenLayers.Style(
		{pointRadius: 3, fillColor: "${getColor}"},
		{context: mycontext}
	)
});

Пример: Feature Styles Example.

Символы

Для точечного слоя в OpenLayers предусмотрены стандартные символы - круг, треугольник, звезда и т.п. Задаются в параметре graphicName со стандартным значением - "circle". Полный список встроенных символов: "star", "cross", "x", "square", "triangle", "circle".

var mystyle = new OpenLayers.StyleMap({
	"default": new OpenLayers.Style({
		graphicName: "star",
		pointRadius: 10,
		strokeColor: "fuchsia",
		strokeWidth: 2,
		fillColor: "lime",
	})
});

Можно создать свой символ. Например, молния:

OpenLayers.Renderer.symbol.lightning = [0,0, 4,2, 6,0, 10,5, 6,3, 4,5, 0,0];
var mystyle = new OpenLayers.StyleMap({
	"default": new OpenLayers.Style({
		graphicName: "lightning"
	})
});

Пример: Named Graphics Example.

В более сложных случаях, можно подключить изображение из внешнего файла:

var mystyle = new OpenLayers.StyleMap({
	"default": new OpenLayers.Style({
		externalGraphic: "./img/marker.png",
		graphicHeight: 20,
		graphicYOffset: -19
	})
});

Дополнительные параметры можно почерпнуть в примере Rotation Style Example.

Уникальные значения

В развитие предыдущего раздела зададим различные символы в зависимости от поля 'type'. Опишем общую часть стиля:

var mystyle = new OpenLayers.StyleMap({
	"default": new OpenLayers.Style({
		graphicHeight: 20,
		graphicYOffset: -19
	})
});

а вариантную часть зададим так:

var lookup = {
	0: {externalGraphic: "./img/marker.png"},
	3: {externalGraphic: "./img/marker-green.png"},
	5: {externalGraphic: "./img/marker-blue.png"}
}

и объединим:

mystyle.addUniqueValueRules("default", "type", lookup);

Обратите внимание, что элементы со значениями type равными 1, 2, 4 не будут отображены вообще. Подробнее - Unique Value Styles Example.

Select

Я уже упоминал, что OpenLayers.StyleMap - это набор стилей. Но до сих пор мы использовали только один - "default". Второй стиль также имеет строго определненное название - "select". Он используется, если активирован элемент управления OpenLayers.Control.SelectFeature. При наведении указателя мыши на объект, он меняет стиль отображения с "default" на "select". Подробнее, смотрите  Векторные слои / Взаимодействие.

Заключение

Полный список параметров для OpenLayers.Style приведен в  OpenLayers.Feature.Vector.