javascript - 如何在 ArcGIS API for JavaScript 中在两点之间绘制一条线

Question

我正在尝试在两点之间画一条线。我已经尝试了符号(SimpleLineSymbol、CartographicLineSymbol)和折线几何图形及其构造函数的每种组合，但线条不会显示在(在开放街道 map 上)。

这是一次尝试:

      var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10,
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );

       var lineGeometry = new Polyline(new SpatialReference({wkid:4326}));
       lineGeometry.addPath([[0,0], [10,0]])

       var lineGraphic = new Graphic(lineGeometry, lineSymbol);
       gl.add(lineGraphic)

看起来这应该非常简单。有什么想法可能会发生什么吗？

JsFiddle

Answer 1

试试这个代码。我让它适用于各种线路。

 var map, toolbar, symbol, geomTask;

  require([
    "esri/map", 
    "esri/toolbars/draw",
    "esri/graphic",

    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",

    "dojo/parser", "dijit/registry",

    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
    "dijit/form/Button", "dijit/WidgetSet", "dojo/domReady!"
  ], function(
    Map, Draw, Graphic,
    SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
    parser, registry
  ) {
    parser.parse();

    map = new Map("map", {
      basemap: "streets",
      center: [-15.469, 36.428],
      zoom: 3
    });

    map.on("load", createToolbar);

    // loop through all dijits, connect onClick event
    // listeners for buttons to activate drawing tools
    registry.forEach(function(d) {
      // d is a reference to a dijit
      // could be a layout container or a button
      if ( d.declaredClass === "dijit.form.Button" ) {
        d.on("click", activateTool);
      }
    });

    function activateTool() {
      var tool = this.label.toUpperCase().replace(/ /g, "_");
      toolbar.activate(Draw[tool]);
      map.hideZoomSlider();
    }

    function createToolbar(themap) {
      toolbar = new Draw(map);
      toolbar.on("draw-end", addToMap);
    }

    function addToMap(evt) {
      var symbol;
      toolbar.deactivate();
      map.showZoomSlider();
      switch (evt.geometry.type) {
        case "point":
        case "multipoint":
          symbol = new SimpleMarkerSymbol();
          break;
        case "polyline":
          symbol = new SimpleLineSymbol();
          break;
        default:
          symbol = new SimpleFillSymbol();
          break;
      }
      var graphic = new Graphic(evt.geometry, symbol);
      map.graphics.add(graphic);
    }
  });