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
|
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simplify a LineString geometry</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<style type="text/css">
#map, #map-simplify {
height: 400px;
width: 400px;
margin: 5px !important;
float: left;
}
#info {
width: 300px;
float: left;
}
#docs {
clear: both;
}
</style>
</head>
<body>
<h1 id="title">Simplify a LineString geometry</h1>
<div id="tags">
Douglas-Peucker, Douglas, Peucker, Peuker, tolerance
</div>
<p id="shortdesc">
Shows the usage of the method "simplify" that implements
the Douglas-Peucker algorithm to remove "insignificant"
vertices from LineString geometries.
</p>
<div id="control-simplify">
<label for="tolerance">Tolerance factor:</label>
<input name="tolerance" id="tolerance" type="number" min="0" max="1" step="0.02" value="0.1">
<input type="button" id="simplify" value="Simplify LineString">
<input type="button" id="animation" value="Start animation">
</div>
<div id="map" class="smallmap">
</div>
<div id="map-simplify" class="smallmap">
</div>
<div id="info">
</div>
<div id="docs">
<p>
Instances of OpenLayers.Geometry.LineString have a method simplify,
that can be used to simplify linestring geometries.
Simplification sometimes is useful to enhance the perfomance of
vector rendering or to reduce complexity of geometries. This
might be especially handy when viewing geometries a small
scales.
</p>
<p>
OpenLayers.Geometry.LineString::simplify is a recursive
implementation of the famous Douglas-Peucker algorithm. It is
controlled by a tolerance factor that defines the threshold for
vertices to be considered "insignificant" for the
general structure of the geometry.
</p>
<p>
The LineString on the left map can be simplified according to
the tolerance value one enters in the form-field above the maps.
Use a value between 0 and 1 for best results. If you navigate
the left map, the right map will show the same location to make
it easier to spot the differeces between the LineStrings.
</p>
<p>
You can also use the button "Start animation" to get
results for increasing tolerance-factors from 0.02 to 1.0. The
animation can be paused by clicking on the button "Stop
animation".
</p>
<p>
The LineString represents a part of the coastline of
<a href="http://www.openstreetmap.org/?lat=54.7309684753418&lon=83.1809234619141&zoom=11">this
place southeast of Novosibirsk in Russia</a> — found via
<a href="http://ryba4.com/python/ramer-douglas-peucker">an
example implementation of the algorithm in python</a>.
</p>
<p>
For a detailled explanation of the algorithm see
<a href="http://en.wikipedia.org/wiki/Douglas-Peucker_algorithm">the
Wikipedia article</a> or the original publication: David Douglas
& Thomas Peucker, "Algorithms for the reduction of the
number of points required to represent a digitized line or its
caricature", The Canadian Cartographer 10(2), 112-122 (1973)
(<a href="http://dx.doi.org/10.3138/FM57-6770-U75U-7727">DOI:
10.3138/FM57-6770-U75U-7727</a>).
</p>
<p>See <a href="simplify-linestring.js">simplify-linestring.js</a>
for the source code of this example.</p>
</div>
<script type="text/javascript" src="../lib/OpenLayers.js">
</script>
<script type="text/javascript" src="./simplify-linestring.js">
</script>
</body>
</html>
|
