Description:
You can use the Drawing toolbar to draw a variety of geometric shapes on a map.
Online demonstration: http: //help.arcgis.com/en/webapi/javascript/arcgis/samples/toolbar_draw/index.html
Reference help: http: //help.arcgis.com/en/webapi/javascript/arcgis/jsapi/#draw
| constant | describe |
|---|---|
| Arrow | Draw arrows. |
| up arrow | Draw an up arrow. |
| DOWN_ARROW | A Drawing Down Arrow |
| left arrow | Draw a left arrow. |
| right arrow | Draw a right arrow |
| spot | Draw points. |
| MULTI_POINTPOINT | Draw multiple points. |
| Ellipse | Draw an ellipse. |
| POLYGON | Draw polygons. |
| POLYLINE | Draw a broken line. |
| FREEHAND_POLYGON | Hand-drawn polygon. |
| FREEHAND_POLYLINE | Hand-drawn broken lines. |
| Line | Drawing line |
| Rectangle | Draw a rectangle |
| circle | Draw circles. |
| Triangle | Draw a triangle. |
| degree | Draw a range box. |
Method
| Geometry Type, Choose? | No | Activate the drawing geometry of the toolbar. Activate toolbar to disable map navigation. |
| Close () | No | Close the toolbar and activate map navigation. |
| finishDrawing() | No | Finally, the geometry is drawn and the onDrawEnd event is triggered. Use this method to draw polygons, polygons or point-to-multipoint. Get the device you touch in iTunes right away. |
| setFillSymbol(fillSymbol) | No | Set the fill symbol. |
| setLineSymbol(lineSymbol) | No | Setting Line Symbols |
| setMarkerSymbol(markerSymbol) | No | Setting Markup Symbols |
| SetRespectDrawing VertexOrder (Set) | No | Set whether the polygon geometry should be modified to correct topology. |
Event
| onDrawComplete() |
Triggered when the user finishes drawing. This event object has the following properties
|
||||
| onDrawEnd (Geometry) | Triggered when drawing is completed. |
<!DOCTYPE html> <html> <head> <meta http-equiv ="Content-Type"content ="text / html; charset = utf-8"> <meta name ="viewport"content ="width = device- width，user-scalable = no"> <meta name ="viewport"content ="initial-scale = 1，maximum-scale = 1，user-scalable = no"> <title> Maps Toolbar </ title> <link rel ="stylesheet"href ="https://js.arcgis.com/3.25/dijit/themes/nihilo/nihilo.css"> <link rel ="stylesheet"href ="https://js.arcgis.com/ 3.25 / esri / css / esri.css"> <style> html，body，＃mainWindow { font-family: sans-serif; Height: 100％; Width: 100％; } html，body { margin: 0; Fill: 0; } #header { height: 80px; Overflow: automatic; Fill: 0.5em; } </ style> <script src ="https://js.arcgis.com/3.25/"> </ script> <script> var map，toolbar，symbol，geomTask; //Import package require([ "esri / map"， "esri / toolbars / draw"， "esri / graphic"， "esri / symbols / SimpleMarkerSymbol"， "esri / symbols / SimpleLineSymbol"， "esri / symbols / SimpleFillSymbol" ， "dojo / parser"，"dijit / registry"， " "dijit / form / Button"，"dijit / WidgetSet"，"dojo / domReady!" ]，function( Map，Draw，Graphic， SimpleMarkerSymbol，SimpleLineSymbol，SimpleFillSymbol， parser，registry ){ parser.parse(); map = new Map("map"，{ basemap: "streets"，//Specified map base. (If your map is also available, you can modify the corresponding map service.) The default valid options are: "streets", "satellite", "hybrid", "topo", "grey". ocean "，"national-geographic"，"osm" .center: [ - 15.469,36.428]， zoom: 3 //Scaling }); map.on("load"，createToolbar); //Binding load events can add more than one //map.on("load"， //Loop through all dijits and connect onClick events to the button listener that activates the drawing tool registry.forEach(function(d){ // d is a reference to dijit, which can 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]); //Activate Drawing Tools map.hideZoomSlider(); } function createToolbar(themap){ toolbar=New Drawing (Map); //Create toolbar.on the drawing toolbar. ("draw-end"，addToMap); //Termination trigger } function addToMap(evt){ var Symbol; toolbar.deactivate(); //Close the toolbar and activate map navigation. map.showZoomSlider(); //The zoom slider shown on the map (something like the drag in screenshots) Switch ( evt.geometry.type){//Getting the geometric model depends on the name in the button Case "Points": 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); //Add drawings to layers } }); </ script> </ head> <body class ="nihilo"> <div id ="mainWindow"data-dojo-type ="dijit / layout / BorderContainer"data-dojo-props ="design: 'headline'"> <div id ="header"data-dojo-type ="dijit / layout / ContentPane"data-dojo-props ="region: 'top'"> <span>Draw:<br /> </ span> <Button data-dojo-type ="dijit / form / Button">spot</ button> <! - spot - > <Button data-dojo-type ="dijit / form / Button">Multipoint</ button> <! - Multipoint - > <button data-dojo-type ="dijit / form / Button"> Line </ button> <! <! - polygon - > <button data-dojo-type ="dijit / form / Button">Hand drawn broken line</ button> <! - Hand drawn broken line - > <button data-dojo-type ="dijit /form/Button ">Hand-drawn polygon</ button> <! - Hand-drawn polygon - > <Button data-dojo-type ="dijit / form / Button">Arrow</ button> <! - Arrow - > < button data -dojo-type ="dijit / form / Button"> Triangle </ button> <! - Triangle - > <button data-dojo-type ="dijit / form / Button"> Circle </ button> < ! - circular - > <button data-dojo-type ="dijit / form / Button"> Ellipse </ button> <! - Ellipse - > <button data-dojo-type ="dijit / form /Button ">rectangle</ button> <! - rectangle - > </ div> <div id ="map"data-dojo-type ="dijit / layout / ContentPane"data-dojo-props ="region: 'center'"> </ div> </ div> </ body> </ html>