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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<!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 Fill, Stroke, and Graphic Example</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" type="text/javascript"></script>
<script type="text/javascript">
var map;
function init() {
map = new OpenLayers.Map('map');
var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
// allow testing of specific renderers via "?renderer=Canvas", etc
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap: new OpenLayers.StyleMap({
'default': new OpenLayers.Style(null, {
rules: [
new OpenLayers.Rule({
symbolizer: {
graphic: false,
label: "Label for invisible point",
labelSelect: true,
fontStyle: "italic"
},
filter: new OpenLayers.Filter.Comparison({
type: "==",
property: "topic",
value: "point_invisible"
})
}),
new OpenLayers.Rule({
symbolizer: {
stroke: true,
fill: true,
label: "Polygon with stroke and fill defaults"
},
filter: new OpenLayers.Filter.Comparison({
type: "==",
property: "topic",
value: "polygon_defaults"
})
}),
new OpenLayers.Rule({
symbolizer: {
stroke: true,
fill: false,
label: "Point without fill",
labelAlign: "rb",
fontColor: "#ff0000",
fontOpacity: 0.4
},
filter: new OpenLayers.Filter.Comparison({
type: "==",
property: "topic",
value: "point_nofill"
})
})
]
})
}),
renderers: renderer
});
// create a point feature
var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
var pointFeature = new OpenLayers.Feature.Vector(point);
pointFeature.attributes = {
topic: "point_invisible"
};
// create a polygon feature from a linear ring of points
var pointList = [];
for(var p=0; p<6; ++p) {
var a = p * (2 * Math.PI) / 7;
var r = Math.random(1) + 1;
var newPoint = new OpenLayers.Geometry.Point(point.x + 5 + (r * Math.cos(a)),
point.y + 5 + (r * Math.sin(a)));
pointList.push(newPoint);
}
pointList.push(pointList[0]);
var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
var polygonFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Polygon([linearRing]));
polygonFeature.attributes = {
topic: "polygon_defaults"
};
multiFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Collection([
new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(-105,40),
new OpenLayers.Geometry.Point(-95,45)
]),
new OpenLayers.Geometry.Point(-105, 40)
]),
{
topic: "point_nofill"
});
map.addLayer(vectorLayer);
vectorLayer.drawFeature(multiFeature);
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 4);
vectorLayer.addFeatures([pointFeature, polygonFeature, multiFeature]);
var select = new OpenLayers.Control.SelectFeature(vectorLayer, {
selectStyle: OpenLayers.Util.extend(
{fill: true, stroke: true},
OpenLayers.Feature.Vector.style["select"])
});
map.addControl(select);
select.activate();
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Example</h1>
<div id="tags">
vector, feature, symbolizer, filter, comparison, labeling, light
</div>
<p id="shortdesc">
Demonstrate fill, stroke, and graphic property of symbolizers.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
This example shows how to use symbolizers with defaults for stroke, fill, and graphic.
This also allows to create labels for a feature without the feature rendered. Click on
the label in the middle to see selection of features with labelSelect set to true.
</div>
</body>
</html>
|
