基础功能---具体坐标生成Graphic

留言
1.图层分析

共两层

  • 底图（动态图层）
  • 客户端图层（添加指定坐标的点线面）
2. 步骤
  1. 通过switch选择定义对应的geometry
  2. 根据坐标创建Graphic graphic=new Graphic(geometry, xxx );
  3. 把图形加载到图层中 graphicsLayer.add(graphic);
    3.贴代码
    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
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Graphic</title>
        <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"/>
        <script  type="text/Javascript" src="https://js.arcgis.com/3.28/"></script>
        <style>
            .MapClass{
                width:100%;
                height:500px;
                border:1px solid #000;
            }
        </style>
        <script>
            require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
                "esri/layers/GraphicsLayer",
                "dojo/on","dojo/query","dojo/colors",
                "esri/graphic","esri/symbols/SimpleMarkerSymbol",
                "esri/symbols/SimpleLineSymbol",
                "esri/symbols/SimpleFillSymbol",
                "esri/geometry/Point",
                "esri/geometry/Polyline","esri/geometry/Polygon",
                "esri/geometry/Circle",
                "dojo/domReady!"],
                    function(Map,ArcGISDynamicMapServiceLayer,
                             GraphicsLayer,on,query,Color,Graphic,
                             SimpleMarkerSymbol,SimpleLineSymbol,
                             SimpleFillSymbol,Point,Polyline,Polygon,Circle){
                var map = new Map("mapDiv");
                var layer = new ArcGISDynamicMapServiceLayer
                ("http://localhost:6080/arcgis/rest/services/ecology/beijing_2012_3/MapServer");
                map.addLayer(layer);


                //创建客户端图层
                var graphicsLayer=new GraphicsLayer();
                //将客户端图层添加到地图中
                map.addLayer(graphicsLayer);


                //通过query查询到button对象
                var btns=query("button");

                on(btns,"click",function(event){
                    var text=this.innerHTML;
                    //定义符号
                    var lineSymbol=new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 3);
                    var pSymbol=new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new Color([255, 0, 0]));
                    var fill=SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,  new Color([255, 0, 0]));
                    //声明类型和图形
                    var geometry;
                    var graphic;
                    //根据文本定义相应的geometry
                    switch(text)
                    {
                        case "添加点":
                            geometry=new Point({
                                "x":510706,
                                "y":3986100,
                                "spatialReference":map.spatialReference
                            });
                            graphic=new Graphic(geometry,pSymbol);
                            break;
                        case "添加线":
                            //点的坐标对
                             var  paths=[];
                             paths[0]=[
                                [510326,3985702],
                                [510994, 3985676],
                                [511078, 3985903],
                                [510433, 3985928]
                            ];
                            geometry=new Polyline({
                                "paths":paths,
                                "spatialReference":map.spatialReference
                            })
                            graphic=new Graphic(geometry,lineSymbol);
                            break;
                        case "添加面":
                            //点的坐标对
                            var ring=[];
                            ring[0]=[
                                [510275, 3986100],
                                [510508, 3986162],
                                [510596, 3986032],
                                [510271, 3985847],
                                [510275, 3986100]
                            ];
                            geometry=new Polygon({
                                "rings":ring,
                                "spatialReference":map.spatialReference
                            });
                            graphic=new Graphic(geometry,fill);
                            break;
                        case "添加圆":
                            //圆心
                            var p=new Point({
                                "x":510706,
                                "y":3986100,
                                "spatialReference":map.spatialReference
                            });
                            //半径
                            var r=20;
                            geometry=new Circle(p,{
                                "radius":r
                            });
                            graphic=new Graphic(geometry,fill);
                            break;
                    }
                    //将图形添加到图层中
                    graphicsLayer.add(graphic);
                })
            })
        </script>
    </head>
    <body>
        <div id="mapDiv" class="MapClass"></div>
        <button>添加点</button>
        <button>添加线</button>
        <button>添加面</button>
        <button>添加圆</button>
    </body>
    </html>