OpenLayer 3-4-5, extract coordinates of user drawned geometry

Question

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 :

• Coordinates for polygones, and polylines don't take in account the 2 firsts nodes
• 2+ more nodes are displayed in console and html, but in wrong coordinates even when i tried to reproject them

What I achieved :

• opening a listener on my drawned events
• Displaying on my map drawned elements
• extracting coordinates for points in log and html display (using document.getElementById('point').innerHTML)

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

Answer 1

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());