如何在ArcGIS API for JavaScript中的两点之间画一条线

Question

I'm trying to draw a line between two points. I've tried every combination of symbols (SimpleLineSymbol, CartographicLineSymbol) and the Polyline geometry and their constructors, but a line will not show up on (on open street map).

Here's one attempt:

      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)

Seems like this should be pretty straightforward. Any ideas what might be going on?

JsFiddle

Answer 1

Try This code. I got it to work for all sorts of lines.

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

Answer 2

It's just a typo in your JSFiddle. You're missing a y-value for the second point.

See below an updated JSFiddle with the y-value. I also adjusted the zoom level so you can see the line. Remember that for each point, the first value is x (longitude in 4326) and the second value is y (latitude in 4326).

lineGeometry.addPath([[0,0], [10,]])

http://jsfiddle.net/rkgtv8ho/2/#share

Answer 3

The problem was an ordering of my libraries. I needed to move the ESRI color library above some dojo charting libraries in the requires list. Will update my answer soon. This was a super obscure library conflict, since no errors occured (sadly took me a few hours too many to debug...)