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>