diff options
Diffstat (limited to 'misc/openlayers/examples/intersects.html')
| -rw-r--r-- | misc/openlayers/examples/intersects.html | 193 |
1 files changed, 193 insertions, 0 deletions
diff --git a/misc/openlayers/examples/intersects.html b/misc/openlayers/examples/intersects.html new file mode 100644 index 0000000..31bdee0 --- /dev/null +++ b/misc/openlayers/examples/intersects.html @@ -0,0 +1,193 @@ +<!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>Geometry Intersections</title> + <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> + <!--[if lte IE 6]> + <link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css"> + <![endif]--> + <link rel="stylesheet" href="style.css" type="text/css"> + <style type="text/css"> + html, body { + margin: 0; + padding: 1em; + font: 0.9em Verdana, Arial, sans serif; + } + input, select, textarea { + font: 0.9em Verdana, Arial, sans-serif; + } + h2 { + margin-top: 0.75em; + font-size: 1.6em; + } + #leftcol { + position: absolute; + top: 0; + left: 1em; + padding: 0; + width: 455px; + } + #map { + width: 450px; + height: 225px; + border: 1px solid #ccc; + } + #input { + width: 450px; + } + #text { + font-size: 0.85em; + margin: 1em 0 1em 0; + width: 100%; + height: 10em; + } + #info { + position: relative; + padding: 2em 0; + margin-left: 470px; + } + #features { + font-size: 0.8em; + width: 100%; + height: 200px; + } + #intersections { + font-size: 0.8em; + width: 100%; + height: 200px; + } + p { + margin: 0; + padding: 0.75em 0 0.75em 0; + } + </style> + <script src="../lib/Firebug/firebug.js"></script> + <script src="../lib/OpenLayers.js"></script> + <script type="text/javascript"> + var map, vectors, geojson; + function init(){ + map = new OpenLayers.Map('map'); + vectors = new OpenLayers.Layer.Vector( + "Vector Layer", + {isBaseLayer: true} + ); + + map.addLayers([vectors]); + map.addControl(new OpenLayers.Control.MousePosition()); + + var panel = new OpenLayers.Control.EditingToolbar(vectors); + map.addControl(panel); + + geojson = new OpenLayers.Format.GeoJSON(); + + map.setCenter(new OpenLayers.LonLat(0, 0), 1); + } + + function serialize() { + var str = geojson.write(vectors.features, true); + document.getElementById('features').value = str; + } + + function deserialize() { + var element = document.getElementById('text'); + var features = geojson.read(element.value); + var bounds; + if(features) { + if(features.constructor != Array) { + features = [features]; + } + for(var i=0; i<features.length; ++i) { + if (!bounds) { + bounds = features[i].geometry.getBounds(); + } else { + bounds.extend(features[i].geometry.getBounds()); + } + + } + vectors.addFeatures(features); + map.zoomToExtent(bounds); + var plural = (features.length > 1) ? 's' : ''; + element.value = features.length + ' feature' + plural + ' added' + } else { + element.value = 'Bad input'; + } + } + + function intersect() { + var features = vectors.features; + var feat1, feat2, intersects12, intersects21; + var parts = []; + // reset attributes + for(var i=0; i<features.length; ++i) { + features[i].attributes.intersectsWith = []; + } + for(var i=0; i<features.length-1; ++i) { + feat1 = features[i]; + for(var j=i+1; j<features.length; ++j) { + feat2 = features[j]; + intersects12 = feat1.geometry.intersects(feat2.geometry); + if(intersects12) { + feat1.attributes.intersectsWith.push("f" + j); + parts.push("f" + i + " intersects f" + j + "\n"); + } + intersects21 = feat2.geometry.intersects(feat1.geometry); + if(intersects21) { + feat2.attributes.intersectsWith.push("f" + i); + parts.push("f" + j + " intersects f" + i + "\n"); + } + if(intersects12 != intersects21) { + parts.push("trouble with " + i + " and " + j + "\n"); + } + } + } + if(parts.length > 0) { + document.getElementById("intersections").value = parts.join(""); + } else { + document.getElementById("intersections").value = "no intersections"; + } + } + + // preload images + (function() { + var roots = ["draw_point", "draw_line", "draw_polygon", "pan"]; + var onImages = []; + var offImages = []; + for(var i=0; i<roots.length; ++i) { + onImages[i] = new Image(); + onImages[i].src = "../theme/default/img/" + roots[i] + "_on.png"; + offImages[i] = new Image(); + offImages[i].src = "../theme/default/img/" + roots[i] + "_on.png"; + } + })(); + + </script> + </head> + <body onload="init()"> + <div id="leftcol"> + <h1 id="title">OpenLayers Geometry Intersection Example</h1> + <div id="tags"> + intersection, geometry + </div> + <p id="shortdesc"> + Use of geometry.intersects method for testing geometry intersections. + </p> + <div id="map" class="smallmap"></div> + <div id="input"> + <textarea id="text"></textarea> + <input type="button" value="add feature" onclick="deserialize();" /> + <span id="selected"></span> + </div> + </div> + <div id="info"> + <p>Features</p> + <input type="button" value="refresh" onclick="serialize();"><br> + <textarea id="features"></textarea> + <p>Intersections</p> + <input type="button" value="intersect all" onclick="intersect();"><br> + <textarea id="intersections"></textarea> + </div> + </body> +</html> |