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>