1 <html xmlns="http://www.w3.org/1999/xhtml">
3 <title>Geometry Intersections</title>
4 <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
5 <link rel="stylesheet" href="style.css" type="text/css" />
6 <style type="text/css">
10 font: 0.9em Verdana, Arial, sans serif;
12 input, select, textarea {
13 font: 0.9em Verdana, Arial, sans-serif;
29 border: 1px solid #ccc;
57 padding: 0.75em 0 0.75em 0;
60 <script src="../lib/Firebug/firebug.js"></script>
61 <script src="../lib/OpenLayers.js"></script>
62 <script type="text/javascript">
63 var map, vectors, geojson;
65 map = new OpenLayers.Map('map');
66 vectors = new OpenLayers.Layer.Vector(
71 map.addLayers([vectors]);
72 map.addControl(new OpenLayers.Control.MousePosition());
74 var panel = new OpenLayers.Control.EditingToolbar(vectors);
75 map.addControl(panel);
77 geojson = new OpenLayers.Format.GeoJSON();
79 map.setCenter(new OpenLayers.LonLat(0, 0), 1);
82 function serialize() {
83 var str = geojson.write(vectors.features, true);
84 document.getElementById('features').value = str;
87 function deserialize() {
88 var element = document.getElementById('text');
89 var features = geojson.read(element.value);
92 if(features.constructor != Array) {
93 features = [features];
95 for(var i=0; i<features.length; ++i) {
97 bounds = features[i].geometry.getBounds();
99 bounds.extend(features[i].geometry.getBounds());
103 vectors.addFeatures(features);
104 map.zoomToExtent(bounds);
105 var plural = (features.length > 1) ? 's' : '';
106 element.value = features.length + ' feature' + plural + ' added'
108 element.value = 'Bad input';
112 function intersect() {
113 var features = vectors.features;
114 var feat1, feat2, intersects12, intersects21;
117 for(var i=0; i<features.length; ++i) {
118 features[i].attributes.intersectsWith = [];
120 for(var i=0; i<features.length-1; ++i) {
122 for(var j=i+1; j<features.length; ++j) {
124 intersects12 = feat1.geometry.intersects(feat2.geometry);
126 feat1.attributes.intersectsWith.push("f" + j);
127 parts.push("f" + i + " intersects f" + j + "\n");
129 intersects21 = feat2.geometry.intersects(feat1.geometry);
131 feat2.attributes.intersectsWith.push("f" + i);
132 parts.push("f" + j + " intersects f" + i + "\n");
134 if(intersects12 != intersects21) {
135 parts.push("trouble with " + i + " and " + j + "\n");
139 if(parts.length > 0) {
140 document.getElementById("intersections").value = parts.join("");
142 document.getElementById("intersections").value = "no intersections";
148 var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
151 for(var i=0; i<roots.length; ++i) {
152 onImages[i] = new Image();
153 onImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
154 offImages[i] = new Image();
155 offImages[i].src = "../theme/default/img/" + roots[i] + "_on.png";
161 <body onload="init()">
163 <h1 id="title">OpenLayers Geometry Intersection Example</h1>
165 Use of geometry.intersects method for testing geometry intersections.
167 <div id="map" class="smallmap"></div>
169 <textarea id="text"></textarea>
170 <input type="button" value="add feature" onclick="deserialize();" />
171 <span id="selected"></span>
176 <input type="button" value="refresh" onclick="serialize();" /><br />
177 <textarea id="features"></textarea>
179 <input type="button" value="intersect all" onclick="intersect();" /><br />
180 <textarea id="intersections"></textarea>