Question

以下代码在ArcGIS地图上的图形图层中添加了一个给定半径的圆。如何添加将圆的中心连接到圆上任意点到图形图层的线。

基本上问题是如何计算圆上的点，绘制一条将中心连接到圆上的点并将其添加到图形层的线。

    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();
            });
        }
    },

Answer 1

我能够绘制一条线并使用以下内容将其添加到图形层。 [-XX.XXXXXXXXXXXX，YY.YYYYYYYYYYY]是地图上的一个随机点，现在只剩下要在圆上找到一个点。所以现在问题变成如何找到一个距离同一纬度的已知点（圆心）X英里的点。

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

Answer 2

这是我想出的最好的一个和它的工作。

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

如何从圆的中心添加半径线到圆上的点

2 个答案: