arcgis for js學習之Draw類
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Draw類的詳解</title>
<meta charset="utf-8" />
<!-- 繪圖功能說明：
draw類可以在地圖中點擊一點進行畫點或者划線
1、點擊添加一個點。
2、多個點的繪制雙擊添加最后一個點。
3、多線段或者多邊形點擊添加頂點，雙擊添加最后一點。
4、自由線和自由面開始按住鼠標左鍵繪制,放手繪完成。
5、划線時點擊開始，鼠標左鍵放開時結束。
-->
<!-- 構造函數：
new Draw(map,options?)
-->
<!-- 常量：
ARROW:畫一個箭頭
CIRCLE:畫一個圓
ODWN_ARROW:指向下方的箭頭
ELLIPSE:畫一個橢圓
EXTENT:某一程度
FREEHAND_POLYGON:徒手多邊形
FREEHAND_POLYLINE;徒手線
LEFT_ARROW:向左的箭頭
LINE:一條線
MULTI_POINT:多個點
POINT:點
POLYGON:多邊形
POLYLINE;折線
RECTANGLE:矩形
RIGHT-ARROW:一個箭頭
TRIANGLE:畫一個三角形
UP_ARROW:畫一個箭頭
-->
<!-- 屬性：
1、fillSymbol:多邊形的樣式
2、lineSymbol:線的樣式
3、markerSymbol:點的樣式
4、respectDrawingVertexOrder:幾個拓撲
-->
<!-- 方法：
activate(geometryType,options):激活工具欄
deactivate():關閉
finishDrawing():完成繪制，onDrawEnd事件
setFillSymbol(fillSymbol):設置填充樣式
setLineSymbol(lineSymbol):設置線的樣式
setMarkerSymbol(marjerSymbol):設置點的樣式
setRespectDrawingVertexOrder(set):設置是否修改多邊形的幾何拓撲
-->
<!-- 事件：
draw-complete:繪制完成時觸發
draw-end:此事件被棄用
-->
<!-- 構造方法詳情：
new Draw(map,options?)
options的屬性：
drawTime:設定時間繪制下一個點
showTooltips:工具提示
tolerance:寬容，徒手畫時決定鼠標移動多遠添加一個新點
tooltipPffset:確定多遠抵消鼠標指針的工具提示
-->
<script>
//實例一：是否顯示showTooltips
require([
"esri/map", "esri/toolbars/draw"
], function (Map, Draw) {
var map = new Map();
var toolbar = new Draw(map, {
showTooltips: false
});
});
//實例二：設置drawTime
require(["esri/map", "esri/toolbars/draw"], function (Map, Draw) {
var map = new Map();
var toolbar = new Draw(map, {
tooltipOffset: 20,
drawTime: 90
});
});
//實例三：激活 active(geometryType,options),進行畫點
require(["esti/toolbars/draw"], function (Draw) {
var toolbar = new Draw();
toolbar.active(Draw.POINT);
toolbar.finishDraw();//完成繪制
})
//實例四：draw-end事件，返回類型為一個geometry對象
require(["esri/toolbars/draw", "esri/graphic"], function (Draw, Graphic) {
function createToolbar(map) {
var toolbar = new Draw(map);
toolbar.on("draw-end", addToMap);
}
function addToMap(evt) {
var graphic = new Graphic(evt.geometry, symbol);
map.graphics.add(graphic);
}
});
</script>
</head>
<body>
</body>
</html>