arcgis api for js 3.26之Draw工具分析講解
1.僅僅對官網中Draw工具的一個例子進行分析
以上是實現的東西
2.全部程式碼
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Shapes and Symbols</title> <link rel="stylesheet" href="https://js.arcgis.com/3.26/esri/css/esri.css"> <style> #info { top: 20px; color: #444; height: auto; font-family: arial; right: 20px; margin: 5px; padding: 10px; position: absolute; width: 115px; z-index: 40; border: solid 2px #666; border-radius: 4px; background-color: #fff; } html, body, #mapDiv { padding:0; margin:0; height:100%; } button { display: block; } </style> <script src="https://js.arcgis.com/3.26/"></script> <script> var map, tb; require([ "esri/map", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/graphic", "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!" ], function( Map, Draw, SimpleMarkerSymbol, SimpleLineSymbol, PictureFillSymbol, CartographicLineSymbol, Graphic, Color, dom, on ) { map = new Map("mapDiv", { basemap: "streets", center: [-25.312, 34.307], zoom: 3 }); map.on("load", initToolbar); // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples var markerSymbol = new SimpleMarkerSymbol(); markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z"); markerSymbol.setColor(new Color("#00FFFF")); // lineSymbol used for freehand polyline, polyline and line. var lineSymbol = new CartographicLineSymbol( CartographicLineSymbol.STYLE_SOLID, new Color([255,0,0]), 10, CartographicLineSymbol.CAP_ROUND, CartographicLineSymbol.JOIN_MITER, 5 ); // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png var fillSymbol = new PictureFillSymbol( "images/mangrove.png", new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color('#000'), 1 ), 42, 42 ); function initToolbar() { tb = new Draw(map); tb.on("draw-complete", addGraphic); // event delegation so a click handler is not // needed for each individual button on(dom.byId("info"), "click", function(evt) { if ( evt.target.id === "info" ) { return; } var tool = evt.target.id.toLowerCase(); map.disableMapNavigation(); tb.activate(tool); }); } function addGraphic(evt) { //deactivate the toolbar and clear existing graphics tb.deactivate(); map.enableMapNavigation(); // figure out which symbol to use var symbol; if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") { symbol = markerSymbol; } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") { symbol = lineSymbol; } else { symbol = fillSymbol; } map.graphics.add(new Graphic(evt.geometry, symbol)); } }); </script> </head> <body> <div id="info"> <div>Select a shape then draw on map to add graphic</div> <button id="Point">Point</button> <button id="Multipoint">Multipoint</button> <button id="Line">Line</button> <button id="Polyline">Polyline</button> <button id="FreehandPolyline">Freehand Polyline</button> <button id="Triangle">Triangle</button> <button id="Extent">Rectangle</button> <button id="Circle">Circle</button> <button id="Ellipse">Ellipse</button> <button id="Polygon">Polygon</button> <button id="FreehandPolygon">Freehand Polygon</button> </div> <div id="mapDiv"></div> </body> </html>
3.進行分析
此次主要是對指令碼進行分析
3.1 請求模組
<script src="https://js.arcgis.com/3.26/"></script>
以上是引入esri api的網上模組url，可以下載離線包並呼叫。
require([ "esri/map", "esri/toolbars/draw", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", "esri/graphic", "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!" ], function( Map, Draw, SimpleMarkerSymbol, SimpleLineSymbol, PictureFillSymbol, CartographicLineSymbol, Graphic, Color, dom, on ){
……}
一些基礎的模組：map是載入地圖用的；draw是為了new個畫圖工具類；SimpleMarkerSymbol是點符號；SimpleLineSymbol線符號；PictureFillSymbol填充符號（為了在圖層上畫多邊形）；CartographicLineSymbol實線或者虛線（像SimpleLineSymbol，可定製）；graphic用於新建圖層，一個圖層可以包含幾何圖形，符號，屬性，屬性框等；Color是定義符號顏色用；dom是操作節點；on是用於繫結事件；domReady!是用於等待將require的模組全載入後再執行指令碼的，最好寫上，不是功能模組。
3.2 載入地圖
map = new Map("mapDiv", { basemap: "streets", center: [-25.312, 34.307], zoom: 3 }); map.on("load", initToolbar);
程式碼分析：new一個map圖層，容器的id是“mapDiv”（在body標籤內先寫好），底圖是“streets”，也可以通過其它方式新增底圖，這裡就不細講了。center: [-25.312, 34.307]是定義了中心點座標，zoom: 3即是地圖顯示等級；map.on("load", initToolbar);就是地圖繫結事件，在載入事件發生的時候，執行initToolbar。
3.3 定義initToolbar功能
3.3.1 定義符號
Draw工具在繪製符號的時候，應該填充一些符號。所以首先應該定義好符號的型別。比如點、線、面對應的符號型別都有所不同的。
定義點符號：
var markerSymbol = new SimpleMarkerSymbol();
markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
markerSymbol.setColor(new Color("#00FFFF"));以上是new一個點符號，markerSymbol.setPath是將一個點符號的SVG路徑傳遞過來，以求定製點符號的樣式；如果沒啥特殊需求的話，直接markerSymbol.STYLE_CIRCLE;就可以了，這是讓點符號定義成一個圓。
定義線符號：
var lineSymbol = new CartographicLineSymbol(
CartographicLineSymbol.STYLE_SOLID, //實線
new Color([255,0,0]), //顏色
10, //粗細
CartographicLineSymbol.CAP_ROUND, //線在終點處是圓的（還有其它口味，可以自行查）
CartographicLineSymbol.JOIN_MITER, //折線處表現的形式（有多種口味，可自查）
5 //兩條線連線的閾值
);定義面符號：
var fillSymbol = new PictureFillSymbol(
"images/mangrove.png", //填充符號內部影象
// 因為這是面符號，肯定有邊框，邊框就是線符號鴨
//就得定義個線符號
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color('#000'),
1
),
42, //內部填充影象寬度(畫素為單位)
42 //內部填充影象長度(畫素為單位)
);圖片可以隨意定義，一下是小生的一個例圖：
此生無悔入東方！來世願生幻想鄉！ 不好意思，跑題了_(:з」∠)_。。
3.3.2 定義initToolbar函式
function initToolbar() {
tb = new Draw(map); //new一個畫筆工具，並指定關聯的容器
tb.on("draw-complete", addGraphic); //繫結draw-complete事件，畫筆畫好後，
//執行addGraphic函式
//點選info的DIV時，觸發回撥函式
on(dom.byId("info"), "click", function(evt) {
//如果點選的只是框，那就啥也不做
if ( evt.target.id === "info" ) {
return;
}
//如果是按鈕，就獲取點選按鈕的型別
var tool = evt.target.id.toLowerCase();
//讓地圖導航功能禁用
map.disableMapNavigation();
//啟用按鈕對應的畫圖工具
tb.activate(tool);
});
}3.3.3 定義addGraphic函式
function addGraphic(evt) {
//停止Draw工具
tb.deactivate();
//恢復地圖的導航功能
map.enableMapNavigation();
// 以下是根據Draw出來的符號，通過判斷型別，加入不同的符號
var symbol;
if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
symbol = markerSymbol;
} else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
symbol = lineSymbol;
}
else {
symbol = fillSymbol;
}
//將利用符號將定義的圖形畫出來，並加入地圖容器中
map.graphics.add(new Graphic(evt.geometry, symbol));
}