ArcGIS API for JavaScriptはレイヤー制御ツリーを実現します.

9732 ワード

アルクGIS JS 開発事例

前言
コントロールサービスのレイヤーが表示されません.
考え方
表示されたレイヤーの表示をMapServiceLayerのsetVisibleLayers()方法で設定します.
コードの実装


<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 Maptitle>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost:8080/arcgis_js_api/library/3.20/3.20/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost:8080/arcgis_js_api/library/3.20/3.20/init.js">script>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    style>
    <script>
        var map,
            visible=[],
            setLayerVisibility;
        require([
                "esri/map",
                "esri/layers/ArcGISDynamicMapServiceLayer",
                "dojo/on",
                "dojo/dom",
                "dojo/query",
                "dojo/dom-attr",
                "dojo/domReady!"],
            function(Map,
                     ArcGISDynamicMapServiceLayer,
                     on,
                     dom,
                     query,
                     domAttr
                     )
            {
                map = new Map("map", {
                    center: [112, 38],
                    zoom: 5,
                    basemap: "topo"
                });
                var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/firstTest/firstService/MapServer");
                map.addLayer(dynamicMapServiceLayer);


               on(dynamicMapServiceLayer,"load",loadLayerList);

                function loadLayerList(layers){
                    var html="";
                    var infos=layers.layer.layerInfos;
                    for(var i= 0,length=infos.length;ivar info = infos[i];
                        //            id   visible
                        if(info.defaultVisibility)
                        {
                            visible.push(info.id);
                        }
                        //       html
                        html=html+"+(info.defaultVisibility ? "checked":"")+" />"+info.name+"
";
                    }
                    //      
                    dynamicMapServiceLayer.setVisibleLayers(visible);
                    //          
                    domAttr.set(dom.byId("toc"),"innerHTML",html);
                    // dom.byId("toc").innerHTML=html;
                }
                setLayerVisibility = function()
                {
                    // query  css listCss     
                    var inputs = query(".listCss");
                    visible = [];
                    // checkbox          id   visible
                    for(var i=0;iif(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>

効果

javascriptでは、配列のある要素インデックス値に関わるthis.index問題を取得します.