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
89
90
91
92
93
94
95
96
97
98
99
100
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>OpenLayers StyleMap</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init() {
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}
);
// Create 50 random features, and give them a "type" attribute that
// will be used to style them by size.
var features = new Array(50);
for (var i=0; i<features.length; i++) {
features[i] = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(
(360 * Math.random()) - 180, (180 * Math.random()) - 90
), {
type: 5 + parseInt(5 * Math.random())
}
);
}
// Create a styleMap to style your features for two different
// render intents. The style for the 'default' render intent will
// be applied when the feature is first drawn. The style for the
// 'select' render intent will be applied when the feature is
// selected.
var myStyles = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
pointRadius: "${type}", // sized according to type attribute
fillColor: "#ffcc66",
strokeColor: "#ff9933",
strokeWidth: 2,
graphicZIndex: 1
}),
"select": new OpenLayers.Style({
fillColor: "#66ccff",
strokeColor: "#3399ff",
graphicZIndex: 2
})
});
// Create a vector layer and give it your style map.
var points = new OpenLayers.Layer.Vector("Points", {
styleMap: myStyles,
rendererOptions: {zIndexing: true}
});
points.addFeatures(features);
map.addLayers([wms, points]);
// Create a select feature control and add it to the map.
var select = new OpenLayers.Control.SelectFeature(points, {hover: true});
map.addControl(select);
select.activate();
map.setCenter(new OpenLayers.LonLat(0, 0), 1);
}
</script>
</head>
<body onload="init()">
<h1 id="title">StyleMap Example</h1>
<div id="tags">
vector, feature, stylemap, light
</div>
<p id="shortdesc">
Shows how to use a StyleMap to style features with rule based styling.
A style map references one or more OpenLayers.Style objects. These
OpenLayers.Style objects are collections of OpenLayers.Rule objects
that determine how features are styled. An OpenLayers.Rule object
combines an OpenLayers.Filter object with a symbolizer. A filter is used
to determine whether a rule applies for a given feature, and a symbolizer
is used to draw the feature if the rule applies.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>A style map is used with vector layers to define styles for various
rendering intents. The style map used here has styles defined for the
"default" and "select" rendering intents. This map also has an active
select feature control. When you hover over features, they are selected
and drawn with the style corresponding the the "select" render intent.
</p>
</div>
</body>
</html>
|
