OpenLayers live circle radius
HTML
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css">
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<link rel="stylesheet" href="http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/style.css">
<script src="http://web-mapping.com/test/RegularPolygon_thomas.js"></script>
<h1 id="title">OpenLayers Live Measurement of Circle Radius</h1>
Testarea: O. R. Tambo International Airport, Runway 03L/21R. length: 4.418m
<div id="tags">drawing</div>
<p id="shortdesc">Draw a circle to see its live radius.</p>
<h2>
Radius: <span id="radius">xxx</span> <span id="einheit">Meter</span>
or with "getGeodesicLength": <span id="geodesic">xxx</span> m
</h2>
<div id="map" class="smallmap"></div>
CSS
#radius {
color:red;
font-weight:bold;
}
html, body {
height:100%;
}
#map {
height:90%;
}
JavaScript
var circles = new OpenLayers.Layer.Vector("Kreise");
var radiuslayer = new OpenLayers.Layer.Vector("Radius");
//initialize a draw control
var my_polygonhandler = OpenLayers.Handler.RegularPolygon;
var polygonControl = new OpenLayers.Control.DrawFeature(circles,
my_polygonhandler, {
handlerOptions: {
sides: 100
}
});
//initialize a map
var map = new OpenLayers.Map({
div: 'map',
projection: new OpenLayers.Projection('EPSG:900913'),
displayProjection: new OpenLayers.Projection('EPSG:4326'),
layers: [
new OpenLayers.Layer.OSM(),
circles, radiuslayer]
});
var mittelpunkt = new OpenLayers.LonLat(151.02088753149434, -33.81278281352134).transform(map.displayProjection, map.projection);
map.setCenter(mittelpunkt, 14);
map.addControl(polygonControl);
polygonControl.activate();
polygonControl.handler.callbacks.move = function (e) {
var linearRing = new OpenLayers.Geometry.LinearRing(e.components[0].components);
var geometry = new OpenLayers.Geometry.Polygon([linearRing]);
var polygonFeature = new OpenLayers.Feature.Vector(geometry, null);
var polybounds = polygonFeature.geometry.getBounds();
var minX = polybounds.left;
var minY = polybounds.bottom;
var maxX = polybounds.right;
var maxY = polybounds.top;
//calculate the center coordinates
var startX = (minX + maxX) / 2;
var startY = (minY + maxY) / 2;
//make two points at center and at the edge
var startPoint = new OpenLayers.Geometry.Point(startX, startY);
var endPoint = new OpenLayers.Geometry.Point(maxX, startY);
var radius = new OpenLayers.Geometry.LineString([startPoint, endPoint]);
var len = Math.round(radius.getLength()).toString();
console.log(len);
var laenge;
if (len > 1000) {
laenge = len / 1000;
einheit = "km";
} else {
laenge = len;
einheit = "m";
}
document.getElementById("radius").innerHTML = laenge;
...