Using OpenLayers and JSTS to create buffer geometry

Question

So far I have found similar questions like this one but none have quite expressed or fixed my exact issue.

I'm using Openlayers v4.6.5 and JSTS 1.4.0

The problem I'm having is with the buffer() method of the JSTS library. My conde snippets are as follows:

var feats = vectorSource.getFeatures();

// Takes in multiple features and combines them into one
var geom = joinGeoms(feats);

var parser = new jsts.io.OL3Parser();

var jstsGeom = parser.read(geom);
var meters = toMeters(500, 'ft'); // Result is 152.4 meters
var buffered = jstsGeom.buffer(meters); 

// This is where the issue happens
var finalGeom = parser.write(buffered); <---

The geometry that is generated from the buffer() method and assigned to finalGeom is then used to select other features that intersect. I have captured this geometry and have shown it below along with measurements done with the my measure tool (which I have tested separately and know is accurate).

The buffer distance should be 500 feet or 152.4 meters but comes back as a different distance. I have to tried seeing if this is from a different projection or unit conversion but I cant find anything that would take my inputs and result in the numbers I am getting.

My projection is EPSG:3857, which I know isn't the best for these kinds of measurements but I have been unable to successfully convert where its accurate.

Any thoughts?

Answer 1

The solution to my problem ended up being fairly simple, but took long enough to solve that I feel it's worth answering.

Below is the amended, working code:

var feats = vectorSource.getFeatures();

// Takes in multiple features and combines them into one
var geom = joinGeoms(feats);
geom.transform('EPSG:3857', 'EPSG:2883'); // Transform into CRS specific to my area

var parser = new jsts.io.OL3Parser();

var jstsGeom = parser.read(geom);
var feet = toFeet(152.4, 'm'); // Result is 500 feet (EPSG:2883 uses feet)
var buffered = jstsGeom.buffer(feet); 

// This is where the issue happens
var finalGeom = parser.write(buffered);
finalGeom.transform('EPSG:2883', 'EPSG:3857'); // Transform back to 3857

The part worth noting is that OpenLayers only supports EPSG:3587 and EPSG:4326 out of the box and needs assistance with other projections. The above code needed the following javascript libraries added in order to work:

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>
<script src="https://epsg.io/2883.js"></script>

Once all of those changes were made, the distances for the buffer were fully accurate.