1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>OpenLayers Regular Polygon Example</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"> p { width: 512px; } #config { margin-top: 1em; width: 512px; position: relative; height: 8em; } #controls { padding-left: 2em; margin-left: 0; width: 12em; } #controls li { padding-top: 0.5em; list-style: none; } #options { font-size: 1em; top: 0; margin-left: 15em; position: absolute; } </style> <script src="../lib/OpenLayers.js"></script> <script type="text/javascript"> var map, polygonControl; OpenLayers.Util.onImageLoadErrorColor = "transparent"; function init(){ map = new OpenLayers.Map('map'); var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'}); var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer"); map.addLayers([wmsLayer, polygonLayer]); map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition()); polyOptions = {sides: 4}; polygonControl = new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.RegularPolygon, {handlerOptions: polyOptions}); map.addControl(polygonControl); map.setCenter(new OpenLayers.LonLat(0, 0), 3); document.getElementById('noneToggle').checked = true; document.getElementById('irregularToggle').checked = false; } function setOptions(options) { polygonControl.handler.setOptions(options); } function setSize(fraction) { var radius = fraction * map.getExtent().getHeight(); polygonControl.handler.setOptions({radius: radius, angle: 0}); } </script> </head> <body onload="init()"> <h2 id="title">OpenLayers Regular Polygon Example</h2> <p id="shortdesc"> Shows how to use the RegularPolygon handler to draw features with different numbers of sides. </p> <div id="map" class="smallmap"></div> <div id="config"> <ul id="controls"><b>Map Controls</b> <li> <input type="radio" name="type" value="none" id="noneToggle" onclick="polygonControl.deactivate()" checked="checked" /> <label for="noneToggle">navigate</label> </li> <li> <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="polygonControl.activate()" /> <label for="polygonToggle">draw polygon</label> </li> </ul> <table id="options"> <tbody> <tr> <th>Draw Option</th> <th>Value</th> </tr> <tr> <td> shape </td> <td> <select name="sides" onchange="setOptions({sides: parseInt(this.value)})"> <option value="3">triangle</option> <option value="4" selected="selected">square</option> <option value="5">pentagon</option> <option value="6">hexagon</option> <option value="40">circle</option> </select> </td> </tr> <tr> <td> snap angle </td> <td> <select name="angle" onchange="setOptions({snapAngle: parseFloat(this.value)})"> <option value="" selected="selected">no snap</option> <option value="15">15°</option> <option value="45">45°</option> <option value="90">90°</option> </select> </td> </tr> <tr> <td> size </td> <td> <select name="size" onchange="setSize(parseFloat(this.value))"> <option value="" selected="selected">variable</option> <option value="0.1">small</option> <option value="0.2">medium</option> <option value="0.4">large</option> </select> </td> </tr> <tr> <td> irregular </td> <td> <input id="irregularToggle" name="irregular" type="checkbox" onchange="setOptions({irregular: this.checked})") /> </td> </tr> </tbody> </table> </div> <p> Regular polygons can be drawn by pointing a DrawFeature control to the RegularPolygon handler class. The options above demonstrate how the handler can be configured. Note if you are in angle snapping mode (if the snap angle is non-null) and you hold down the <b>Shift</b> key, you will toggle to non-snapping mode. </p> <p> The <i>irregular</i> option allows drawing of irregular polygons. With this option, the fixed radius option is ignored. </body> </html> |