A vektoros elemeink megjelenését különféle stílusbeállításokkal szabályozhatjuk.
A legcélszerűbb megoldás a réteg létrehozásakor beállítani az alapértelmezett stílust
(a beállításokat tartalmazó objektum style tulajdonságaként); ekkor minden olyan feature,
aminek nem adunk saját stílust, ezt a beállítást fogja használni.
A stílusokról részletesen: http://docs.openlayers.org/library/feature_styling.html
A stílusobjektumok különféle beállításokat tartalmazhatnak attól függően, hogy pontszerű, vonalas, vagy felületi elemekre vonatkoznak. Egy pont esetében maga a jel lehet valamilyen egyszerű geometriai forma, vagy egy kép. Az elsőre egy példa:
{
graphicName:"square",
pointRadius:10,
strokeColor:"red",
strokeWidth:2,
strokeOpacity: 1,
fillOpacity:0.1,
fillColor:"rgb(255,100,100)"
}
A graphicName tulajdonság értéke lehet "square", "circle", "triangle", "star", "cross" vagy "x", de lehetőség van saját vektoros ábra definiálására is.
Lásd: http://dev.openlayers.org/examples/graphic-name.html.
A pointRadius értéke adja meg az ábra méretét, a többi tulajdonság neve pedig magáért beszél. Kép esetén a legfontosabb beállítások:
{
externalGraphic:"ncs.png",
pointRadius:20,
fillOpacity:0.5
}
Az „externalGraphic” tulajdonságban adjuk meg a kép url-jét. Képként célszerű olyan ikont használni, amelynek háttere átlátszó. Általában GIF vagy PNG képeket szokás használni, de lehet akár SVG-t is (a modern böngészők ezt is támogatják).
Ha egyszerű stílusok helyett OpenLayers.StyleMap objektumot használunk, akkor további lehetőségeink is nyílnak. Az egyes stíluselemek nem csak fix értéket kaphatnak, de a vektoros elem valamelyik attribútumának értékét is. Ezt elsősorban az eddig nem említett „label” tulajdonságnál szokás felhasználni, de a jel színét, méretét is vehetjük az attribútumok közül. Fontos, hogy ilyenkor a rétegnek nem a „style”, hanem a „styleMap” tulajdonságát kell beállítani.
var telep = new OpenLayers.Layer.Vector( "települések",
{
isBaseLayer: false,
projection: 'EPSG:4326',
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP(
{
url: "data/telep.geojson",
format: new OpenLayers.Format.GeoJSON()
}),
styleMap: new OpenLayers.StyleMap({
graphicName: 'circle',
pointRadius: 5,
strokeColor: 'red',
fillOpacity: 0,
fontSize: 14,
label: "${nev}",
labelAlign:"lc",
labelXOffset:8
})
});
Példa: települések megjelenítése GeoJSON fájlból.
Kis bonyolítással az attribútumértékek közvetlen felhasználása helyett definiálhatunk tetszőleges függvényt is, ami az attribútumértékeken alapul.
Ezt a függvényt a Rula vagy az azt alkalmazó Style context objektumában kell definiálni, és a stílusszabályoknál ugyanúgy lehet rá hivatkozni, mint a normál attribútumokra.
Fontos, hogy ehhez külön definiálnunk kell egy Style vagy egy Rule (lásd később) objektumot.
Példa: települések megjelenítése népességtől függő méretű karikákkal.
Arra is lehetőségünk van, hogy a stílusokat különféle szabályokhoz kössük; akár a megjelenítendő elem attribútumaitól, akár az aktuális méretaránytól függően. Ekkor OpenLayers.Rule (szabály) objektumokat kell létrehoznunk, és ezeket összefogni egy OpenLayers.Style objektummal.
Egy stílusszabály deklarálása több részből áll. Mindenképpen megadunk egy symbolizer objektumot, amiben a színeket, vonalvastagságokat stb. definiáljuk.
Ezen kívül megadhatunk valmilyen méretarány-tartományt (minScaleDenominator és/vagy maxScaleDenominator) és/vagy egy szűrőfeltételt (filter vagy elsefilter).
A szabály csak akkor lesz a megjelenítésnél alkalmazva, ha a térkép aktuális méretaránya a megadott tartományba esik és/vagy a szűrőfeltételnek megfelel az ábrázolandó feature.
Példa:
var legkisebbRule=new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: "<",
property: 'nepesseg',
value: 5000
}),
maxScaleDenominator: 500000,
symbolizer: {
graphicName: 'circle',
pointRadius:2,
fillOpacity:0,
strokeColor: "black",
label:"${nev}",
labelAlign:"lc",
labelXOffset:5,
fontColor:"blue",
labelOutlineColor:"white",
labelOutlineWidth:3
}
});
var kisebbRule=new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: "..",
property: 'nepesseg',
lowerBoundary: 5000,
upperBoundary: 50000
}),
maxScaleDenominator: 1500000,
symbolizer: {
graphicName: 'circle',
pointRadius:3,
fillOpacity:0.5,
label:"${nev}",
labelAlign:"lc",
labelXOffset:5,
fontColor:"blue",
labelOutlineColor:"white",
labelOutlineWidth:3
}
});
var nagyRule=new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.GREATER_THAN,
property: 'nepesseg',
value: 50000
}),
symbolizer: {
graphicName: 'circle',
pointRadius:5,
fillColor: "red",
fillOpacity:0.5,
strokeColor: "black",
label:"${nev}",
labelAlign:"lc",
labelXOffset:7,
fontColor:"blue",
labelOutlineColor:"white",
labelOutlineWidth:3
}
});
var telepStyle=new OpenLayers.Style(null,{
rules: [nagyRule,kisebbRule,legkisebbRule]
})
Az így létrehozott stílust a layer létrehozásakor StyleMap tulajdonságnál használhatjuk.