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>