I'm working on a drawing possibility in my map. I achieved to integrate drawing elements (points, lines, polygones etc.), and extract coordinates of drawned elements. My working map is very complex with a lot of other functions and modules. That's why i'm working here to solve my problem on OL4 examples. The finality of my tests is to displaying coordinates of elements drawned by users to them and store them in PHP, in my GDB.
I have several problems :
What I achieved :
Here is my full code :
var raster = new ol.layer.Tile({
source: new ol.source.OSM()
});
var projection = ol.proj.get('EPSG:3857');
var projection2 = ol.proj.get('EPSG:4326');
var source = new ol.source.Vector({wrapX: false});
var vector = new ol.layer.Vector({
source: source
});
var map = new ol.Map({
layers: [raster, vector],
target: 'map',
view: new ol.View({
center: [-11000000, 4600000],
zoom: 4,
projection: projection
})
});
var typeSelect = document.getElementById('type');
var draw; // global so we can remove it later
function addInteraction() {
var value = typeSelect.value;
if (value !== 'None') {
draw = new ol.interaction.Draw({
source: source,
type: typeSelect.value
});
map.addInteraction(draw);
draw.on('drawend', function(evt){
new ol.proj.transform(draw, projection, projection2);
var feature = evt.feature;
var p = feature.getGeometry();
console.log(new ol.proj.transform(p.getCoordinates(), projection, projection2));
document.getElementById('point').innerHTML = new ol.proj.transform(p.getCoordinates(), projection, projection2);
});
}
}
/**
* Handle change event.
*/
typeSelect.onchange = function() {
map.removeInteraction(draw);
addInteraction();
};
addInteraction();
And here my problematic area :
draw.on('drawend', function(evt){
new ol.proj.transform(draw, projection, projection2);
var feature = evt.feature;
var p = feature.getGeometry();
console.log(new ol.proj.transform(p.getCoordinates(), projection, projection2));
document.getElementById('point').innerHTML = new ol.proj.transform(p.getCoordinates(), projection, projection2);
});
Help could be really appreciable. Bests
ol.proj.transform
only works on a single coordinate pair, and is not a constructor so does not need new
. If you transform a copy (clone) of the geometry you will get the expected coordinates.
var p = feature.getGeometry().clone().transform(projection, projection2);
console.log(p.getCoordinates());