/
simplify.html
85 lines (83 loc) · 3.86 KB
/
simplify.html
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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
var path = OpenLayers.Util.getParameters()['path'] || "featureserver.cgi/";
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
layer = new OpenLayers.Layer.WFS( "Default lines",
path + "/scribble/all.gml",
{maxfeatures: 50} );
map.addLayer(layer);
layer = new OpenLayers.Layer.WFS( "Simplified Layer",
path + "scribble_simplify/all.gml",
{maxfeatures: 50},{moveTo: localMoveTo});
layer.events.register("loadend", layer, update_point_counts);
map.addLayer(layer);
var c = new OpenLayers.Control.LayerSwitcher()
map.addControl(c);
c.maximizeControl();
map.zoomToMaxExtent();
}
function localMoveTo() {
this.params['process_simplify_tolerance'] = this.map.getResolution() * $("factor").value;
OpenLayers.Layer.WFS.prototype.moveTo.apply(this, arguments);
}
function update_point_counts() {
var o_points = 0;
var simple_points = 0;
for (var i = 0; i < map.layers[1].features.length; i++) {
var feat = map.layers[1].features[i];
switch(feat.geometry.CLASS_NAME) {
case "OpenLayers.Geometry.Point":
o_points += 1;
break;
case "OpenLayers.Geometry.LineString":
o_points += feat.geometry.components.length;
break;
case "OpenLayers.Geometry.Polygon":
o_points += feat.geometry.components[0].components.length;
break;
}
}
for (var i = 0; i < map.layers[2].features.length; i++) {
var feat = map.layers[2].features[i];
switch(feat.geometry.CLASS_NAME) {
case "OpenLayers.Geometry.Point":
simple_points += 1;
break;
case "OpenLayers.Geometry.LineString":
simple_points += feat.geometry.components.length;
break;
case "OpenLayers.Geometry.Polygon":
simple_points += feat.geometry.components[0].components.length;
break;
}
}
$("point_counts").innerHTML = "Original: " + o_points + ", simplified: " + simple_points;
}
</script>
</head>
<body onload="init()">
<h1 id="title">Simplified Layer</h1>
<div id="map" class="smallmap" style="width:50%; height:50%; float:left"></div>
<div style="float:right; width:45%">
<p>To use this demo:
</p>
<ul>
<li>Load a complex shape into your datasource by <a href="index.html?path=/">drawing it</a>.</li>
<li>Copy doc/examples/Simplify.py to your PYTHONPATH.</li>
<li>'touch featureserver.cfg' to reload the config.</li>
<li>Open the Layerswitcher, selected "Simplified Layer" checkbox</li>
<li>Zoom in on your shape, and notice that it is simpler</li>
</ul>
Simplification Factor: <input id="factor" value="4" onchange="map.layers[2].mergeNewParams({'a':'b'})" /> <br />
Simplification factor of '1' should show no visible differences: simplification factor of 2 will be 'twice' as simple, but may show some differences between the simplified shape and the actual shape.
<div id="point_counts"></div>
</div>
</body>
</html>