1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
// create some sample features
var Feature = OpenLayers.Feature.Vector;
var Geometry = OpenLayers.Geometry;
var features = [
new Feature(new Geometry.Point(-90, 45)),
new Feature(
new Geometry.Point(0, 45),
{cls: "one"}
),
new Feature(
new Geometry.Point(90, 45),
{cls: "two"}
),
new Feature(
Geometry.fromWKT("LINESTRING(-110 -60, -80 -40, -50 -60, -20 -40)")
),
new Feature(
Geometry.fromWKT("POLYGON((20 -20, 110 -20, 110 -80, 20 -80, 20 -20), (40 -40, 90 -40, 90 -60, 40 -60, 40 -40))")
)
];
// create rule based styles
var Rule = OpenLayers.Rule;
var Filter = OpenLayers.Filter;
var style = new OpenLayers.Style({
pointRadius: 10,
strokeWidth: 3,
strokeOpacity: 0.7,
strokeColor: "navy",
fillColor: "#ffcc66",
fillOpacity: 1
}, {
rules: [
new Rule({
filter: new Filter.Comparison({
type: "==",
property: "cls",
value: "one"
}),
symbolizer: {
externalGraphic: "../img/marker-blue.png"
}
}),
new Rule({
filter: new Filter.Comparison({
type: "==",
property: "cls",
value: "two"
}),
symbolizer: {
externalGraphic: "../img/marker-green.png"
}
}),
new Rule({
elseFilter: true,
symbolizer: {
graphicName: "circle"
}
})
]
});
var layer = new OpenLayers.Layer.Vector(null, {
styleMap: new OpenLayers.StyleMap({
"default": style,
select: {
fillColor: "red",
pointRadius: 13,
strokeColor: "yellow",
strokeWidth: 3
}
}),
isBaseLayer: true,
renderers: ["Canvas"]
});
layer.addFeatures(features);
var map = new OpenLayers.Map({
div: "map",
layers: [layer],
center: new OpenLayers.LonLat(0, 0),
zoom: 0
});
var select = new OpenLayers.Control.SelectFeature(layer);
map.addControl(select);
select.activate();
|
