（十二）ArcGIS JS 在浏览器端编辑Graphic-优快云博客

本文链接：https://blog.youkuaiyun.com/idomyway/article/details/79475110

前言

在使用ArcGIS JS时，我们有时会根据需求对前端的Graphic进行实时编辑。在API中，封装了一个Edit（esri/toolbars/edit）工具，可以交互编辑已经存在的Graphic。
官网解释edit工具对Graphic进行的操作

To move a feature, once the Edit toolbar is activated with that feature, press down on the feature, drag it, then let go at the new location.
To add a vertex to a polyline or polygon, click on a “ghost” vertices and move it to the new location.
To delete a vertex from a polyline or polygon, right-click the vertex and select ‘Delete Vertex’ from the menu. Only valid for polyline with at least three vertices and polygons with at least four vertices.
To rotate or scale a geometry click the handle and move to the desired location.

即：

移动客户端图形
编辑结点（增加结点，删除结点）
拉伸客户端图形（是否保持长宽比例）
旋转客户端图形

准备

在本地部署ArcGIS JS API/调用在线的API
发布好的动态地图服务
http://blog.youkuaiyun.com/idomyway/article/details/79232011

思路

获取Map中的Graphic（本例中是利用Draw绘制）
实例化edit工具
赋予edit不同的操作工具
使用完关闭edit工具

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graphic</title>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js"></script>
    <style>
        .MapClass{
            width:100%;
            height:500px;
            border:1px solid #000;
        }
    </style>
    <script>
        require(["esri/map","dojo/dom","dojo/on","esri/toolbars/edit",
            "esri/toolbars/draw","esri/geometry/Polygon",
            "esri/layers/ArcGISDynamicMapServiceLayer", "esri/graphic",
            "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol","dojo/colors","dojo/query",
            "dojo/domReady!"
        ], function (
            Map,dom,on, Edit,Draw,Polygon, ArcGISDynamicMapServiceLayer, Graphic,
            SimpleLineSymbol, SimpleFillSymbol,Color,query
        ) {
            var map = new Map("mapDiv");
            var url = "http://localhost:6080/arcgis/rest/services/firstTest/cityService/MapServer";
            var layer = new ArcGISDynamicMapServiceLayer(url);
            map.addLayer(layer);
            //定义一个Edit对象
            var edit = new Edit(map);
            //定义一个graphic，为了后来的交互编辑
            var graphic;
            //给`添加客户端图形`按钮添加绑定事件
            on(dom.byId("add"),"click",function(){
                //定义线符号
                var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                //定义面符号
                var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,  new Color([255, 0, 0]));
                //点的坐标对
                var tb = new Draw(map);
                tb.activate("polygon");
                tb.on("draw-end", function (evt) {
                    graphic=new Graphic(evt.geometry,fill);
                    map.graphics.add(graphic);
                    tb.deactivate();
                });
            });
            //给按钮绑定事件
            query(".btn").on("click",function(event){
                var value=event.currentTarget.defaultValue;
                switch(value){
                    case "移动客户端图形":
                        //激活Edit工具（移动）
                        edit.activate(Edit.MOVE,graphic);
                        break;
                    case "拉伸客户端图形":
                        //构建Edit参数 注：拉伸的时候，可以指定是否保持长宽比例
                        var options = {
                            uniformScaling:true
                        };
                        //激活Edit工具（拉伸客户端图形）
                        edit.activate(Edit.SCALE,graphic,options);
                        break;
                    case "旋转客户端图形":
                        //激活Edit工具（旋转客户端图形）
                        edit.activate(Edit.ROTATE,graphic);
                        break;
                    case "编辑结点":
                        //构建Edit参数 注：编辑折点的时候，要指定是否能添加或者删除结点。
                        var options = {
                            allowAddVertices:true,//能添加结点
                            allowDeleteVertices: true//能删除结点
                        };
                        edit.activate(Edit.EDIT_VERTICES, graphic, options);
                        break;
                }
            });
            //用完Edit工具，将工具关闭，点击地图（没有点击到Graphic时结束）
            map.on("click", function () {
                edit.deactivate();
            })

        });
    </script>
</head>
<body>
    <div id="mapDiv" class="MapClass"></div>
    <input type="button"  id="add" value="添加客户端图形">
    <input type="button" class="btn" value="移动客户端图形">
    <input type="button" class="btn" value="拉伸客户端图形">
    <input type="button" class="btn" value="旋转客户端图形">
    <input type="button" class="btn" value="编辑结点">
</body>
</html>