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
142
143
144
145
146
147
148
149
|
<!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: Vector Features</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;
/*
* Layer style
*/
// we want opaque external graphics and non-opaque internal graphics
var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
layer_style.fillOpacity = 0.2;
layer_style.graphicOpacity = 1;
/*
* Blue style
*/
var style_blue = OpenLayers.Util.extend({}, layer_style);
style_blue.strokeColor = "blue";
style_blue.fillColor = "blue";
style_blue.graphicName = "star";
style_blue.pointRadius = 10;
style_blue.strokeWidth = 3;
style_blue.rotation = 45;
style_blue.strokeLinecap = "butt";
/*
* Green style
*/
var style_green = {
strokeColor: "#00FF00",
strokeWidth: 3,
strokeDashstyle: "dashdot",
pointRadius: 6,
pointerEvents: "visiblePainted",
title: "this is a green line"
};
/*
* Mark style
*/
var style_mark = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
// each of the three lines below means the same, if only one of
// them is active: the image will have a size of 24px, and the
// aspect ratio will be kept
// style_mark.pointRadius = 12;
// style_mark.graphicHeight = 24;
// style_mark.graphicWidth = 24;
// if graphicWidth and graphicHeight are both set, the aspect ratio
// of the image will be ignored
style_mark.graphicWidth = 24;
style_mark.graphicHeight = 20;
style_mark.graphicXOffset = 10; // default is -(style_mark.graphicWidth/2);
style_mark.graphicYOffset = -style_mark.graphicHeight;
style_mark.externalGraphic = "../img/marker.png";
// title only works in Firefox and Internet Explorer
style_mark.title = "this is a test tooltip";
var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
style: layer_style,
renderers: renderer
});
// create a point feature
var point = new OpenLayers.Geometry.Point(-111.04, 45.68);
var pointFeature = new OpenLayers.Feature.Vector(point,null,style_blue);
var point2 = new OpenLayers.Geometry.Point(-105.04, 49.68);
var pointFeature2 = new OpenLayers.Feature.Vector(point2,null,style_green);
var point3 = new OpenLayers.Geometry.Point(-105.04, 49.68);
var pointFeature3 = new OpenLayers.Feature.Vector(point3,null,style_mark);
// create a line feature from a list of points
var pointList = [];
var newPoint = point;
for(var p=0; p<15; ++p) {
newPoint = new OpenLayers.Geometry.Point(newPoint.x + Math.random(1),
newPoint.y + Math.random(1));
pointList.push(newPoint);
}
var lineFeature = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.LineString(pointList),null,style_green);
// 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 + (r * Math.cos(a)),
point.y + (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]));
map.addLayer(vectorLayer);
map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
vectorLayer.addFeatures([pointFeature, pointFeature3, pointFeature2, lineFeature, polygonFeature]);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Drawing Simple Vector Features Example</h1>
<div id="tags">
vector, feature, light
</div>
<p id="shortdesc">
Shows the use of the shows drawing simple vector features, in different styles.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>This example shows drawing simple vector features -- point, line, polygon
in different styles, created 'manually', by constructing the entire style
object, via 'copy', extending the default style object, and by
inheriting the default style from the layer.</p>
<p>It also shows how to use external graphic files for point features
and how to set their size: If either graphicWidth or graphicHeight is set,
the aspect ratio of the image will be respected. If both graphicWidth and
graphicHeight are set, it will be ignored. Alternatively, if graphicWidth
and graphicHeight are omitted, pointRadius will be used to set the size
of the image, which will then be twice the value of pointRadius with the
original aspect ratio.</p>
</div>
</body>
</html>
|
