diff options
Diffstat (limited to 'misc/openlayers/examples/simplify-linestring.html')
| -rw-r--r-- | misc/openlayers/examples/simplify-linestring.html | 103 |
1 files changed, 103 insertions, 0 deletions
diff --git a/misc/openlayers/examples/simplify-linestring.html b/misc/openlayers/examples/simplify-linestring.html new file mode 100644 index 0000000..15160a0 --- /dev/null +++ b/misc/openlayers/examples/simplify-linestring.html @@ -0,0 +1,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> |