Search code examples
openlayersopenlayers-3openlayers-6

projection and EPSG mismatch when buffering a geometry

as shown in the code posted below, i am using turf.js to buffer a geometry in the listener callback of modifyend of Modify event. i tried to set the buffered feature asOLFeature on the map via: this.#vectorSource.addFeature(asOLFeature)

to assure that the buffered geometry is placed on the map, i converted asOLFeature.getGeometry() to geojson format so i can visualize it. the code i used to convert the OL Geometry to GeoJSON is as follows:

var writer = new GeoJSON();
var geoJsonStr = writer.writeGeometry(asOLFeature.getGeometry());

the digitized geometry is shown in image-1 below, and the buffered geometry is shown in image-2 below.

Apparently, the digitized geometry in image-1 when gets buffered using turf, as shown in image-2, it somehow gets converted into two geometries and displaced.

i believe it about coordinate transformation and projection issue, but i do not know how to solve it.

code

this.#modifyEvtNullifierFeature = evt.feature;
const modifyEvtNullifierAsGeom = this.#modifyEvtNullifierFeature.getGeometry();
const geojsonFormat = new GeoJSON();
const geosonGeometry = geojsonFormat.writeGeometryObject(modifyEvtNullifierAsGeom, {
    featureProjection: 'EPSG:3857',
    dataProjection:'EPSG:4326'
  });
let geomInMercator = turf.toMercator(geosonGeometry);
const buffered = turf.buffer(geomInMercator, 60, {units: 'kilometers'});
let bufferedInWgs84 = turf.toWgs84(buffered);
const asOLFeature = geojsonFormat.readFeature(bufferedInWgs84, {
    dataProjection:'EPSG:4326',
    featureProjection: 'EPSG:3857'
  });
this.#modifyEvtNullifierFeature.set(ModifyEvtNullifierFeaturesConstants.CONST_IS_MODIFY_EVT_NULLIFIER_FEATURE.description, true);
this.#vectorSource.addFeature(asOLFeature);

image-1 enter image description here

image-2 enter image description here

Solution

  • turf.js expects WGS84 coordinates. If you are using Openlayers to transform between projections you do not need to reverse that with toMercator/toWgs84

    const geosonGeometry = geojsonFormat.writeGeometryObject(modifyEvtNullifierAsGeom, {
    featureProjection: 'EPSG:3857',
    dataProjection:'EPSG:4326'
  });
const buffered = turf.buffer(geosonGeometry, 60, {units: 'kilometers'});
const asOLFeature = geojsonFormat.readFeature(buffered, {
    dataProjection:'EPSG:4326',
    featureProjection: 'EPSG:3857'
  });