diff options
Diffstat (limited to 'misc/openlayers/examples/modify-feature.html')
| -rw-r--r-- | misc/openlayers/examples/modify-feature.html | 193 |
1 files changed, 0 insertions, 193 deletions
diff --git a/misc/openlayers/examples/modify-feature.html b/misc/openlayers/examples/modify-feature.html deleted file mode 100644 index cb19858..0000000 --- a/misc/openlayers/examples/modify-feature.html +++ /dev/null @@ -1,193 +0,0 @@ -<!DOCTYPE html> -<html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> - <meta name="apple-mobile-web-app-capable" content="yes"> - <title>Modify Feature</title> - <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> - <link rel="stylesheet" href="style.css" type="text/css"> - <style type="text/css"> - #controls { - width: 512px; - } - #controlToggle { - padding-left: 1em; - } - #controlToggle li { - list-style: none; - } - </style> - <script src="../lib/OpenLayers.js"></script> - <script type="text/javascript"> - var map, vectors, controls; - function init(){ - map = new OpenLayers.Map('map'); - var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS", - "http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'}); - OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2'; - - // allow testing of specific renderers via "?renderer=Canvas", etc - var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; - renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; - - vectors = new OpenLayers.Layer.Vector("Vector Layer", { - renderers: renderer - }); - - map.addLayers([wms, vectors]); - map.addControl(new OpenLayers.Control.LayerSwitcher()); - map.addControl(new OpenLayers.Control.MousePosition()); - - if (console && console.log) { - function report(event) { - console.log(event.type, event.feature ? event.feature.id : event.components); - } - vectors.events.on({ - "beforefeaturemodified": report, - "featuremodified": report, - "afterfeaturemodified": report, - "vertexmodified": report, - "sketchmodified": report, - "sketchstarted": report, - "sketchcomplete": report - }); - } - controls = { - point: new OpenLayers.Control.DrawFeature(vectors, - OpenLayers.Handler.Point), - line: new OpenLayers.Control.DrawFeature(vectors, - OpenLayers.Handler.Path), - polygon: new OpenLayers.Control.DrawFeature(vectors, - OpenLayers.Handler.Polygon), - regular: new OpenLayers.Control.DrawFeature(vectors, - OpenLayers.Handler.RegularPolygon, - {handlerOptions: {sides: 5}}), - modify: new OpenLayers.Control.ModifyFeature(vectors) - }; - - for(var key in controls) { - map.addControl(controls[key]); - } - - map.setCenter(new OpenLayers.LonLat(0, 0), 3); - document.getElementById('noneToggle').checked = true; - } - - function update() { - // reset modification mode - controls.modify.mode = OpenLayers.Control.ModifyFeature.RESHAPE; - var rotate = document.getElementById("rotate").checked; - if(rotate) { - controls.modify.mode |= OpenLayers.Control.ModifyFeature.ROTATE; - } - var resize = document.getElementById("resize").checked; - if(resize) { - controls.modify.mode |= OpenLayers.Control.ModifyFeature.RESIZE; - var keepAspectRatio = document.getElementById("keepAspectRatio").checked; - if (keepAspectRatio) { - controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE; - } - } - var drag = document.getElementById("drag").checked; - if(drag) { - controls.modify.mode |= OpenLayers.Control.ModifyFeature.DRAG; - } - if (rotate || drag) { - controls.modify.mode &= ~OpenLayers.Control.ModifyFeature.RESHAPE; - } - controls.modify.createVertices = document.getElementById("createVertices").checked; - var sides = parseInt(document.getElementById("sides").value); - sides = Math.max(3, isNaN(sides) ? 0 : sides); - controls.regular.handler.sides = sides; - var irregular = document.getElementById("irregular").checked; - controls.regular.handler.irregular = irregular; - } - - function toggleControl(element) { - for(key in controls) { - var control = controls[key]; - if(element.value == key && element.checked) { - control.activate(); - } else { - control.deactivate(); - } - } - } - - </script> - </head> - <body onload="init()"> - <h1 id="title">OpenLayers Modify Feature Example</h1> - <div id="tags"> - vertices, digitizing, draw, drawing - </div> - <div id="shortdesc">A demonstration of the ModifyFeature control for editing vector features.</div> - <div id="map" class="smallmap"></div> - <div id="controls"> - <ul id="controlToggle"> - <li> - <input type="radio" name="type" value="none" id="noneToggle" - onclick="toggleControl(this);" checked="checked" /> - <label for="noneToggle">navigate</label> - </li> - <li> - <input type="radio" name="type" value="point" id="pointToggle" onclick="toggleControl(this);" /> - <label for="pointToggle">draw point</label> - </li> - <li> - <input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" /> - <label for="lineToggle">draw line</label> - </li> - <li> - <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" /> - <label for="polygonToggle">draw polygon</label> - </li> - <li> - <input type="radio" name="type" value="regular" id="regularToggle" onclick="toggleControl(this);" /> - <label for="regularToggle">draw regular polygon</label> - <label for="sides"> - sides</label> - <input id="sides" type="text" size="2" maxlength="2" - name="sides" value="5" onchange="update()" /> - <ul> - <li> - <input id="irregular" type="checkbox" - name="irregular" onchange="update()" /> - <label for="irregular">irregular</label> - </li> - </ul> - </li> - <li> - <input type="radio" name="type" value="modify" id="modifyToggle" - onclick="toggleControl(this);" /> - <label for="modifyToggle">modify feature</label> - <ul> - <li> - <input id="createVertices" type="checkbox" checked - name="createVertices" onchange="update()" /> - <label for="createVertices">allow vertices creation</label> - </li> - <li> - <input id="rotate" type="checkbox" - name="rotate" onchange="update()" /> - <label for="rotate">allow rotation</label> - </li> - <li> - <input id="resize" type="checkbox" - name="resize" onchange="update()" /> - <label for="resize">allow resizing</label> - (<input id="keepAspectRatio" type="checkbox" - name="keepAspectRatio" onchange="update()" checked="checked" /> - <label for="keepAspectRatio">keep aspect ratio</label>) - </li> - <li> - <input id="drag" type="checkbox" - name="drag" onchange="update()" /> - <label for="drag">allow dragging</label> - </li> - </ul> - </li> - </ul> - </div> - </body> -</html> |