ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding a RegularPolygon handler for drawing squares, triangles, circles, etc. Demo in the regular-polygon.html example. Also adding a createRegularPolygon class method to the Polygon geometry class. Thanks to crschmidt for all the tests and help getting this in (closes #828).

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@4205 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2007-09-10 20:24:27 +00:00
parent 623e6e7112
commit 35dae2bdb0
7 changed files with 724 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
examples/regular-polygons.html Normal file
View File

@@ -0,0 +1,162 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Regular Polygon Example</title>
<style type="text/css">
html, body {
margin: 0;
padding: 1em;
font: 0.9em Verdana, Arial, sans serif;
}
input, select, textarea {
font: 1em Verdana, Arial, sans serif;
}
#map {
width: 512px;
height: 350px;
border: 1px solid gray;
}
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;
}
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>OpenLayers Regular Polygon Example</h2>
<div id="map"></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&deg;</option>
<option value="45">45&deg;</option>
<option value="90">90&deg;</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>
</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>
</body>
</html>