Adding buffer to a polygon in react/typescript project doesn't work

91 views
Skip to first unread message

zahin hasan

unread,
Jun 28, 2022, 5:00:30 PM6/28/22
to JSTS devs
Hi, I have been trying to add buffer to a polygon for the past few days but couldnt. I am trying to follow this existing snippet here: http://jsfiddle.net/qdv1n4yL/7/.

What i have so far is:
```
import Coordinate from 'jsts/org/locationtech/jts/geom/Coordinate.js';
import GeometryFactory from 'jsts/org/locationtech/jts/geom/GeometryFactory.js';
import BufferParameters from 'jsts/org/locationtech/jts/operation/buffer/BufferParameters.js';
import {BufferOp} from 'jsts/org/locationtech/jts/operation/buffer';


function vectorCoordinates2JTS (polygon) {
var coordinates: any = [];

for (var i = 0; i < polygon.length; i++) {
coordinates.push(new Coordinate(polygon[i].x, polygon[i].y));
}
return coordinates;
}


function inflatePolygon(poly, spacing) {
var geoInput = vectorCoordinates2JTS(poly);
geoInput.push(geoInput[0]);

var geometryFactory = new GeometryFactory();

var shell = geometryFactory.createPolygon(geoInput);
var polygon = shell.buffer(spacing, BufferParameters.CAP_FLAT);

var inflatedCoordinates: any = [];
var oCoordinates;
oCoordinates = polygon.shell.points.coordinates;
console.log(oCoordinates.length)
for (let i = 0; i < oCoordinates.length; i++) {
var oItem;
oItem = oCoordinates[i];
inflatedCoordinates.push(Math.ceil(oItem.x), Math.ceil(oItem.y));
}
```

I am calling function inflatePolygon with arguments as followed:
poly: [{x: 1, y: 1}, {x: 2, y:2} ...] and spacing as 10.


It throws an error on this line `var polygon = shell.buffer(spacing, BufferParameters.CAP_FLAT);` where it says the shell object has no buffer function. 

I have tried to see what's in the shell object and it indeed has no buffer function. What am I doing wrong here? 

Any sort of help or guidance is highly appreciated. Thanks!

Björn Harrtell

unread,
Jun 28, 2022, 5:11:49 PM6/28/22
to jsts...@googlegroups.com
See https://github.com/bjornharrtell/jsts#caveats section on that shortcut methods are not available.

--
You received this message because you are subscribed to the Google Groups "JSTS devs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jsts-devs+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jsts-devs/5aed9663-0fcd-442f-86eb-3e9282851f78n%40googlegroups.com.

zahin hasan

unread,
Jun 29, 2022, 4:57:15 PM6/29/22
to JSTS devs
Okay, if I need to use the buffer function, how can I do it? Thanks for the replyback!

zahin hasan

unread,
Jun 29, 2022, 4:57:49 PM6/29/22
to JSTS devs
My overall goal is to inflate a polygon given coordinates, based on my current code snippet how would I be able to do it? Thanks!

zahin hasan

unread,
Jun 30, 2022, 1:02:34 PM6/30/22
to JSTS devs
Hi, just thought of following back to the initial conversation. So, I have tried to do this now:
```
const inflatePolygon = (poly, spacing) => {
var geoInput = vectorCoordinates2JTS(poly);
geoInput.push(geoInput[0]);

var geometryFactory = new GeometryFactory();

var shell = geometryFactory.createPolygon(geoInput);
var polygon = BufferOp.bufferOp(shell, spacing);

var inflatedCoordinates: any = [];
var oCoordinates;
oCoordinates = polygon.getCoordinates();
console.log(oCoordinates.length)
for (let i = 0; i < oCoordinates.length; i++) {
var oItem;
oItem = oCoordinates[i];
inflatedCoordinates.push({x: Math.ceil(oItem.x), y: Math.ceil(oItem.y)});
}
return inflatedCoordinates;
}

function vectorCoordinates2JTS (polygon) {
var coordinates: any = [];

for (var i = 0; i < polygon.length; i++) {
coordinates.push(new Coordinate(polygon[i].x, polygon[i].y));
}
return coordinates;
}
```
I am calling function inflatePolygon with arguments as followed:
poly: [{x: 1, y: 1}, {x: 2, y:2} ...] and spacing as 10 as I did previously. 

However, if I have 3 coordinates as input it returns me 36 points from `polygon.getCoordinates()` but I am just looking for the 3 inflated coordinates.


Youssef Douidi

unread,
Aug 26, 2023, 8:51:27 AM8/26/23
to JSTS devs
  • Shortcut methods on Geometry from upstream API are not available (.buffer.intersects and more) unless using the bundled ES5 version that has these monkey patched in. The shortcut methods have been removed because they cause difficult circular dependencies. You can find the equivalent methods on the appropriate operation class.

What about OPs e.g. snapToSelf()? the translated implementation calls .buffer () as shortcut method on Geometry . any tips and tricks will be appreciated.

Björn

unread,
Aug 29, 2023, 11:12:02 AM8/29/23
to JSTS devs
Generally the remaining cases of internal use of shortcut methods are in untested code. So even if I fix those it's not certain it will work.

That said, I still want to see what can be done about it so I'm tracking it now with https://github.com/bjornharrtell/jsts/issues/505.

Reply all
Reply to author
Forward
0 new messages