]> dev.renevier.net Git - syp.git/blob - openlayers/examples/intersects.html
when selecting a cluster, zoom until features are detached
[syp.git] / openlayers / examples / intersects.html
1 <html xmlns="http://www.w3.org/1999/xhtml">
2   <head>
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">
7         html, body {
8             margin: 0;
9             padding: 1em;
10             font: 0.9em Verdana, Arial, sans serif;
11         }
12         input, select, textarea {
13             font: 0.9em Verdana, Arial, sans-serif;
14         }
15         h2 {
16             margin-top: 0.75em;
17             font-size: 1.6em;
18         }
19         #leftcol {
20             position: absolute;
21             top: 0;
22             left: 1em;
23             padding: 0;
24             width: 455px;
25         }
26         #map {
27             width: 450px;
28             height: 225px;
29             border: 1px solid #ccc;
30         }
31         #input {
32             width: 450px;
33         }
34         #text {
35             font-size: 0.85em;
36             margin: 1em 0 1em 0;
37             width: 100%;
38             height: 10em;
39         }
40         #info {
41             position: relative;
42             padding: 2em 0;
43             margin-left: 470px;
44         }
45         #features {
46             font-size: 0.8em;
47             width: 100%;
48             height: 200px;
49         }
50         #intersections {
51             font-size: 0.8em;
52             width: 100%;
53             height: 200px;
54         }
55         p {
56             margin: 0;
57             padding: 0.75em 0 0.75em 0;
58         }
59     </style>
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;
64         function init(){
65             map = new OpenLayers.Map('map');
66             vectors = new OpenLayers.Layer.Vector(
67                 "Vector Layer",
68                 {isBaseLayer: true}
69             );
70
71             map.addLayers([vectors]);
72             map.addControl(new OpenLayers.Control.MousePosition());
73             
74             var panel = new OpenLayers.Control.EditingToolbar(vectors);
75             map.addControl(panel);
76
77             geojson = new OpenLayers.Format.GeoJSON();
78             
79             map.setCenter(new OpenLayers.LonLat(0, 0), 1);
80         }
81         
82         function serialize() {
83             var str = geojson.write(vectors.features, true);
84             document.getElementById('features').value = str;
85         }
86
87         function deserialize() {
88             var element = document.getElementById('text');
89             var features = geojson.read(element.value);
90             var bounds;
91             if(features) {
92                 if(features.constructor != Array) {
93                     features = [features];
94                 }
95                 for(var i=0; i<features.length; ++i) {
96                     if (!bounds) {
97                         bounds = features[i].geometry.getBounds();
98                     } else {
99                         bounds.extend(features[i].geometry.getBounds());
100                     }
101                     
102                 }
103                 vectors.addFeatures(features);
104                 map.zoomToExtent(bounds);
105                 var plural = (features.length > 1) ? 's' : '';
106                 element.value = features.length + ' feature' + plural + ' added'
107             } else {
108                 element.value = 'Bad input';
109             }
110         }
111         
112         function intersect() {
113             var features = vectors.features;
114             var feat1, feat2, intersects12, intersects21;
115             var parts = [];
116             // reset attributes
117             for(var i=0; i<features.length; ++i) {
118                 features[i].attributes.intersectsWith = [];
119             }
120             for(var i=0; i<features.length-1; ++i) {
121                 feat1 = features[i];
122                 for(var j=i+1; j<features.length; ++j) {
123                     feat2 = features[j];
124                     intersects12 = feat1.geometry.intersects(feat2.geometry);
125                     if(intersects12) {
126                         feat1.attributes.intersectsWith.push("f" + j);
127                         parts.push("f" + i + " intersects f" + j + "\n");
128                     }
129                     intersects21 = feat2.geometry.intersects(feat1.geometry);
130                     if(intersects21) {
131                         feat2.attributes.intersectsWith.push("f" + i);
132                         parts.push("f" + j + " intersects f" +  i + "\n");
133                     }
134                     if(intersects12 != intersects21) {
135                         parts.push("trouble with " + i + " and " + j + "\n");
136                     }
137                 }
138             }
139             if(parts.length > 0) {
140                 document.getElementById("intersections").value = parts.join("");
141             } else {
142                 document.getElementById("intersections").value = "no intersections";
143             }
144         }
145
146         // preload images
147         (function() {
148             var roots = ["draw_point", "draw_line", "draw_polygon", "pan"];
149             var onImages = [];
150             var offImages = [];
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";
156             }
157         })();
158
159     </script>
160   </head>
161   <body onload="init()">
162     <div id="leftcol">
163         <h1 id="title">OpenLayers Geometry Intersection Example</h1>
164         <p id="shortdesc">
165             Use of geometry.intersects method for testing geometry intersections.
166         </p>
167         <div id="map" class="smallmap"></div>
168         <div id="input">
169             <textarea id="text"></textarea> 
170             <input type="button" value="add feature" onclick="deserialize();" />
171             <span id="selected"></span>
172         </div>
173     </div>
174     <div id="info">
175         Features
176         <input type="button" value="refresh" onclick="serialize();" /><br />
177         <textarea id="features"></textarea>
178         Intersections
179         <input type="button" value="intersect all" onclick="intersect();" /><br />
180         <textarea id="intersections"></textarea>
181     </div>
182   </body>
183 </html>