ArcGIS API For Javacsript编辑客户端图形

最新推荐文章于 2024-03-28 17:11:32 发布

Li.map

最新推荐文章于 2024-03-28 17:11:32 发布

阅读量631

点赞数

分类专栏： arcgis-api 文章标签： arcgis api 编辑

arcgis-api 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

引言
Edit工具的使用

1. 引言

在ArcGIS API当中，提供了一个工具叫做Edit，我们利用Edit可以交互的编辑客户端图形Graphic，这个功能在我们实际开发过程中非常有用，可以交互编辑已经存在的Graphic以达到我们的目的，Edit工具可以从以下方面编辑客户端图形：

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

2.Edit工具的使用

使用Edit工具很简单，只需要以下几步即可：

给地图添加Graphic，为了下面Edit交互操作做准备
创建Edit对象
激活Edit工具，此时需要制定Edit的一些参数
操作完Graphic将Edit工具关闭

2.1代码实现

添加地图（省略）
定义Edit对象，和graphic对象

            //声明一个客户端图形（为了以后的编辑）
            var graphic
            //定义一个Edit对象
            var edit = new Edit(map);
   
   1
2
3
4
   
   
    
    
   
   
   
   1
2
3
4

首先创建几个按钮（用户实现相应的功能）

    <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="编辑结点">
   
   1
2
3
4
5
   
   
    
    
   
   
   
   1
2
3
4
5

给添加客户端图形按钮添加绑定事件

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 ring=[];
                ring[0]=[
                    [510275, 3986100],
                    [510508, 3986162],
                    [510596, 3986032],
                    [510271, 3985847],
                    [510275, 3986100]
                ];
                var geometry=new Polygon({
                    "rings":ring,
                    "spatialReference":map.spatialReference
                });
                graphic=new Graphic(geometry,fill);
                map.graphics.add(graphic);
            })
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

给剩余四个按钮添加绑定事件

            //给剩余四个按钮绑定事件
            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;
                }
            })
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

关闭Edit工具

            //用完Edit工具，将工具关闭，点击地图（没有点击到Graphic时结束）
            map.on("click", function () {
                edit.deactivate();
            })
   
   1
2
3
4
   
   
    
    
   
   
   
   1
2
3
4

2.2结果

2.2.1移动图形前后（点击移动客户端图形按钮，移动图形）

这里写图片描述

2.2.2拉伸图形前后（点击拉伸客户端图形，拉伸图形）

这里写图片描述

2.2.3旋转图形前后（点击旋转客户端图形，旋转图形）

这里写图片描述

2.2.4添加结点前后（点击编辑结点，添加结点）

这里写图片描述

2.2.5删除结点前后（点击编辑结点，删除结点）

这里写图片描述

右击结点出现删除提示：

这里写图片描述

2.3完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Graphic</title>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link  rel="stylesheet"  type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script  type="text/Javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/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/geometry/Polygon",
            "esri/layers/ArcGISDynamicMapServiceLayer", "esri/graphic",
            "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol","dojo/colors","dojo/query",
             "dojo/domReady!"
        ], function ( Map,dom,on, Edit,Polygon, ArcGISDynamicMapServiceLayer, Graphic, SimpleLineSymbol, SimpleFillSymbol,Color,query ) {
            var map = new Map("mapDiv");
            var url = "http://localhost:6080/arcgis/rest/services/Test/MyService/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 ring=[];
                ring[0]=[
                    [510275, 3986100],
                    [510508, 3986162],
                    [510596, 3986032],
                    [510271, 3985847],
                    [510275, 3986100]
                ];
                var geometry=new Polygon({
                    "rings":ring,
                    "spatialReference":map.spatialReference
                });
                graphic=new Graphic(geometry,fill);
                map.graphics.add(graphic);
            })
            //给按钮绑定事件
            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();
            })

    });
</span><span class="hljs-tag">&lt;/<span class="hljs-title">script</span>&gt;</span>


</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>
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

(function () { $(function () {$ ('pre.prettyprint code').each(function () {
var lines =

(this).text().split(′\n′).length;var $(this).text().split('\n').length; var$ numbering = $('

').addClass('pre-numbering').hide();

(this).addClass(′has−numbering′).parent().append( $(this).addClass('has-numbering').parent().append($ numbering);
for (i = 1; i <= lines; i++) {

numbering.append( $numbering.append($ ('

').text(i));
};
$numbering.fadeIn(1700);
});
});

Li.map

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
ArcGIS API For Javacsript编辑客户端图形

引言Edit工具的使用1代码实现2结果21移动图形前后点击移动客户端图形按钮移动图形22拉伸图形前后点击拉伸客户端图形拉伸图形23旋转图形前后点击旋转客户端图形旋转图形24添加结点前后点击编辑结点添加结点25删除结点前后点击编辑结点删除结点3完整代码1. 引言在ArcGIS API当中，提供了一个工具叫做Edit，我们利用Edit可以交互的编辑客户端图形Graphic
复制链接

扫一扫