既然是地图，那也是可以在上面写写画画的啦，所以，我又去研究了一下那个画图工具，画点，画面，画线等；
下面贴下代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo08</title>
<link rel="stylesheet" type="text/css" href="./arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="./arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
</head>
<body>
<div id="mapDiv" style="width:100%; height:600px; border:1px solid #000;"></div>
<button>绘制点</button>
<button>绘制折线</button>
<button>绘制面</button>
<button>徒手线</button>
<button>徒手面</button>
<script type="text/javascript" src="./arcgis_js_api/library/3.17/3.17/init.js"></script>
<script>
require([
"esri/map",
"dojo/dom",
"dojo/on",
"dojo/query",
"esri/toolbars/draw",
"esri/symbols/SimpleLineSymbol",
"esri/graphic",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",
"dojo/domReady!"
],function(Map,dom,on,query,Draw,SimpleLineSymbol,Graphic,SimpleMarkerSymbol,SimpleFillSymbol){
var map = new Map("mapDiv",{
logo:false,
basemap:"topo"
})
var toolbar = new Draw(map,{showTooltips:true});
console.log(toolbar)
//线符号
var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]),3);
//点符号
var marker= new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new dojo.Color([255, 0, 0]));
//面符号
var fill= new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new dojo.Color([255, 0, 0,0.3]));
//给绘图工具绑定绘图完成事件
on(toolbar,"draw-complete",function(result){
//获得几何图形
var geometry = result.geometry;
//获得形状类型
var type = geometry.type;
//声明图形对象
var graphic;
switch (type){
case "point":
graphic= new Graphic(geometry, marker);
break;
case "polyline":
graphic= new Graphic(geometry, lineSymbol);
break;
case "polygon":
graphic= new Graphic(geometry, fill);
break;
}
map.graphics.add(graphic);
//关掉绘图工具
toolbar.deactivate();
})
//给每一个button绑定相应的事件（激活绘图工具）
query("button").on("click",function(event){
var value = this.innerHTML;
switch(value){
case "绘制点":
//激活绘图工具（画点）
toolbar.activate(Draw.POINT,{
showTooltips:true
})
break;
case "绘制折线":
//激活绘图工具（画折线）
toolbar.activate(Draw.POLYLINE,{
showTooltips:true
})
break;
case "绘制面":
//激活绘图工具（绘制面）
toolbar.activate(Draw.POLYGON,{
showTooltips:true
})
break;
case "徒手线":
//激活绘图工具（徒手线）
toolbar.activate(Draw.FREEHAND_POLYLINE,{
showTooltips:true
})
break;
case "徒手面":
//激活绘图工具（徒手面）
toolbar.activate(Draw.FREEHAND_POLYGON,{
showTooltips:true
})
break;
}
})
})
</script>
</body>
</html>我觉得代码里面已经解释的很详细了，下面看下效果
绘制点：
绘制折线：
绘制面：
徒手线：
徒手面：
ok，大家可以去玩玩这个功能了，哈哈