0

The following code adds a circle of given radius to the graphics layer on an ArcGIS map. How can i add a line that joins center of the circle to any point on the circle to the graphics layer.

Basically the question is how do i calculate a point on the circle, draw a line that joins the center to the point on the circle and add it to the graphics layer.

 performSearchPoint : function(e) {
 var self = this;
 var radius = $('#radius-distance').val();
 if(radius > 0 && radius < 100000){
 $('#besideMouse').removeClass('hide');
 $('#besideMouse').show();
 var loadingBMint = setInterval(this.loadingBM, 0);
 var searchPointClick = OURAPP.App.Map.on("click",function(evt) {
 loadingBMint = clearInterval(loadingBMint);
 $('#besideMouse').hide();
 var radius = $('#radius-distance').val();
 var units = $("input:radio[name='unitsGroup']:checked").val();
 if (units == "miles"){
 units = "9035"; // if we use GeometryService
 } else {
 units = "9003"; // if we use GeometryService
 }
 //clear only search graphics
 for ( var gr in OURAPP.App.Map.graphics.graphics) {
 if(OURAPP.App.Map.graphics.graphics[gr].infoTemplate != null){
 var template = OURAPP.App.Map.graphics.graphics[gr].infoTemplate;
 if(template != "undefined" || template != null){ 
 if(template.title.trim() == "Search Graphic"){
 OURAPP.App.Map.graphics.remove(OURAPP.App.Map.graphics.graphics[gr]);
 } 
 }}}
 /*do buffer geometry for draw circle and use the circle geometry to get the features*/
 var geoService = new OURAPP.esri.GeometryService("http://XXXX:YYYY/arcgis/rest/services/Utilities/Geometry/GeometryServer");
 var params = new OURAPP.esri.BufferParameters();
 params.geometries = [ evt.mapPoint ];
 params.distances = [ radius ];
 params.unit = units;
 params.bufferSpatialReference = OURAPP.App.Map.spatialReference;
 params.outSpatialReference = new OURAPP.esri.SpatialReference(4326);
 var bufferPolygon = new OURAPP.esri.Polygon;
 bufferPolygon.spatialReference = new OURAPP.esri.SpatialReference(4326);
 geoService.buffer(params,function(geometries) {
 var symbol = new OURAPP.esri.SimpleFillSymbol()
 .setColor(null).outline.setColor("red");
 dojo.forEach(geometries,function(geometry) {
 geometry.spatialReference = new OURAPP.esri.SpatialReference(4326);
 var graphic = new OURAPP.esri.Graphic(geometry,symbol);
 // add name to identify the search graphics
 var template = new OURAPP.esri.InfoTemplate(graphic.geometry);
 template.setTitle("Search Graphic");
 template.setContent("Map Query circle with Radius: " + radius);
 graphic.setInfoTemplate(template); 
 OURAPP.App.Map.graphics.add(graphic);
 bufferPolygon = geometry;
 OURAPP.App.Map.setExtent(graphic.geometry.getExtent().expand(2));
 });
 self.searchType="Distance Search from point";
 self.nameofplace=radius + " "+$("input:radio[name='unitsGroup']:checked").val();
 self.showCount(bufferPolygon);
 });
 searchPointClick.remove();
 });
 }
 },

I was able to draw a line and add it to the graphics layer using the following. The [-XX.XXXXXXXXXXXX,YY.YYYYYYYYYYY] is a random point on the map, Now only thing left is to find a point on a circle. So now the question becomes how to find a point which is X miles from a known point(Center of the circle) along the same latitude.

 var lineSymbol = new OURAPP.esri.CartographicLineSymbol(
 OURAPP.esri.CartographicLineSymbol.STYLE_SOLID,
 new OURAPP.esri.Color([255,0,0]), 2,
 OURAPP.esri.CartographicLineSymbol.CAP_SQUARE,
 OURAPP.esri.CartographicLineSymbol.JOIN_MITER, 5
 );
 var lineGeometry = new OURAPP.esri.Polyline; 
 lineGeometry.spatialReference = new OURAPP.esri.SpatialReference(4326);
 lineGeometry.addPath([[evt.mapPoint.getLongitude(),evt.mapPoint.getLatitude()], [-XX.XXXXXXXXXXXX,YY.YYYYYYYYYYY]])
 var lineGraphic = new OURAPP.esri.Graphic(lineGeometry, lineSymbol);
 OURAPP.App.Map.graphics.add(lineGraphic);
PolyGeo
65.5k29 gold badges115 silver badges350 bronze badges
asked Aug 19, 2015 at 17:47
0

1 Answer 1

1

This is the best possible one i came up with and its working.

 var lineSymbol = new OURAPP.esri.CartographicLineSymbol(
 OURAPP.esri.CartographicLineSymbol.STYLE_SOLID,
 new OURAPP.esri.Color([255,0,0]), 2,
 OURAPP.esri.CartographicLineSymbol.CAP_SQUARE,
 OURAPP.esri.CartographicLineSymbol.JOIN_MITER, 5
 );
 var radiusInMeters; 
 if (selectedUnit == "miles"){
 radiusInMeters = radius*1609.34; //have to convert it to meters. 
 } else {
 radiusInMeters = radius*0.3048; //have to convert it to meters. 
 }
 // Calculate the new map point on the circle.
 var radians = Math.PI/180;
 var ltLong = OURAPP.esri.webMercatorUtils.xyToLngLat(evt.mapPoint.x + radiusInMeters*Math.cos(radians), evt.mapPoint.y + radiusInMeters*Math.sin(radians));
 // Calculate the new map point on the circle. 
 var lineGeometry = new OURAPP.esri.Polyline; 
 lineGeometry.spatialReference = new OURAPP.esri.SpatialReference(4326);
 lineGeometry.addPath([[evt.mapPoint.getLongitude(),evt.mapPoint.getLatitude()], ltLong]);
 var lineGraphic = new OURAPP.esri.Graphic(lineGeometry, lineSymbol);
answered Aug 20, 2015 at 18:51

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.