1.仅仅对官网中Draw工具的一个例子进行分析

以上是实现的东西

2.全部代码

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Shapes and Symbols</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css">

    <style>
      #info {
        top: 20px;
        color: #444;
        height: auto;
        font-family: arial;
        right: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        width: 115px;
        z-index: 40;
        border: solid 2px #666;
        border-radius: 4px;
        background-color: #fff;
      }
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      button {
        display: block;
      }
    </style>

    <script src="https://js.arcgis.com/3.26/"></script>
    <script>
      var map, tb;

      require([
        "esri/map", "esri/toolbars/draw",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", 
        "esri/graphic", 
        "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, Draw,
        SimpleMarkerSymbol, SimpleLineSymbol,
        PictureFillSymbol, CartographicLineSymbol, 
        Graphic, 
        Color, dom, on
      ) {
        map = new Map("mapDiv", {
          basemap: "streets",
          center: [-25.312, 34.307],
          zoom: 3
        });
        map.on("load", initToolbar);

        // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));

        // lineSymbol used for freehand polyline, polyline and line. 
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10, 
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );

        // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
        // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
        var fillSymbol = new PictureFillSymbol(
          "images/mangrove.png",
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color('#000'), 
            1
          ), 
          42, 
          42
        );

        function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-complete", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }

        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 
          tb.deactivate(); 
          map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          map.graphics.add(new Graphic(evt.geometry, symbol));
        }
      });
    </script>
  </head>
  
  <body>
    
    <div id="info">
      <div>Select a shape then draw on map to add graphic</div>
      <button id="Point">Point</button>
      <button id="Multipoint">Multipoint</button>
      <button id="Line">Line</button>
      <button id="Polyline">Polyline</button>
      <button id="FreehandPolyline">Freehand Polyline</button>
      <button id="Triangle">Triangle</button>
      <button id="Extent">Rectangle</button>
      <button id="Circle">Circle</button>
      <button id="Ellipse">Ellipse</button>
      <button id="Polygon">Polygon</button>
      <button id="FreehandPolygon">Freehand Polygon</button>
    </div>

    <div id="mapDiv"></div>

  </body>
</html>

3.进行分析

此次主要是对脚本进行分析

3.1 请求模块

以上是引入esri api的网上模块url，可以下载离线包并调用。

require([
"esri/map", "esri/toolbars/draw",
"esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol",
"esri/graphic",
"esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
], function(
Map, Draw,
SimpleMarkerSymbol, SimpleLineSymbol,
PictureFillSymbol, CartographicLineSymbol,
Graphic,
Color, dom, on
){

……}

一些基础的模块：map是载入地图用的；draw是为了new个画图工具类；SimpleMarkerSymbol是点符号；SimpleLineSymbol线符号；PictureFillSymbol填充符号（为了在图层上画多边形）；CartographicLineSymbol实线或者虚线（像SimpleLineSymbol，可定制）；graphic用于新建图层，一个图层可以包含几何图形，符号，属性，属性框等；Color是定义符号颜色用；dom是操作节点；on是用于绑定事件；domReady!是用于等待将require的模块全加载后再运行脚本的，最好写上，不是功能模块。

3.2 载入地图

map = new Map("mapDiv", {
basemap: "streets",
center: [-25.312, 34.307],
zoom: 3
});
map.on("load", initToolbar);

代码分析：new一个map图层，容器的id是“mapDiv”（在body标签内先写好），底图是“streets”，也可以通过其它方式添加底图，这里就不细讲了。center: [-25.312, 34.307]是定义了中心点坐标，zoom: 3即是地图显示等级；map.on("load", initToolbar);就是地图绑定事件，在加载事件发生的时候，运行initToolbar。

3.3 定义initToolbar功能

3.3.1 定义符号

Draw工具在绘制符号的时候，应该填充一些符号。所以首先应该定义好符号的类型。比如点、线、面对应的符号类型都有所不同的。

定义点符号：

var markerSymbol = new SimpleMarkerSymbol();
 markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));

以上是new一个点符号，markerSymbol.setPath是将一个点符号的SVG路径传递过来，以求定制点符号的样式；如果没啥特殊需求的话，直接markerSymbol.STYLE_CIRCLE;就可以了，这是让点符号定义成一个圆。

定义线符号：

var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID, //实线
          new Color([255,0,0]), //颜色
          10, //粗细
          CartographicLineSymbol.CAP_ROUND,  //线在终点处是圆的（还有其它口味，可以自行查）
          CartographicLineSymbol.JOIN_MITER, //折线处表现的形式（有多种口味，可自查）
          5  //两条线连接的阈值
        );

定义面符号：

var fillSymbol = new PictureFillSymbol(
          "images/mangrove.png",  //填充符号内部图像
           // 因为这是面符号，肯定有边框，边框就是线符号鸭
           //就得定义个线符号
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color('#000'), 
            1
          ), 
          42, //内部填充图像宽度(像素为单位)
          42  //内部填充图像长度(像素为单位)
        );

图片可以随意定义，一下是小生的一个例图：

此生无悔入东方！来世愿生幻想乡！不好意思，跑题了_(:з」∠)_。。

3.3.2 定义initToolbar函数

function initToolbar() {
          tb = new Draw(map);       //new一个画笔工具，并指定关联的容器
          tb.on("draw-complete", addGraphic); //绑定draw-complete事件，画笔画好后，                
                                              //执行addGraphic函数

          //点击info的DIV时，触发回调函数
          on(dom.byId("info"), "click", function(evt) {
            //如果点击的只是框，那就啥也不做
            if ( evt.target.id === "info" ) {
              return;
            }
            //如果是按钮，就获取点击按钮的类型
            var tool = evt.target.id.toLowerCase();
            //让地图导航功能禁用
            map.disableMapNavigation();
            //激活按钮对应的画图工具
            tb.activate(tool);
          });
        }

3.3.3 定义addGraphic函数

function addGraphic(evt) {
          //停止Draw工具
          tb.deactivate(); 
          //恢复地图的导航功能
          map.enableMapNavigation();
          
          // 以下是根据Draw出来的符号，通过判断类型，加入不同的符号
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }
          //将利用符号将定义的图形画出来，并加入地图容器中
          map.graphics.add(new Graphic(evt.geometry, symbol));
        }

arcgis api for js 3.26之Draw工具分析讲解