Click on the OpenLayers map to return the correct x and y coordinates

Question

I use the map from: services.arcgisonline.com

var satelite =  new ol.layer.Tile({
    source: new ol.source.XYZ({
            attributions: ['Powered by Esri',
                           'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
            attributionsCollapsible: true,
            url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
            maxZoom: 16
    })
});    

 

and here I would like to click on a portion of the map where there is an open field I specify that there is no layer or features there, I would like to take the position coordinates of that click.

So far, I've done something like this:

var martor_click_drum = 1;
//click pe harta pop_up
map.on('click', function(event) {
        if(martor_click_drum == 1){
           var point = map.getCoordinateFromPixel(event.pixel)
           console.log(point);
           $.ajax({
                      type: "post",
                      url: "test_drumuri_punct.php",
                      data: {
                         get_point_harta_test: 1,
                         punct: point
                      },
                      success : function(data) {    
                        console.log(data);
                      }
                        
               })
        }
    }

But it returns an erroneous coordinate and I can't use it unfortunately ...

What else could I do?

Answer 1

To get the WGS84/EPSG:4326 coordinates, not the EPSG:3857 coordinates, use the toLonLat method: ol.proj.toLonLat(map.getCoordinateFromPixel(event.pixel)).

Instead of:

map.on('click', function(event) {
    var point = map.getCoordinateFromPixel(event.pixel)
    console.log(point);
  }
} 

use:

map.on('click', function(event) {
    var point = map.getCoordinateFromPixel(event.pixel);
    var lonLat = ol.proj.toLonLat(point); 
    console.log(lonLat);  // note the ordering of the numbers
  }
} 

live proof of concept

full click listener:

//click pe harta pop_up
map.on('click', function(event) {
  if(martor_click_drum == 1){
    console.log(event)
    var point = map.getCoordinateFromPixel(event.pixel)
    console.log("point="+point);
    var lonLat = ol.proj.toLonLat(point); 
    console.log("lonLat="+lonLat);       

    $.ajax({
      type: "post",
      url: "test_drumuri_punct.php",
      data: {
        get_point_harta_test: 1,
        punct: point
      },
      success : function(data) {    
      console.log(data);
    }
})