ArcGIS API for JavaScript——绘制工具（Draw）

ArcGIS API for JavaScript——绘制工具（Draw）

---

在WEB GIS开发过程中，我们不可避免的会用到绘制工具。比如利用绘制工具执行查询任务和利用绘制工具绘制空间分析的处理范围等。在arcgis api中实现绘制操作主要借助Toolar里的Draw工具。

创建绘制工具样式

---

代码中我用了BootStrap和fontawesome框架，大家初次尝试可以忽略class

<div class="drawTool" >
     <button class="btn btn-info"  id="point">点button>
     <button class="btn btn-info" id="line">线button>
     <button class="btn btn-info" id="polygon">面button>
     <button class="btn btn-info" id="circle">圆button>
     <button class="btn btn-info" id="rectangle">方button>
     <button class="btn btn-danger" id="quxiao">停button>
     <button class="btn btn-danger" id="remove"><span class="fa fa-close">span>button>
div>

构造绘制工具

---

大家实际使用可以重新构造图形渲染样式，我这里都是用默认的渲染样式

      var draw=new Draw(map);
            //定义图形样式
      draw.markerSymbol=new SimpleMarkerSymbol();
      draw.lineSymbol=new SimpleLineSymbol();
      draw.fillSymbol=new SimpleFillSymbol();

激活绘制工具

---

这里我是用了jQuery的选择器。原理就是通过监听鼠标点击哪个按钮，然后获得按钮的id，通过draw.activate(Draw[tool])来激活对应的绘制工具 。当点击取消按钮是，触发draw.deactivate()方法停止绘制。点击remove按钮时触发map.graphics.clear() 移除地图上的图形

$(".drawTool button").click(function () {
        var tool=null;
        switch (this.id){
            case "point": tool="POINT";break;
            case "line": tool="LINE";break;
            case "polygon": tool="POLYGON"; break;
            case "circle": tool="CIRCLE"; break;
            case "rectangle": tool="RECTANGLE"; break;
            case "quxiao": draw.deactivate(); break;
            case "remove": map.graphics.clear();break;
        }
        if(tool !== null){
            draw.activate(Draw[tool]);   //激活对应的绘制工具
        }
        }
    );

将图形添加到地图

---

获取draw-complete事件返回的图形evt.geometry，构造Graphic，再通过map.graphics.add()方法添加到地图

    draw.on("draw-complete",drawEndEvent);
    function drawEndEvent(evt) {
            //添加图形到地图
        var symbol;
        if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
             symbol = draw.markerSymbol;
        } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = draw.lineSymbol;
        }
        else {
            symbol = draw.fillSymbol;
        }
        map.graphics.add(new Graphic(evt.geometry,symbol))
    }

结果如下（实际项目中绘制完图形后还执行了查询任务）：

GIS技术交流：GISGO（http://www.gisgo.top）