master

分支 (1)

管理

管理

master

baiduAPI
/
GraphicsLayer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GriaphicsLayer</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","esri/layers/ArcGISDynamicMapServiceLayer",
        //            "dojo/domReady!"],function(Map,ArcGISDynamicMapServiceLayer){
        //            var map = new Map("mapDiv");
        //            var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/gisAPI/MyMapService/MapServer");
        //            map.addLayer(layer);
        //        })
        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/gisAPI/MyMapService/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);
                    //定义点符号l
                    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>