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; } } }

Radius of a circle drawn as a polygon

KunalMehta

All,

I found this solution to draw a circle as a polygon of 360 points:

-(AGSPolygon*) circleWithCenter:(AGSPoint*)point raduis:(double)radius
{
    AGSMutablePolygon * p = [AGSMutablePolygon new];
    [p addRingToPolygon];
    int pointsCount = 360;
    double slice = 2 * M_PI / pointsCount;
    for(int i = 0; i<pointsCount;i++){
        double rad = slice * i;
        double px = point.x + radius * cos(rad);
        double py = point.y + radius * sin(rad);
        [p addPointToRing:[AGSPoint pointWithX:px y:py spatialReference:[AGSSpatialReference spatialReferenceWithWKID:4326]]];
    }

    return p;
}

The question I have is what is the units of the radius passed in? For example, if I want to draw a circle of raduis 10 miles, what value do I pass in? If I pass in 10, it just draws a really huge circle with radius several multiples of 10!

I tried to look into the sdk api docs and could not find much info, so any help will be appreciated.

Encuentra más publicaciones etiquetadas con

Accepted answers

All comments

FancyAugustin

Really sorry that was issue in network.

radius:1927212.6012732424

The above radius i got when executed that code.

But is this valid value,i doubt that?

NFurness

Probably best to post a question like that over on the ArcGIS API for JavaScript space. But if your previous require statement worked, this will work too. Since you're getting started with the APIs, perhaps take a look at the Develop sections of the DevLabs and Hackerlabs (including the 3.x labs).

FancyAugustin

When i try to add

esri/geometry/geometryEngine

under require in the which i posted before ,it is giving me error saying

Uncaught ReferenceError: require is not defined

Can i get your help on this?

NFurness

No problem . The following should get you the radius in meters:

<SPAN class="keyword token">var</SPAN> radius <SPAN class="operator token">=</SPAN> geometryEngine<SPAN class="punctuation token">.</SPAN><SPAN class="token function">distance</SPAN><SPAN class="punctuation token">(</SPAN>geometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getCentroid</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN>geometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getPoint</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="string token">"meters"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN></SPAN>

FancyAugustin

Thank you this was really useful.

one more clarification.

I saw the below format in tutorial:

distance(geometry1, geometry2, distanceUnit)

geometry.getPoint(0,0)
Object {type: "point", x: -15849192.693999259, y: 10478016.378614787, spatialReference: Object}
geometry.getCentroid()
Object {type: "point", x: -18090547.842482734, y: 10478016.37861477, spatialReference: Object}

How can i proceed with distance function.Sorry i am new to esri map? Can you please clarify this too?

NFurness

Ah. That's a very different question.

You should use Polygon.getCentroid() to get the centerpoint of the circle.

Then use Polygon.getPoint(0,0) to get a Point from the circle and use geometryEngine.distance() between the two points to determine the radius.

That assumes you used the Draw.CIRCLE type when you call draw.activate().

Please note that you appear to be using the draw-end event and it seems that is deprecated in favor of the draw-complete event.

FancyAugustin

Sorry i didnt get you.The code below is used for drawing circle and polygon.From this how can we get the radius of the circle which we draw.

require([
"esri/map", "esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol", "esri/geometry/webMercatorUtils", "esri/symbols/CartographicLineSymbol",
"esri/graphic",
"esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Map, Draw,
SimpleMarkerSymbol, SimpleLineSymbol,
SimpleFillSymbol, WebMercatorUtils, CartographicLineSymbol,
Graphic,
Color, dom, on
) {
var circleArray = [];
map = new Map("mapDiv", {
basemap: "streets",
center: [-148.6234374999831, 62.10143229517362],
zoom: 3
});
map.on("load", initToolbar);

// fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
// the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
var fillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH,
new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25])
);

function initToolbar() {
tb = new Draw(map);
tb.on("draw-end", addGraphic);

// event delegation so a click handler is not
// needed for each individual button
on(dom.byId("info"), "click", function(evt) {
if (evt.target.id === "info") {
return;
}
var tool = evt.target.id.toLowerCase();
map.disableMapNavigation();
tb.activate(tool);
});
}

function postGraphic(geometry) {
$("#vertices").text("");

if (geometry.type === 'polygon') {
//Our polygons should have only one ring

var polygon = geometry.rings[0];
var vertices = "";

var latLong = [];
for (var i = 0; i < polygon.length; i++) {
if (geometry.spatialReference.isWebMercator()) {
//Convert to traditional decimal degrees
longLat = WebMercatorUtils.xyToLngLat(polygon[0], polygon[1]);
} else
longLat = [polygon[0], polygon[1]];

x = longLat[0];
y = longLat[1];
var objLatLong = {};
objLatLong.long = longLat[0];
objLatLong.lat = longLat[1];
latLong.push(objLatLong)

//Convert the vertices to the format x,y;x,y;
vertices = vertices + x + ',' + y + ';';
}

$("#vertices").text(vertices);
}
}
var circleFlag = false;
var polygonFlag = false;
$('#Circle').on("click", function() {
circleFlag = true;
polygonFlag = false;
})
;
$('#Polygon').on("click", function() {
circleFlag = false;
polygonFlag = true;
})
;
function addGraphic(evt) {
//deactivate the toolbar and clear existing graphics
tb.deactivate();
map.enableMapNavigation();

// figure out which symbol to use
var symbol;

symbol = fillSymbol;
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
postGraphic(evt.geometry);
}
});

NFurness

You can do the same thing.

Use the JavaScript GeometryEngine. See geometryEngine GeodesicBuffer which will give you a circular polygon back around the center point, and you can then use Graphic and GraphicsLayer to add these to your MapView.

FancyAugustin

Can i get the solution for arcgis javascript api for same?

AkhilChoran_Balan

You can add this to a graphics layer by converting it into a AGSGraphic object.

Something like below code will help for that:

[self.graphicsLayer addGraphic:[AGSGraphic graphicWithGeometry: [self circleWithCenter:point radius:10.0f] symbol:[AGSSimpleLineSymbol simpleLineSymbol] attributes:nil]];

SjorsProvoost

How do I go about adding this to a graphics layer?

NFurness

Could be. Depends on what the projection is of your map. I'm guessing it's not Web Mercator 😄

My solution will generate you a polygon that is pretty close to circular on the ground (i.e the edge is R miles north and R miles east of the center). If you are using a Web Mercator projection, it will appear circular on the map. If you are using WGS84 for example, it will indeed appear less tall as you move north or south from the equator, by virtue of the projection.

If you want something that looks circular on a WGS84 map, and you know that your center point is WGS84, you can either use your & Technobrat's solution or something like this:

-(AGSPolygon*) circleWithCenter:(AGSPoint*)point radius:(double)radiusInMiles
{
    AGSGeometryEngine *ge = [AGSGeometryEngine defaultGeometryEngine];

    // Get a "circle" around the point, using the 1 decimal degree ~= 69 miles.
    AGSPolygon *circle = [ge bufferGeometry:point byDistance:radiusInMiles/69];

    return circle;
}

But remember that this is approximating the conversion between decimal degrees and meters, which is not constant for longitude as latitude varies.

So, it really depends on what you are generating the 10 mile radius geometry for and (in short) how far north or south of the equator. Your solution may be good enough for what you want, but bear in mind that a degree of longitude will be very much less than 69 miles as you approach the poles. On the other hand, your application users may keep asking you why the "circle" is elliptical, and that might be a bigger headache than considering some things that might be more than 10 miles away.

KunalMehta

Thanks nfurness and Technobrat for your solutions.

Both work, however, per nfurness's solution using buffer around the center point and webMercatorSpatialReference, I am getting an oval shape rather than a circle. Is this expected?

NFurness

The units will be decimal degrees.

What you might find useful is to buffer around your center-point.

Try something like this:

-(AGSPolygon*) circleWithCenter:(AGSPoint*)point radius:(double)radiusInMiles
{
    AGSGeometryEngine *ge = [AGSGeometryEngine defaultGeometryEngine];

    // Get a point in a spatial reference whose unit is Meters.
    AGSPoint *pointToBufferAround = (AGSPoint *)[ge projectGeometry:point toSpatialReference:[AGSSpatialReference webMercatorSpatialReference]];

    // Get a "circle" around it, using the unit Meters (1 mile ~= 1609.344 meters).
    AGSPolygon *circle = [ge bufferGeometry:pointToBufferAround byDistance:radiusInMiles*1609.344];

    // Project the output back to the projection of the input point (which is presumably what you're after).
    circle = (AGSPolygon *)[ge projectGeometry:circle toSpatialReference:point.spatialReference];

    return circle;
}

That will use Meters (WebMercator's units). Note that your output may not be what you expect as the input or output approaches the poles. Also, there's no guarantee how many points the output polygon will have in its boundary.

DiveshGoyal

Since you're using the WGS84 spatial reference, the value 10 is assumed to be in decimal degrees.
At the equator, 1 degree = 69 miles (approx).
So if you want 10 miles, you should use 10/69 as radius

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Enlaces Rápidos

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