ArcGIS API For Javacsript編輯客戶端圖形

原創 liby0102 2018-08-23 02:10

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 () { ('pre.prettyprint code').each(function () {
var lines = (this).text().split(′\n′).length;var numbering = $('
    ').addClass('pre-numbering').hide();
    (this).addClass(′has−numbering′).parent().append( numbering);
    for (i = 1; i <= lines; i++) {
    numbering.append( ('
  • ').text(i));
    };
    $numbering.fadeIn(1700);
    });
    });

    發表評論
    所有評論
    還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
    相關文章

    geoserver 發佈矢量切片服務，並使用leaflet 加載

    liby0102 2019-08-10 06:59:32

    ArcGIS API For Javascript之編輯服務器端圖層(通過要素服務feature進行增刪改查 )

    liby0102 2018-08-23 02:10:13

    ArcGIS API For Javascript之動態圖層

    liby0102 2018-08-23 02:10:11

    ArcGIS Server之發佈網絡分析服務

    liby0102 2018-08-23 02:10:10

    ArcGIS API For Javascript之調用動態地圖服務+屬性、空間查詢

    liby0102 2018-08-23 02:10:07