基础功能---交互画图

1.效果图

2.引入模块

"esri/toolbars/draw",
"esri/graphic",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleFillSymbol",

3.像是绑定小部件的进阶版

都是使用switch选择合适的操作方法

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

    }
   });

具有改进的是，引入on模块，toolbar通过switch决定各自操作方法（这里还不是太明白@@@标记）

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

4.贴代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>WebGIS</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/3.28/dijit/themes/tundra/tundra.css"/>
    <script  type="text/Javascript" src="https://js.arcgis.com/3.28/"></script>
    <style type="text/css">
        .MapClass{
            width:100%;
            height:800px;
            border:1px solid #000;
        }
    </style>
    <script type="text/javascript">

        require(["esri/map","dojo/dom","dojo/on",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "dojo/query",
                    "esri/toolbars/draw",
                    "esri/graphic",
                    "esri/symbols/SimpleLineSymbol",
                    "esri/symbols/SimpleMarkerSymbol",
                    "esri/symbols/SimpleFillSymbol",
                    "dojo/domReady!"],
            function (Map,dom,on, ArcGISDynamicMapServiceLayer,query, Draw, SimpleLineSymbol,Graphic,SimpleMarkerSymbol,SimpleFillSymbol) {
            var map = new esri.Map("MyMapDiv");
            var layer = new ArcGISDynamicMapServiceLayer
            ("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer");
            map.addLayer(layer)
            var toolbar = new Draw(map, { showTooltips: true });

            var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, 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]));
            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();
            });
           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>
</head>
<body>
    <div id="MyMapDiv" class="MapClass"></div>
    <button>绘制点</button>
    <button>绘制折线</button>
    <button>绘制面</button>
    <button>徒手线</button>
    <button>徒手面</button>
</body>
</html>

拓展

将交互画图与空间查询结合。