ArcGIS For JavaScript API Drawing Tool(繪圖工具)————（十七）
阿新 • • 發佈：2019-01-27
描述：
您可以使用繪圖工具欄繪製在地圖上的多種幾何形狀。.
esri.toolbars.Draw
常量
| 常量 | 描述 |
|---|---|
| ARROW | 繪製箭頭. |
| UP_ARROW | 繪製一個上箭頭. |
| DOWN_ARROW | 繪製一個下箭頭 |
| LEFT_ARROW | 繪製一個左箭頭. |
| RIGHT_ARROW | 繪製一個右箭頭 |
| POINT | 繪製點. |
| MULTI_POINTPOINT | 繪製多點. |
| ELLIPSE | 繪製一個橢圓形. |
| POLYGON | 繪製多邊形. |
| POLYLINE | 繪製折線. |
| FREEHAND_POLYGON | 手繪多邊形. |
| FREEHAND_POLYLINE | 手繪折線. |
| LINE | 繪製線 |
| RECTANGLE | 繪製一個矩形 |
| CIRCLE | 繪製圓. |
| TRIANGLE | 繪製一個三角形. |
| EXTENT | Draws an extent box. |
方法
事件
Fired when the user has ended drawing. 這個事件物件具有以下屬性
|
程式碼分析如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9"> <meta name="viewport" content="width=device-width,user-scalable=no"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>地圖工具欄</title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script>var dojoConfig = { parseOnLoad: true // 解析載入 };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script> <script> // 匯入包 dojo.require("esri.map"); dojo.require("esri.toolbars.draw"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); var map, toolbar, symbol, geomTask; function init() { map = new esri.Map("map", { basemap: "streets", // 指定的地圖底圖。以下是有效的選項："streets","satellite","hybrid","topo","gray","oceans","national-geographic","osm". center: [-15.469, 36.428], // 經緯度 zoom: 3 // 縮放深度 }); dojo.connect(map, "onLoad", createToolbar); // 繫結載入事件 } function createToolbar(themap) { toolbar = new esri.toolbars.Draw(map); // esri.toolbars.Draw(map, options) dojo.connect(toolbar, "onDrawEnd", addToMap); // 繪製完成觸發 } function addToMap(geometry) { toolbar.deactivate(); // 關閉工具欄並激活地圖導航. map.showZoomSlider(); //在地圖上顯示的縮放滑塊 // 判斷幾何圖形的型別 switch (geometry.type) { case "point": var symbol = new esri.symbol.SimpleMarkerSymbol( esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE, // 樣式,STYLE_CIRCLE(●),STYLE_CROSS(+),STYLE_DIAMOND(◆),STYLE_SQUARE(■),STYLE_X(X) 10, // 畫素 new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_SOLID, // 樣式,STYLE_DASH(破折號),STYLE_DASHDOT(點劃線),STYLE_DASHDOTDOT,STYLE_DOT(點),STYLE_NULL,STYLE_SOLID(實線) new dojo.Color([255,0,0]), // 顏色 1 // 畫素 ), new dojo.Color([0,255,0,0.25]) // 顏色和透明度 ); break; case "polyline": var symbol = new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0]), 1 ); break; case "polygon": var symbol = new esri.symbol.SimpleFillSymbol( esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2 ), new dojo.Color([255,255,0,0.25]) ); break; case "extent": var symbol = new esri.symbol.SimpleFillSymbol( esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([255,0,0]), 2 ), new dojo.Color([255,255,0,0.25]) ); break; case "multipoint": var symbol = new esri.symbol.SimpleMarkerSymbol( esri.symbol.SimpleMarkerSymbol.STYLE_DIAMOND, 20, new esri.symbol.SimpleLineSymbol( esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([0,0,0]), 1 ), new dojo.Color([255,255,0,0.5]) ); break; } var graphic = new esri.Graphic(geometry, symbol); map.graphics.add(graphic); // 將繪圖加入到圖層中 } dojo.ready(init); // 初始化載入 </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:75px;text-align:left;font-weight:bold;font-size:14px;color:#400D12;overflow:hidden;"> <span>繪製:<br /></span> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.POINT);map.hideZoomSlider();}">Point(點)</button> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.MULTI_POINT);map.hideZoomSlider();}">Multipoint(多點)</button> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.LINE);map.hideZoomSlider();}">Line(線)</button> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.POLYLINE);map.hideZoomSlider();}">Polyline(折線)</button> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.POLYGON);map.hideZoomSlider();}">Polygon(多邊形)</button> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYLINE);map.hideZoomSlider();}">Freehand Polyline(手繪折線)</button> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.FREEHAND_POLYGON);map.hideZoomSlider();}">Freehand Polygon(手繪多邊形)</button> <!-- 箭頭,三角形,圓形和橢圓型別所有繪製的多邊形符號 --> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.ARROW);map.hideZoomSlider();}">Arrow(箭頭)</button> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.TRIANGLE);map.hideZoomSlider();}">Triangle(三角形)</button> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.CIRCLE);map.hideZoomSlider();}">Circle(圓形)</button> <button data-dojo-type="dijit.form.Button" data-dojo-props="onClick:function(){toolbar.activate(esri.toolbars.Draw.ELLIPSE);map.hideZoomSlider();}">Ellipse(橢圓)</button> </div> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> </div> </div> </body> </html>
效果如下：
