我怎样才能用英里半径的文本行添加到在ArcGIS API动态圆为JavaScript

Question

我已经创建上飞了一圈，但我没能创造与文字半径线显示英里半径。我创建了一个动态循环使用下面的代码：

    var circle = new Circle({
      center: [31.0928, -17.9318],
      geodesic: true,
      radius: 2,
      radiusUnit: units.MILES
    });

为方便起见，这里是我JS提琴：http://jsfiddle.net/scriptstar/rL5nyt9j

所有我需要做的就是添加一个半径线和文本类似下面的图片。

Answer 1

我很少进行更新，以您的演示，并增加了行和文本。

在这里看到一个工作演示：http://jsfiddle.net/12nymwoL/

var map;
var graphicsArray = [];
require(["esri/map",
  "esri/toolbars/draw",
  "esri/geometry/Geometry",
  "esri/geometry/Point",
  "esri/geometry/Polyline",
  "esri/geometry/Polygon",
  "esri/graphic",
  "esri/geometry/Circle",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",
  "esri/symbols/TextSymbol",
  "esri/units",
  "esri/Color",
  "esri/InfoTemplate",
  "dojo/domReady!",
  "dojo/parser", "dijit/registry",
  "esri/geometry"
], function(Map, Draw,

  Geometry,
  Point,
  Polyline,
  Polygon,
  Graphic,
  Circle,
  SimpleMarkerSymbol,
  SimpleLineSymbol,
  SimpleFillSymbol,
  TextSymbol,
  units,
  Color,
  InfoTemplate, parser, registry) {
  map = new Map("map", {
    basemap: "topo",
    center: [31.0928, -17.9318],
    zoom: 13
  });

  map.on("load", function() {
    var point = new Point(31.0928, -17.9318);
    var pointAttributes = {
      city: "Harare",
      country: "Zimbabwe"
    };
    var pointInfoTemplate = new InfoTemplate("Airport");
    var pointSymbol = new SimpleMarkerSymbol();
    var pointGraphic = new Graphic(point, pointSymbol, pointAttributes).setInfoTemplate(pointInfoTemplate);
    graphicsArray.push(pointGraphic);

    var circle = new Circle({
      center: [31.0928, -17.9318],
      geodesic: true,
      radius: 2,
      radiusUnit: units.MILES
    });
    var circleSymbol = new SimpleFillSymbol().setColor(null).outline.setColor("black");
    var circleGraphic = new Graphic(circle, circleSymbol);
    graphicsArray.push(circleGraphic);

    var line = new Polyline({
      paths: [[[circle.center.x, circle.center.y], circle.rings[0][45]]]
    });
    var lineSymbol = new SimpleLineSymbol();
    var lineGraphic = new Graphic(line, lineSymbol);
    graphicsArray.push(lineGraphic);

    var textPoint = new Point((circle.rings[0][45][0] + circle.center.x)/2, (circle.rings[0][45][1] + circle.center.y)/2);
    var textSymbol = new TextSymbol("Radius: " + circle.radius + " Miles");
    var textPointGraphic = new Graphic(textPoint, textSymbol);
    graphicsArray.push(textPointGraphic);

    for (i = 0; i < graphicsArray.length; ++i) {
      map.graphics.add(graphicsArray[i]);
    }
  });
});