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

迈不过友情╰ 2022-06-16 10:44 660阅读 0赞

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

--------------------

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

## 创建绘制工具样式 ##

--------------------

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

## 构造绘制工具 ##

--------------------

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

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))
        }

结果如下（实际项目中绘制完图形后还执行了查询任务）：  
![这里写图片描述][SouthEast]

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

[SouthEast]: /images/20220616/74c3feb25b5944cb8d76941fe144d020.png
[GISGO_http_www.gisgo.top]: http://www.gisgo.top/