get coordinates of drawn feature in OpenLayers
I'm trying to create an online map using OpenLayers 3.
I'm brand new to using OpenLayers, and all I'm trying to do is to get the coordinates of the points, lines, polygons that I drew on the map. I'm aware that there is a featuresadded parameter available, but I'm not able to implement it correctly.
Can anybody point me in the right direction how to get the coordinates of a drawn feature (either in an alert() or console.log)?
Thanks a ton!!
here's my code:
<html>
<head>
<script src="http://openlayers.org/en/v3.3.0/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="ol.css" type="text/css">
<style type="text/css">
body {
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: small;
}
#map {
clear: both;
position: relative;
border: 1px solid black;
}
#wrapper {
width: 337px;
height: 50px;
}
#location {
float: right;
font-family: Arial, Verdana, sans-serif;
font-size: 12px;
color: #483D8B;
background-color: white;
}
#nodelist{
font-family: Arial, Verdana, sans-serif;
font-size: 14px;
color: #000000;
font-style: normal;
background-color: white;
}
</style>
<script type="text/javascript">
var map;
var draw;
var transformed_coordinate;
var vector;
function init() {
var view = new ol.View({
center: ol.proj.transform([13.1929, 55.718],'EPSG:4326', 'EPSG:3857'),
zoom: 12
});
var myZoom = new ol.control.Zoom();
var myZoomSlider = new ol.control.ZoomSlider();
var zoomToExtentControl = new ol.control.ZoomToExtent({
extent: [1453297.22,7490484.81,1483872.03,7513415.91]
});
var myScaleLine = new ol.control.ScaleLine()
var neighborhood = new ol.source.ImageWMS({
url: 'http://localhost:8090/geoserver/project/wms',
params: {'LAYERS': 'project:Neighborhood'}
});
var roads = new ol.source.ImageWMS({
url: 'http://localhost:8090/geoserver/project/wms',
params: {'LAYERS': 'project:Roads_all'}
});
var source = new ol.source.Vector({wrapX: false});
vector = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(0, 255, 0, 0.5)'
}),
stroke: new ol.style.Stroke({
color: '#ffcc33',
width: 2
}),
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({
color: '#ffcc33'
})
})
})
});
var layers = [
new ol.layer.Image({
source: neighborhood
}),
new ol.layer.Image({
source: roads
}),
vector
]
map = new ol.Map({
layers: layers,
target: 'map',
view: view
});
map.addControl(myZoom);
map.addControl(myZoomSlider);
map.addControl(zoomToExtentControl);
map.addControl(myScaleLine);
map.on('singleclick', function(evt){
var coord = evt.coordinate;
transformed_coordinate = ol.proj.transform(coord, "EPSG:3857", "EPSG:4326");
//console.log(transformed_coordinate);
})
function onFeaturesAdded(event){
var bounds = event.features[0].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);
}
var typeSelect = document.getElementById('type');
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
var geometryFunction, maxPoints;
if (value === 'Square') {
value = 'Circle';
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
} else if (value === 'Box') {
value = 'LineString';
maxPoints = 2;
geometryFunction = function(coordinates, geometry) {
if (!geometry) {
geometry = new ol.geom.Polygon(null);
}
var start = coordinates[0];
var end = coordinates[1];
geometry.setCoordinates([
[start, [start[0], end[1]], end, [end[0], start[1]], start]
]);
return geometry;
};
}
draw = new ol.interaction.Draw({
source: source,
type: /** @type {ol.geom.GeometryType} */ (value),
geometryFunction: geometryFunction,
maxPoints: maxPoints
});
map.addInteraction(draw);
}
}
/**
* Let user change the geometry type.
* @param {Event} e Change event.
*/
typeSelect.onchange = function(e) {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
} //end init
</script>
</head>
<body onload="init()">
<div id="map" style="width: 800px; height: 600px"></div>
<form class="form-inline">
<label>Geometry type </label>
<select id="type">
<option value="None">None</option>
<option value="Point">Point</option>
<option value="LineString">LineString</option>
<option value="Polygon">Polygon</option>
</select>
</form>
</body>
</html>
Answer
Register a listener on ol.source.Vector and wait until the drawn feature is added:
source.on('addfeature', function(evt){
var feature = evt.feature;
var coords = feature.getGeometry().getCoordinates();
});