arcgis api for javascript learning (e) achieve mapping tool

1, this is implemented as a function of the interaction between the mouse and the map, it is possible to draw graphics in different shapes on the map
2, code portion as mentioned main functions related functions Graphic
<!DOCTYPE html>
<html>
<head>
    <title>地图绘制工具</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.29/"></script>
    <style>
        #map{
            position:relative;
            height:400px;
            width:100%;
        }
    </style>
</head>
<body>


<div id="drawTool">
    <button id="multipoint" >绘制点</button>
    <button id="line">Button</Drawing the polyline> 
    < Button ID = "Polygon" > Draw Area </ Button > 
    < Button ID = "Circle" > draw a circle </ Button > 
    < Button ID = "Rectangle" > drawing a rectangle </ Button > 
    < Button ID = "Remove" > Clear all the patterns </ Button > 
    < Button ID = "disabledraw" > Close drawing tool </ Button > 

</div>
<div id='map'>
</div>



<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'"
     style="background-color: #37a2ee">
    鱼吃鱼罐头 @版权所有
</div>


<script>
    require([
                "esri/map",
                "dojo/on",
                "esri/dijit/Basemap",
                "esri/dijit/BasemapLayer",
                "esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/toolbars/draw",
                "esri/graphic",
                "dojo/colors",
                "dojo/domReady!"],
            function (
                    Map,
                    on,
                    Basemap,
                    BasemapLayer,
                    SimpleMarkerSymbol,
                    SimpleLineSymbol, 
                    SimpleFillSymbol, 
                    the Draw, 
                    Graphic, 
                    Color) { 
                var Map =  new new the Map ( " Map " , { 
                    Basemap: ' OSM ' , 
                    Center: [ 122.127653 , 36.009423 ] 
                }); 
                // use the drawing tools on the Toolbar 
                var toolBar =  new new Draw (the Map); 

                // create a point feature 
                var pointSymbol =  new new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,new Color("#FFFCC"),12);
                //线要素
                lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([245, 0, 0]), 3);
                //面要素
                polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol, new Color([255, 245, 0, 0.25]));

                var drawTool = document.getElementById("drawTool");

                drawTool.onclick = function (evt) {
                    var ev = evt || window.event;
                    var target = ev.target || ev.srcElement;
                    if (target.nodeName.toLocaleLowerCase() == 'button') {
                        switch (target.id) {
                            case 'point':
                                toolBar.activate(Draw.POINT, {
                                    showTooltips: true
                                });
                                break;
                            case 'multipoint':
                                toolBar.activate(Draw.MULTI_POINT, {
                                    showTooltips: true
                                })
                                break;
                            case 'line':
                                toolBar.activate(Draw.POLYLINE, {
                                    showTooltips: true
                                })
                                break;
                            case 'polygon':
                                toolBar.activate(Draw.POLYGON, {
                                    showTooltips: true
                                })
                                break;
                            case 'circle':
                                toolBar.activate(Draw.CIRCLE, {
                                    showTooltips: true
                                })
                                break;
                            case 'rectangle':
                                toolBar.activate(Draw.RECTANGLE, {
                                    showTooltips: true
                                })
                                break;
                            case "remove":
                                map.graphics.clear();
                                break;
                            case 'disabledraw':
                                toolBar.deactivate();
                                break;
                        }
                    }
                }
                toolBar.on("draw-complete", drawEndEvent)
                function drawEndEvent(evt) {
                    //添加图形到地图
                    var symbol;
                    if (evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
                        symbol = pointSymbol;
                    } else if (evt.geometry.type === "line" || evt.geometry.type === "polyline") {
                        symbol = lineSymbol;
                    }
                    else {
                        symbol = polygonSymbol;
                    }
                    map.graphics.add(new Graphic(evt.geometry, symbol))
                }
            });
</script>


</body>
</html>
3, while the code also implements delete graphics and drawing tools function close
arcgis api for javascript learning (e) achieve mapping tool

Guess you like
