<html>
<head>
<title>OpenLayers Dynamic Measure Crcle Radius</title>
<script src="OpenLayers.js"></script>
<script src="DynamicMeasure.js"></script>
<script type="text/javascript">
var map, layerOsm,vectors, polygonControl,polygonLayerBuffer;
var lonLatFrankfurt = new OpenLayers.LonLat(966375, 6466128);
function init() {
map = new OpenLayers.Map('map');
layerOsm = new OpenLayers.Layer.OSM("Simple OSM Map");
//map.addLayer(layerOsm);
polygonLayerBuffer = new OpenLayers.Layer.Vector("Polygon Layer Buffer");
polyOptions = {sides: 40};
/*polygonControl = new OpenLayers.Control.DrawFeature(polygonLayerBuffer,
OpenLayers.Handler.RegularPolygon,
{handlerOptions: polyOptions});*/
var polygonArea;
polygonControl = new OpenLayers.Control.DynamicMeasure(
OpenLayers.Handler.RegularPolygon, {
persist: true,
handlerOptions: {
sides: 100
},
callbacks: { move: function(evt) {
console.log(evt);
var element = document.getElementById('area');
polygonArea = evt.getArea()/1000000;
if(polygonArea < 1)
element.innerHTML =" Dyanmic Area "+ (polygonArea*1000000).toFixed(3)+
" m<sup>2</" + "sup>";
else
element.innerHTML =" Dyanmic Area "+ polygonArea.toFixed(3)+
" km<sup>2</" + "sup>";
}
}
});
polygonControl.events.on({
"measure": handleMeasurements,
"measurepartial": handleMeasurements
});
map.addControl(polygonControl);
map.addLayers([layerOsm,polygonLayerBuffer]);
map.setCenter(
lonLatFrankfurt,
10
);
polygonControl.activate();
}
function featureModified(event) {
var bounds = event.feature.geometry.getBounds();
var answer = "bottom: " + bounds.bottom + "\n";
answer += "left: " + bounds.left + "\n";
answer += "right: " + bounds.right + "\n";
answer += "top: " + bounds.top + "\n";
alert(answer);
}
function handleMeasurements(evt){
//console.log(evt);
var geometry = evt.geometry;
var units = evt.units;
var order = evt.order;
var measure = evt.measure;
var element = document.getElementById('output');
var position = (map.getLonLatPxFromViewPortPx);
var out = "";
if(order == 1){
out += "Distance: " + measure.toFixed(3) + " " + units;
}else{
out += "Area: " + measure.toFixed(3) + " " + units + "<sup>2</" + "sup>";
}
element.innerHTML = out;
}
</script>
</head>
<body onload="init()">
Click & Drag on Map To Draw Circle
<div id="output"></div>
<div id="area"></div>
<div id="map" style="height:500px;"></div>
</body>
</html>
