nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Problem with geometry.getCentroid method

DaveSouthern

I have the following line of code:

this.centerPoint = this.graphic.geometry.getCentroid();

When I run the program and step through the code, the value of geometry.rings is:

[-81.63820933449949,32.72321758156744,-81.6381280506363,32.72321758156744,-81.6381280506363,32.723341259885146,-81.63820933449949,32.723341259885146,-81.63820933449949,32.72321758156744]

But when I examine the X and Y values of the resultant centerpoint variable, they look opposite from what I would expect:

X = 81.6392691466801

Y = -32.7237205172898

Which would move the geometry from the southeastern U.S. to somewhere in the Indian ocean. Obviously I'm doing something wrong. Any guesses?

Find more posts tagged with

Accepted answers

thejuskambi

Hello Dave,

Your coordinates looks like is in counter-clockwise direction. The documentation in the addRing method says:

add points counter-clockwise to create a hole

May be thats what is causing the problem. At this point I am not sure if the Polygon constructor behaves the same way as the addRing does. as It seem you are getting the right centriod when creating the geometry as part of json parameter.

Hope this was helpful.

Thejus

All comments

DaveSouthern

OK. So the solution turned out to be fairly simple. Rather than changing the rotation of the graphic before adding it to the map, I simply check the rotation of the graphic selected by the click event and then reverse it's rotation if needed before getting the centroid. This way I don't affect all the graphics on the map - just the one I'm interested in.

But now I have a different problem going on. I'll start a new thread to address it.

DaveSouthern

Well, it seems that reversing the order of the points broke some other things in the app. It seems some of the shapes we draw were not happy with being reversed. Back to the drawing board.

RobertScheitlin__GISP

Dan,

This is the JS API. I would have never guessed that a reversed poly out produce a bad centroid.

DanPatterson_Retired

So let me see if I have this correct... a incorrectly oriented polygon would produce a negative area, from which the centroid coordinates are calculated incorrectly, without consideration of the input coordinate space at all. If anybody knows, what geometry engine is being used to produce this affect?

thejuskambi

That should not break the app. But to be on safer side. There is a method to check if it is clockwise or not before flipping the coords.

var polygon = new Polygon( ... );
  var clockwise = polygon.isClockwise(ringData);

if(clockwise){
    polygon.addRing(ringData);
}
else {
    //flip the coords here
    polygon.addRing(ringData);
}

DaveSouthern

That was it, Thejus. I reversed the array and now the centroid is working fine.

However... have I broken anything else in the app? That is the question. Gonna have to bounce this one off my dev lead and see what he says.

In any case - you get credit for the answer - and thanks to everyone else who kept pushing this until the answer was found.

thejuskambi

Hello Dave,

Your coordinates looks like is in counter-clockwise direction. The documentation in the addRing method says:

add points counter-clockwise to create a hole

Hope this was helpful.

Thejus

DaveSouthern

It sure does - or so I assume it does. I use a separate tool to draw the polygon on the map and it draws right where it's supposed to draw. I haven't rigorously checked it, but the coordinates of the polygon at least smell right.

RobertScheitlin__GISP

Dave,

That looks good then. I am not sure what is going on with the centroid then. Does the polygon display is the correct location on the map?

DanPatterson_Retired

so far none of that accounts for the switching of the sign in the coordinates, I would look for a -1 or sign multiplier somewhere and whip in some print statements (dont know if it is possible) at various stages where the geometry is being handled.

DaveSouthern

I burrowed into the shapeLoader function and this is the code that is used to create the polygon:

//parse as polygon

coords = shapeWkt.split(this.PolyRegex);

var ringData = [];

for (idxCoord = 3; idxCoord < coords.length - 2; idxCoord += 3) {

ringData[(idxCoord - 3) / 3] = [parseFloat(coords[idxCoord]), parseFloat(coords[idxCoord + 1])]

}

//build the shape

shape = new esri.geometry.Polygon(new esri.SpatialReference({ wkid: srid }));

shape.addRing(ringData);

return shape;

the value of the srid variable is 4326. The only difference I could see between our code and Panagiotis' example is that I didn't have wkid in quotes. I tried changing that, but it didn't help.

RobertScheitlin__GISP

Dave,

It looks like you guys are using some custom library that parses shapefiles. The likely issue is that the portion of the custom code that is creating the polygon is not explicitly defining the SpatialReference for the geometry. You need to use the setspatialreference on the geometry and assign wkid 4326 like Panagiotis shows in his snippet above.

Polygon | API Reference | ArcGIS API for JavaScript | setSpatialReference

DaveSouthern

So here is the function that creates the graphics for the layer. This function runs in response to a dojo ajax request to get the graphic data from the server. Not sure what these various functions/objects represent. Let me know if something jumps out at you or if you want to know the values of any of the variables.

this.graphicLayer.evalGoodResult = dojo.hitch(this.graphicLayer, function (data) {

if (data.length > 0) {

//feature layers have one common symbol

var defaultSymbol = this.customRenderer.theSymbol;

//load the specified shapes into the layer

this.suspend();

var shapeLoader = this.shapeLoader;

var shapeField = this.shapeField;

var srid = this.defaultSrid;

var shape, attr;

for (idxShape in data) {

//validate and load the geometry and attributes

if (shape) {

//get the symbol for this feature

this.customRenderer.getSymbol(attr);

//create a graphic for it

new esri.Graphic(shape, symbol, attr);

//determine if this graphic will be visible according to our renderer

this.customRenderer.isVisible(attr);

//add to the layer

this.add(theGraphic);

this.resume();

DaveSouthern

Working my way backwards through the code, it seems that the graphic that contains the geometry is captured by a map layer's click event. The event handler that is called when the graphic is clicked on the map grabs the graphic from the event args passed to the event handler.

I'm gonna try to untangle this spaghetti and see where the map layer is actually being created and see what that looks like.

More later.

PanagiotisPapadopoulos54

Hi Dave,

I am using the following code to construct the geometry

var polygon = new Polygon({

"rings": [

[

[-81.63820933449949,32.72321758156744],

[-81.6381280506363,32.72321758156744],

[-81.6381280506363,32.723341259885146],

[-81.63820933449949,32.723341259885146],

[-81.63820933449949,32.72321758156744]

]

"spatialReference": {

"wkid": 4326

}

});

for this geometry the Cendroid is the following

alert(selected.geometry.getCentroid().x + " " + selected.geometry.getCentroid().y);

as you can see the cendroid point has the right coordinates.

check how the polygon constructed.

DanPatterson_Retired

in short, it is a geographic coordinate system... without all the details, the coordinates are in decimal degrees. The part of the issue to focus on is the point between the polygon, or sequence of points was created to where the centroid geometry is calculated. It is quite common for the longitude (-81ish) to have the -ve sign dropped, but not to have both switched.

DaveSouthern

Maybe this is an issue I need to push up to my dev lead - he's the one who wrote the code that actually creates the layers and features. I think the spatial reference id is 4326 - whatever that means. I'm not really good at this gis stuff- .net development is more my thing.

I'll see if I can scare up that code in the morning.

RobertScheitlin__GISP

Dave,

Can I see more of your code where you create this polygon? Are you specifying a spatial reference for the polygon?

DanPatterson_Retired

I don't know how you get the centroid values. Are they calculated from the input list? If calculated directly, then it is a bug, otherwise something is missing in between Robert Scheitlin, GISP might know since it might be a java thing

DaveSouthern

Let me know if you need any additional info.

DanPatterson_Retired

I dont know what you are doing but the sign of your coordinates are getting flipped. normally this is a coordinate system problem, but you seem to have some graphic

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.