如何将带有英里文本的半径线添加到 ArcGIS API for JavaScript 中的动态圆

Question

我即时创建了一个圆，但我未能创建一条带有以英里为单位显示半径的文本的半径线。我使用以下代码动态创建了一个圆圈：

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

为方便起见，这是我的 JS Fiddle：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]);
    }
  });
});

如何将带有英里文本的半径线添加到 ArcGIS API for JavaScript 中的动态圆

How can I add radius line with miles text to a dynamic circle in ArcGIS API for JavaScript

arcgis-js-api

esri-javascript-api