openlayers/examples/snap-split.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>Snapping & Splitting</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         .olControlEditingToolbar .olControlModifyFeatureItemInactive {
   8             background-position: -1px 0px ;
   9         }
  10         .olControlEditingToolbar .olControlModifyFeatureItemActive {
  11             background-position: -1px -23px ;
  12         }
  13         label.head {
  14             font-weight: bold;
  15             padding: 1em 0 0.1em 0;
  16             border-bottom: 1px solid grey;
  17         }
  18         td {
  19             padding: 0.25em 1em;
  20         }
  21         tr.head td {
  22             text-align: center;
  23             font-weight: bold;
  24         }
  25     </style>
  26     <script src="../lib/Firebug/firebug.js"></script>
  27     <script src="../lib/OpenLayers.js"></script>
  28     <script type="text/javascript">
  29
  30         OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
  31
  32         function init() {
  33             initMap();
  34             initUI();
  35         }
  36
  37
  38         var map, draw, modify, snap, split, vectors;
  39         function initMap() {
  40
  41             map = new OpenLayers.Map('map');
  42             var styles = new OpenLayers.StyleMap({
  43                 "default": new OpenLayers.Style(null, {
  44                     rules: [
  45                         new OpenLayers.Rule({
  46                             symbolizer: {
  47                                 "Point": {
  48                                     pointRadius: 5,
  49                                     graphicName: "square",
  50                                     fillColor: "white",
  51                                     fillOpacity: 0.25,
  52                                     strokeWidth: 1,
  53                                     strokeOpacity: 1,
  54                                     strokeColor: "#333333"
  55                                 },
  56                                 "Line": {
  57                                     strokeWidth: 3,
  58                                     strokeOpacity: 1,
  59                                     strokeColor: "#666666"
  60                                 }
  61                             }
  62                         })
  63                     ]
  64                 }),
  65                 "select": new OpenLayers.Style({
  66                     strokeColor: "#00ccff",
  67                     strokeWidth: 4
  68                 }),
  69                 "temporary": new OpenLayers.Style(null, {
  70                     rules: [
  71                         new OpenLayers.Rule({
  72                             symbolizer: {
  73                                 "Point": {
  74                                     pointRadius: 5,
  75                                     graphicName: "square",
  76                                     fillColor: "white",
  77                                     fillOpacity: 0.25,
  78                                     strokeWidth: 1,
  79                                     strokeOpacity: 1,
  80                                     strokeColor: "#333333"
  81                                 },
  82                                 "Line": {
  83                                     strokeWidth: 3,
  84                                     strokeOpacity: 1,
  85                                     strokeColor: "#00ccff"
  86                                 }
  87                             }
  88                         })
  89                     ]
  90                 })
  91             });
  92
  93             // create three vector layers
  94             vectors = new OpenLayers.Layer.Vector("Lines", {
  95                 isBaseLayer: true,
  96                 strategies: [new OpenLayers.Strategy.Fixed()],
  97                 protocol: new OpenLayers.Protocol.HTTP({
  98                     url: "data/roads.json",
  99                     format: new OpenLayers.Format.GeoJSON()
 100                 }),
 101                 styleMap: styles,
 102                 maxExtent: new OpenLayers.Bounds(
 103                     1549471.9221, 6403610.94, 1550001.32545, 6404015.8
 104                 )
 105             });
 106             map.addLayer(vectors);
 107
 108             // configure the snapping agent
 109             snap = new OpenLayers.Control.Snapping({layer: vectors});
 110             map.addControl(snap);
 111             snap.activate();
 112
 113             // configure split agent
 114             split = new OpenLayers.Control.Split({
 115                 layer: vectors,
 116                 source: vectors,
 117                 tolerance: 0.0001,
 118                 eventListeners: {
 119                     aftersplit: function(event) {
 120                         flashFeatures(event.features);
 121                     }
 122                 }
 123             });
 124             map.addControl(split);
 125             split.activate();
 126
 127             // add some editing tools to a panel
 128             var panel = new OpenLayers.Control.Panel({
 129                 displayClass: "olControlEditingToolbar"
 130             });
 131             draw = new OpenLayers.Control.DrawFeature(
 132                 vectors, OpenLayers.Handler.Path,
 133                 {displayClass: "olControlDrawFeaturePoint", title: "Draw Features"}
 134             );
 135             modify = new OpenLayers.Control.ModifyFeature(
 136                 vectors, {displayClass: "olControlModifyFeature", title: "Modify Features"}
 137             );
 138             panel.addControls([
 139                 new OpenLayers.Control.Navigation({title: "Navigate"}),
 140                 draw, modify
 141             ]);
 142             map.addControl(panel);
 143
 144             map.addControl(new OpenLayers.Control.MousePosition());
 145
 146             map.zoomToMaxExtent();
 147         }
 148
 149         function flashFeatures(features, index) {
 150             if(!index) {
 151                 index = 0;
 152             }
 153             var current = features[index];
 154             if(current && current.layer === vectors) {
 155                 vectors.drawFeature(features[index], "select");
 156             }
 157             var prev = features[index-1];
 158             if(prev && prev.layer === vectors) {
 159                 vectors.drawFeature(prev, "default");
 160             }
 161             ++index;
 162             if(index <= features.length) {
 163                 window.setTimeout(function() {flashFeatures(features, index)}, 75);
 164             }
 165         }
 166
 167         /**
 168          * Add behavior to page elements.  This basically lets us set snapping
 169          * target properties with the checkboxes and text inputs.  The checkboxes
 170          * toggle the target node, vertex, or edge (boolean) values.  The
 171          * text inputs set the nodeTolerance, vertexTolerance, or edgeTolerance
 172          * property values.
 173          */
 174         function initUI() {
 175             // add behavior to snap elements
 176             var snapCheck = $("snap_toggle");
 177             snapCheck.checked = true;
 178             snapCheck.onclick = function() {
 179                 if(snapCheck.checked) {
 180                     snap.activate();
 181                     $("snap_options").style.display = "block";
 182                 } else {
 183                     snap.deactivate();
 184                     $("snap_options").style.display = "none";
 185                 }
 186             };
 187             var target, type, tog, tol;
 188             var types = ["node", "vertex", "edge"];
 189             var target = snap.targets[0];
 190             for(var j=0; j<types.length; ++j) {
 191                 type = types[j];
 192                 tog = $("target_" + type);
 193                 tog.checked = target[type];
 194                 tog.onclick = (function(tog, type, target) {
 195                     return function() {target[type] = tog.checked;}
 196                 })(tog, type, target);
 197                 tol = $("target_" + type + "Tolerance");
 198                 tol.value = target[type + "Tolerance"];
 199                 tol.onchange = (function(tol, type, target) {
 200                     return function() {
 201                         target[type + "Tolerance"] = Number(tol.value) || 0;
 202                     }
 203                 })(tol, type, target);
 204             }
 205
 206             // add behavior to split elements
 207             var splitCheck = $("split_toggle");
 208             splitCheck.checked = true;
 209             splitCheck.onclick = function() {
 210                 if(splitCheck.checked) {
 211                     split.activate();
 212                     $("split_options").style.display = "block";
 213                 } else {
 214                     split.deactivate();
 215                     $("split_options").style.display = "none";
 216                 }
 217             };
 218             var edgeCheck = $("edge_toggle");
 219             edgeCheck.checked = split.edge;
 220             edgeCheck.onclick = function() {
 221                 split.edge = edgeCheck.checked;
 222             };
 223
 224             $("clear").onclick = function() {
 225                 modify.deactivate();
 226                 vectors.destroyFeatures();
 227             };
 228
 229         }
 230
 231     </script>
 232   </head>
 233   <body onload="init()">
 234     <h1 id="title">Snapping & Splitting Example</h1>
 235     <div id="shortdesc">A demonstration snapping and splitting while editing vector features.</div>
 236     <div id="map" class="smallmap"></div>
 237     <br/>
 238     <input type="checkbox" id="snap_toggle" />
 239     <label for="snap_toggle" class="head">Enable Snapping</label>
 240     <table id="snap_options">
 241         <tbody>
 242             <tr class="head">
 243                 <td>target</td><td>node</td><td>vertex</td><td>edge</td>
 244             </tr>
 245             <tr>
 246                 <td>roads</td>
 247                 <td><input type="checkbox" id="target_node" /><input id="target_nodeTolerance" type="text" size="3" /></td>
 248                 <td><input type="checkbox" id="target_vertex" /><input id="target_vertexTolerance" type="text" size="3" /></td>
 249                 <td><input type="checkbox" id="target_edge" /><input id="target_edgeTolerance" type="text" size="3" /></td>
 250             </tr>
 251         </tbody>
 252     </table>
 253     <br />
 254     <input type="checkbox" id="split_toggle" />
 255     <label for="split_toggle" class="head">Enable Splitting</label>
 256     <table id="split_options">
 257         <tbody>
 258             <tr>
 259                 <td><label for="edge_toggle">edges split</label></td>
 260                 <td><input type="checkbox" id="edge_toggle" /></td>
 261             </tr>
 262         </tbody>
 263     </table>
 264     <br />
 265     <button id="clear">clear</button> Clear all features.
 266   </body>
 267 </html>