Leaflet – How to Convert GeoJSON to Projected Coordinates Using proj4leaflet

angularleafletopenlayersproj4leaflet

We are migrating existing angular app from OL to Leaflet. In OL we were able to get the geoJSON in UTM with EPSG:3857 on draw finish However when we complete a draw in leaflet and try to get the geometry and geoJSON it gives the data in LatLong format.

This geometry and geoJSON is getting Saved in DB and considers LatLong as UTM due to string format.

this.map.on(L.Draw.Event.CREATED, function (event) 
{
  let layer = event.layer;   
  let drawnGeometry = event.layer.toGeoJSON().geometry
  console.log(drawnGeometry);
  let data = drawnGeometry.coordinates;
  self.Coordinates = data.join(); // coordinates are in LatLong format.
  self.cordiData = JSON.stringify(event.layer.toGeoJSON());
});

Please suggest if there is a way out in leaflet to get the Geometry and geoJSON in UTM format.

Best Answer

If you really want to have GeoJSON in projected coordinates, you can use Leaflet's L.CRS.EPSG3857.project method for that. Since result of drawing is not some complicated feature collection, you could do conversion simply by looping through coordinates.

It could look something like this (I'm using old fashioned JS):

var projGeoJSON = event.layer.toGeoJSON();
var point;
for (var i = 0; i < projGeoJSON.geometry.coordinates.length; i++) {
  for (var j = 0; j < projGeoJSON.geometry.coordinates[i].length; j++) {
    point = L.CRS.EPSG3857.project(L.latLng(projGeoJSON.geometry.coordinates[i][j]));
    projGeoJSON.geometry.coordinates[i][j] = [point.y, point.x];
  }
}
Related Question