1 | var map; |
---|
2 | |
---|
3 | function init() { |
---|
4 | map = new OpenLayers.Map("map"); |
---|
5 | |
---|
6 | var wms = new OpenLayers.Layer.WMS( |
---|
7 | "OpenLayers WMS", |
---|
8 | "http://vmap0.tiles.osgeo.org/wms/vmap0", |
---|
9 | {layers: "basic"} |
---|
10 | ); |
---|
11 | |
---|
12 | /** |
---|
13 | * Create 50 vector features. Your features would typically be fetched |
---|
14 | * from the server. These are created here to demonstrate a rule based |
---|
15 | * style. The features are given an attribute named "foo". The value |
---|
16 | * of this attribute is an integer that ranges from 0 to 100. |
---|
17 | */ |
---|
18 | var features = new Array(25); |
---|
19 | for (var i=0; i<features.length; i++) { |
---|
20 | features[i] = new OpenLayers.Feature.Vector( |
---|
21 | new OpenLayers.Geometry.Point( |
---|
22 | (340 * Math.random()) - 170, |
---|
23 | (160 * Math.random()) - 80 |
---|
24 | ), { |
---|
25 | foo: 100 * Math.random() | 0 |
---|
26 | } |
---|
27 | ); |
---|
28 | } |
---|
29 | |
---|
30 | /** |
---|
31 | * Here we create a new style object with rules that determine |
---|
32 | * which symbolizer will be used to render each feature. |
---|
33 | */ |
---|
34 | var style = new OpenLayers.Style( |
---|
35 | // the first argument is a base symbolizer |
---|
36 | // all other symbolizers in rules will extend this one |
---|
37 | { |
---|
38 | graphicWidth: 21, |
---|
39 | graphicHeight: 25, |
---|
40 | graphicYOffset: -28, // shift graphic up 28 pixels |
---|
41 | label: "${foo}" // label will be foo attribute value |
---|
42 | }, |
---|
43 | // the second argument will include all rules |
---|
44 | { |
---|
45 | rules: [ |
---|
46 | new OpenLayers.Rule({ |
---|
47 | // a rule contains an optional filter |
---|
48 | filter: new OpenLayers.Filter.Comparison({ |
---|
49 | type: OpenLayers.Filter.Comparison.LESS_THAN, |
---|
50 | property: "foo", // the "foo" feature attribute |
---|
51 | value: 25 |
---|
52 | }), |
---|
53 | // if a feature matches the above filter, use this symbolizer |
---|
54 | symbolizer: { |
---|
55 | externalGraphic: "../img/marker-blue.png" |
---|
56 | } |
---|
57 | }), |
---|
58 | new OpenLayers.Rule({ |
---|
59 | filter: new OpenLayers.Filter.Comparison({ |
---|
60 | type: OpenLayers.Filter.Comparison.BETWEEN, |
---|
61 | property: "foo", |
---|
62 | lowerBoundary: 25, |
---|
63 | upperBoundary: 50 |
---|
64 | }), |
---|
65 | symbolizer: { |
---|
66 | externalGraphic: "../img/marker-green.png" |
---|
67 | } |
---|
68 | }), |
---|
69 | new OpenLayers.Rule({ |
---|
70 | filter: new OpenLayers.Filter.Comparison({ |
---|
71 | type: OpenLayers.Filter.Comparison.BETWEEN, |
---|
72 | property: "foo", |
---|
73 | lowerBoundary: 50, |
---|
74 | upperBoundary: 75 |
---|
75 | }), |
---|
76 | symbolizer: { |
---|
77 | externalGraphic: "../img/marker-gold.png" |
---|
78 | } |
---|
79 | }), |
---|
80 | new OpenLayers.Rule({ |
---|
81 | // apply this rule if no others apply |
---|
82 | elseFilter: true, |
---|
83 | symbolizer: { |
---|
84 | externalGraphic: "../img/marker.png" |
---|
85 | } |
---|
86 | }) |
---|
87 | ] |
---|
88 | } |
---|
89 | ); |
---|
90 | |
---|
91 | // create the layer styleMap that uses the above style for all render intents |
---|
92 | var vector = new OpenLayers.Layer.Vector("Points", { |
---|
93 | styleMap: new OpenLayers.StyleMap(style) |
---|
94 | }); |
---|
95 | vector.addFeatures(features); |
---|
96 | |
---|
97 | map.addLayers([wms, vector]); |
---|
98 | map.setCenter(new OpenLayers.LonLat(0, 0), 1); |
---|
99 | } |
---|