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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.