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
150
151
152
153
154
155
156
157
158
159
160
|
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../../theme/default/style.css" type="text/css" />
<style type="text/css">
#controlToggle li {
list-style: none;
}
#options {
position: relative;
width: 512px;
}
#output {
float: right;
}
/* avoid pink tiles */
.olImageLoadError {
background-color: transparent !important;
}
</style>
<script src="../../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, measureControls;
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.OSM();
map.addLayers([wmsLayer]);
map.setCenter(new OpenLayers.LonLat(0,0), 5);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine({geodesic: true}))
// style the sketch fancy
var sketchSymbolizers = {
"Point": {
pointRadius: 4,
graphicName: "square",
fillColor: "white",
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: "#333333"
},
"Line": {
strokeWidth: 3,
strokeOpacity: 1,
strokeColor: "#666666",
strokeDashstyle: "dash"
},
"Polygon": {
strokeWidth: 2,
strokeOpacity: 1,
strokeColor: "#666666",
fillColor: "white",
fillOpacity: 0.3
}
};
var style = new OpenLayers.Style();
style.addRules([
new OpenLayers.Rule({symbolizer: sketchSymbolizers})
]);
var styleMap = new OpenLayers.StyleMap({"default": style});
measureControls = {
line: new OpenLayers.Control.Measure(
OpenLayers.Handler.Path, {
geodesic: true,
persist: true,
handlerOptions: {
layerOptions: {styleMap: styleMap}
}
}
),
polygon: new OpenLayers.Control.Measure(
OpenLayers.Handler.Polygon, {
geodesic: true,
persist: true,
handlerOptions: {
layerOptions: {styleMap: styleMap}
}
}
)
};
var control;
for(var key in measureControls) {
control = measureControls[key];
control.events.on({
"measure": handleMeasurements,
"measurepartial": handleMeasurements
});
map.addControl(control);
}
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
document.getElementById('noneToggle').checked = true;
}
function handleMeasurements(event) {
var geometry = event.geometry;
var units = event.units;
var order = event.order;
var measure = event.measure;
var element = document.getElementById('output');
var out = "";
if(order == 1) {
out += "measure: " + measure.toFixed(3) + " " + units;
} else {
out += "measure: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
}
element.innerHTML = out;
}
function toggleControl(element) {
for(key in measureControls) {
var control = measureControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Geodesic Measurement & ScaleLine</h1>
<p id="shortdesc">
Tests geodesic measurement of distances and areas against a geodesic ScaleLine.
</p>
<div id="map" style="width: 512px; height: 300px;"></div>
<div id="options">
<div id="output">
</div>
<ul id="controlToggle">
<li>
<input type="radio" name="type" value="none" id="noneToggle"
onclick="toggleControl(this);" checked="checked" />
<label for="noneToggle">navigate</label>
</li>
<li>
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
<label for="lineToggle">measure distance</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
<label for="polygonToggle">measure area</label>
</li>
</ul>
</div>
<p>Zoom in so the ScaleLine shows units in the range of 10-100 km. Measure
the length of the ScaleLine. The result should be approximately the same
as the distance printed on the ScaleLine.</p>
<p>Zoom out so the ScaleLine shows units in the range of 100-500 km. Drag
the map to the South or North and see how the ScaleLine length changes.</p>
</body>
</html>
|
