openlayers/examples/modify-feature.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>Modify Feature</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         #controls {
   8             width: 512px;
   9         }
  10         #controlToggle {
  11             padding-left: 1em;
  12         }
  13         #controlToggle li {
  14             list-style: none;
  15         }
  16     </style>
  17     <script src="../lib/Firebug/firebug.js"></script>
  18     <script src="../lib/OpenLayers.js"></script>
  19     <script type="text/javascript">
  20         var map, vectors, controls;
  21         function init(){
  22             map = new OpenLayers.Map('map');
  23             var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
  24                 "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});
  25             OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
  26             vectors = new OpenLayers.Layer.Vector("Vector Layer");
  27
  28             map.addLayers([wms, vectors]);
  29             map.addControl(new OpenLayers.Control.LayerSwitcher());
  30             map.addControl(new OpenLayers.Control.MousePosition());
  31
  32             function report(event) {
  33                 OpenLayers.Console.log(event.type, event.feature ? event.feature.id : event.components);
  34             }
  35             vectors.events.on({
  36                 "beforefeaturemodified": report,
  37                 "featuremodified": report,
  38                 "afterfeaturemodified": report,
  39                 "vertexmodified": report,
  40                 "sketchmodified": report,
  41                 "sketchstarted": report,
  42                 "sketchcomplete": report
  43             });
  44             controls = {
  45                 point: new OpenLayers.Control.DrawFeature(vectors,
  46                             OpenLayers.Handler.Point),
  47                 line: new OpenLayers.Control.DrawFeature(vectors,
  48                             OpenLayers.Handler.Path),
  49                 polygon: new OpenLayers.Control.DrawFeature(vectors,
  50                             OpenLayers.Handler.Polygon),
  51                 regular: new OpenLayers.Control.DrawFeature(vectors,
  52                             OpenLayers.Handler.RegularPolygon,
  53                             {handlerOptions: {sides: 5}}),
  54                 modify: new OpenLayers.Control.ModifyFeature(vectors)
  55             };
  56
  57             for(var key in controls) {
  58                 map.addControl(controls[key]);
  59             }
  60
  61             map.setCenter(new OpenLayers.LonLat(0, 0), 3);
  62             document.getElementById('noneToggle').checked = true;
  63         }
  64
  65         function update() {
  66             // reset modification mode
  67             controls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
  68             var rotate = document.getElementById("rotate").checked;
  69             if(rotate) {
  70                 controls.modify.mode |= OpenLayers.Control.ModifyFeature.ROTATE;
  71             }
  72             var resize = document.getElementById("resize").checked;
  73             if(resize) {
  74                 controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE;
  75                 var keepAspectRatio = document.getElementById("keepAspectRatio").checked;
  76                 if (keepAspectRatio) {
  77                     controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
  78                 }
  79             }
  80             var drag = document.getElementById("drag").checked;
  81             if(drag) {
  82                 controls.modify.mode |= OpenLayers.Control.ModifyFeature.DRAG;
  83             }
  84             if (rotate || drag) {
  85                 controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE;
  86             }
  87             var sides = parseInt(document.getElementById("sides").value);
  88             sides = Math.max(3, isNaN(sides) ? 0 : sides);
  89             controls.regular.handler.sides = sides;
  90             var irregular =  document.getElementById("irregular").checked;
  91             controls.regular.handler.irregular = irregular;
  92         }
  93
  94         function toggleControl(element) {
  95             for(key in controls) {
  96                 var control = controls[key];
  97                 if(element.value == key && element.checked) {
  98                     control.activate();
  99                 } else {
 100                     control.deactivate();
 101                 }
 102             }
 103         }
 104
 105     </script>
 106   </head>
 107   <body onload="init()">
 108     <h1 id="title">OpenLayers Modify Feature Example</h1>
 109     <div id="shortdesc">A demonstration of the ModifyFeature control for editing vector features.</div>
 110     <div id="map" class="smallmap"></div>
 111     <div id="controls">
 112         <ul id="controlToggle">
 113             <li>
 114                 <input type="radio" name="type" value="none" id="noneToggle"
 115                        onclick="toggleControl(this);" checked="checked" />
 116                 <label for="noneToggle">navigate</label>
 117             </li>
 118             <li>
 119                 <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" />
 120                 <label for="pointToggle">draw point</label>
 121             </li>
 122             <li>
 123                 <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
 124                 <label for="lineToggle">draw line</label>
 125             </li>
 126             <li>
 127                 <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
 128                 <label for="polygonToggle">draw polygon</label>
 129             </li>
 130             <li>
 131                 <input type="radio" name="type" value="regular" id="regularToggle" onclick="toggleControl(this);" />
 132                 <label for="regularToggle">draw regular polygon</label>
 133                 <label for="sides"> - sides</label>
 134                 <input id="sides" type="text" size="2" maxlength="2"
 135                        name="sides" value="5" onchange="update()" />
 136                 <ul>
 137                     <li>
 138                         <input id="irregular" type="checkbox"
 139                                name="irregular" onchange="update()" />
 140                         <label for="irregular">irregular</label>
 141                     </li>
 142                 </ul>
 143             </li>
 144             <li>
 145                 <input type="radio" name="type" value="modify" id="modifyToggle"
 146                        onclick="toggleControl(this);" />
 147                 <label for="modifyToggle">modify feature</label>
 148                 <ul>
 149                     <li>
 150                         <input id="rotate" type="checkbox"
 151                                name="rotate" onchange="update()" />
 152                         <label for="rotate">allow rotation</label>
 153                     </li>
 154                     <li>
 155                         <input id="resize" type="checkbox"
 156                                name="resize" onchange="update()" />
 157                         <label for="resize">allow resizing</label>
 158                         (<input id="keepAspectRatio" type="checkbox"
 159                                name="keepAspectRatio" onchange="update()" checked="checked" />
 160                         <label for="keepAspectRatio">keep aspect ratio</label>)
 161                     </li>
 162                     <li>
 163                         <input id="drag" type="checkbox"
 164                                name="drag" onchange="update()" />
 165                         <label for="drag">allow dragging</label>
 166                     </li>
 167                 </ul>
 168             </li>
 169         </ul>
 170     </div>
 171   </body>
 172 </html>