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

时间:2015-07-16 17:59:06

标签: javascript gis arcgis esri arcgis-js-api

我试图在两点之间划一条线。我已经尝试过每个符号组合(SimpleLineSymbol,CartographicLineSymbol)和Polyline几何体及其构造函数,但是一条线不会出现在(在开放的街道地图上)。

这是一次尝试:

      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

3 个答案:

答案 0 :(得分: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);
    }
  });

答案 1 :(得分:1)

这只是你的JSFiddle的一个错字。你错过了第二点的y值。

请参阅下面更新的带有y值的JSFiddle。我还调整了缩放级别,以便您可以看到该线条。请记住,对于每个点,第一个值是x(经度在4326),第二个值是y(纬度在4326)。

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

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

答案 2 :(得分:0)

问题是我的图书馆的排序。我需要将ESRI颜色库移动到需求列表中的某些dojo图表库之上。我会尽快更新我的回答。这是一个超级模糊的库冲突,因为没有发生错误(遗憾的是我花了几个小时来调试......)