arcgis for javascript 의 ArcGISDynamicMapServiceLayer 그래 픽 제어 실현

그래 픽 컨트롤 은 많은 GIS 시스템 에서 필요 한 작은 기능 입 니 다. 본 고 는 arcgis for javascript 에서 ArcGISDynamic MapServiceLayer 그래 픽 컨트롤 의 실현 방식 을 말씀 드 리 겠 습 니 다.먼저 그림 보기:
실현 효과
중점 은 다음 과 같은 두 가지 가 있다. 1. ArcGISDynamicMapServiceLayer 의 그림 을 가 져 옵 니 다.2. 그림 의 디 스 플레이 를 제어 합 니 다.그림 층 의 획득 은 layerInfos 를 통 해 이 루어 집 니 다. 그림 층 의 표 시 는 set VisibleLayers 를 통 해 이 루어 집 니 다. 소스 코드 는 다음 과 같 습 니 다.
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
    <style type="text/css">
        @import "http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dojo/resources/dojo.css";
        @import "http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/dijit.css";
        @import "http://localhost/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css";
    </style>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
    <script>
        var map, mapCenter;
        var visible=[], setLayerVisibility;;
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/geometry/Point",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/renderers/SimpleRenderer",
            "dojo/_base/Color",
            "dojox/charting/Chart2D",
            "dojo/dom-construct",
            "dojo/domReady!"],
        function(Map,
             Tiled,
             FeatureLayer,
             GraphicsLayer,
             Point,
             PictureMarkerSymbol,
             SimpleLineSymbol,
             SimpleRenderer,
             Color,
             Chart2D,
             domConstruct)
        {
            map = new Map("map", {logo:false,slider: true});
            var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/image/MapServer");
            map.addLayer(tiled,0);
            var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/china/MapServer");
            map.addLayer(dynamicMapServiceLayer,1);
            var chartLayer = new GraphicsLayer({"id":"chartLayer"});
            map.addLayer(chartLayer,2);
            mapCenter = new Point(103.847, 36.0473, map.spatialReference);
            map.centerAndZoom(mapCenter,4);

            dojo.connect(dynamicMapServiceLayer,"onLoad",loadLayerList);
            function loadLayerList(layers){
                var html=""
                var infos=layers.layerInfos;
                for(var i= 0,length=infos.length;i<length;i++){
                    var info = infos[i];
                    //            id   visible
                    if(info.defaultVisibility)
                    {
                        visible.push(info.id);
                    }
                    //       html
                    html=html+"<div><input id='"+info.id+"' name='layerList' class='listCss' type='checkbox' value='checkbox' onclick='setLayerVisibility()' "+(info.defaultVisibility ? "checked":"")+" />"+info.name+"</div>";
                }
                //      
                dynamicMapServiceLayer.setVisibleLayers(visible);
                //          
                dojo.byId("toc").innerHTML=html;
            }
            setLayerVisibility = function()
            {
                // dojo.query  css listCss     
                var inputs = dojo.query(".listCss");
                visible = [];
                // checkbox          id   visible
                for(var i=0;i<inputs.length;i++)
                {
                    if(inputs[i].checked)
                    {
                        visible.push(inputs[i].id);
                    }
                }
                //      
                dynamicMapServiceLayer.setVisibleLayers(visible);
            }
        });
    </script>
</head>

<body>
<div id="map">
    <div id="toc" style="position: absolute; left: 10px; bottom: 20px; border: 1px solid #9c9c9c; background: #fff; width: 100px; height: auto; z-index: 99;padding: 10px;"></div>
</div>
</body>
</html>

좋은 웹페이지 즐겨찾기