master

分支 (1)

管理

管理

master

baiduAPI
/
GraphicsLayerSelectAttribute.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",-->
                <!--"esri/layers/GraphicsLayer",-->
                <!--"dojo/on","dojo/query","dojo/colors",-->
                <!--"esri/graphic","esri/symbols/SimpleMarkerSymbol",-->
                <!--"esri/symbols/SimpleLineSymbol",-->
                <!--"esri/geometry/Point",-->
                <!--"dojo/domReady!"],-->
            <!--function(Map,ArcGISDynamicMapServiceLayer,-->
                     <!--GraphicsLayer,on,query,Color,Graphic,-->
                     <!--SimpleMarkerSymbol,SimpleLineSymbol,Point){-->
                <!--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);-->
                <!--//添加点图形的函数-->
                <!--function addGraphic()-->
                <!--{-->
                    <!--//定义线符号-->
                    <!--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 geometry;-->
                    <!--//声明和图形-->
                    <!--var graphic;-->
                    <!--//添加第一个点图形-->
                    <!--geometry=new Point({-->
                        <!--"x":510706,-->
                        <!--"y":3986100,-->
                        <!--"spatialReference":map.spatialReference,-->

                    <!--});-->
                    <!--graphic=new Graphic(geometry,pSymbol,{"h":100});-->
                    <!--graphicsLayer.add(graphic);-->
                    <!--//添加第二个点图形-->
                    <!--geometry=new Point({-->
                        <!--"x":510326,-->
                        <!--"y":3985702,-->
                        <!--"spatialReference":map.spatialReference-->
                    <!--});-->
                    <!--graphic=new Graphic(geometry,pSymbol,{"h":200});-->
                    <!--graphicsLayer.add(graphic);-->
                    <!--//添加第三个点图形-->
                    <!--geometry=new Point({-->
                        <!--"x":510275,-->
                        <!--"y":3986100,-->
                        <!--"spatialReference":map.spatialReference-->
                    <!--});-->
                    <!--graphic=new Graphic(geometry,pSymbol,{"h":300});-->
                    <!--graphicsLayer.add(graphic);-->
                <!--}-->
                <!--//调用添加点图形的函数-->
                <!--addGraphic();-->
                <!--//绑定事件-->
                <!--on(graphicsLayer,"click",function(event){-->
                    <!--var graphic=event.graphic;-->
                    <!--alert(graphic.attributes["h"]);-->
                <!--})-->


            <!--})-->
    <!--</script>-->
    <script type="text/javascript">

        require(["esri/map","dojo/dom","dojo/on",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "dojo/query","esri/toolbars/draw",
                "esri/symbols/SimpleLineSymbol","esri/graphic","esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleFillSymbol","dojo/domReady!"],
            function (Map,dom,on, ArcGISDynamicMapServiceLayer,query, Draw, SimpleLineSymbol,Graphic,SimpleMarkerSymbol,SimpleFillSymbol) {
                var map = new esri.Map("MyMapDiv");
                var layer = new ArcGISDynamicMapServiceLayer
                ("http://localhost:6080/arcgis/rest/services/gisAPI/MyMapService/MapServer");
                map.addLayer(layer)
                var toolbar = new Draw(map, { showTooltips: true });

                var lineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new dojo.Color([255, 0, 0]), 3);
                var marker= new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,10, lineSymbol, new dojo.Color([255, 0, 0]));
                var fill= new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, lineSymbol,  new dojo.Color([255, 0, 0]));
                on(toolbar,"draw-complete", function (result) {
                    var geometry=result.geometry;
                    var type=geometry.type;
                    var graphic;
                    switch (type) {
                        case "point":
                            graphic= new Graphic(geometry, marker);
                            break;
                        case "polyline":
                            graphic= new Graphic(geometry, lineSymbol);
                            break;
                        case "polygon":
                            graphic= new Graphic(geometry, fill);
                            break;
                    }

                    map.graphics.add(graphic);
                    toolbar.deactivate();
                });
                query("button").on("click",function(event){
                    var value=this.innerHTML;
                    switch(value){
                        case "绘制点":{
                            toolbar.activate(Draw.POINT, {
                                showTooltips:true
                            })
                            break;

                        }
                        case "绘制折线":{
                            toolbar.activate(Draw.POLYLINE, {
                                showTooltips:true
                            })
                            break;
                        }
                        case "绘制面":{
                            toolbar.activate(Draw.POLYGON, {
                                showTooltips:true
                            })
                            break;
                        }
                        case "徒手线":{
                            toolbar.activate(Draw.FREEHAND_POLYLINE, {
                                showTooltips:true
                            })
                            break;
                        }
                        case "徒手面":{
                            toolbar.activate(Draw.FREEHAND_POLYGON, {
                                showTooltips:true
                            })
                            break;
                        }

                    }
                });
            });


    </script>

</head>
<body>
<div id="MyMapDiv" class="MapClass"></div>
<button>绘制点</button>
<button>绘制折线</button>
<button>绘制面</button>
<button>徒手线</button>
<button>徒手面</button>


</body>
</html>