图层控制是非常多GIS系统里面必须的一个小功能，本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式。首先看图：

实现效果

重点有下面两点：1、获取ArcGISDynamicMapServiceLayer的图层；2、控制图层的显示。

图层的获取可通过layerInfos实现，图层的显示通过setVisibleLayers实现，源码例如以下：

<!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>

arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现的更多相关文章

  1. arcgis for javascript ArcGISDynamicMapServiceLayer 过滤图层点

    记录下过滤 ArcGISDynamicMapServiceLayer 图层服务的方法 function filterArcGISDynamicMapServiceLayer(){ map.graphi ...

  2. Arcgis javascript api 动态图层自图层可见性设置

    Arcgis javascript api 动态图层自图层可见性设置 子图层管理 rest服务 sublayers sublayer ArcGISDynamicMapServiceLayer 本文主要 ...

  3. arcgis api for js入门开发系列七图层控制(含源代码)

    上一篇实现了demo的地图分屏对比模块,本篇新增图层控制模块,截图如下(源代码见文章底部): 图层控制模块实现的思路如下: 1.在地图配置文件map.config.js里面配置图层目录树节点信息,作为 ...

  4. arcgis api 3.x for js 入门开发系列七图层控制（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  5. Arcgis for javascript map操作addLayer具体解释

    本节的内容非常easy.说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种.例如以下图: watermark/2/ ...

  6. 利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup

    1.引言 由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...

  7. Arcgis for javascript map操作addLayer详解

    本节的内容很简单,说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种,如下图: addLayer方法 在addLa ...

  8. openlayers自定义图层控制的实现

    好久没写博文了,今天出来冒个泡. 最近一直在考虑一件事情,那就是openlayers中自定义wms的图层控制.用过openlayers的人都知道,在openlayers中有自带的图层控制的控件,调用方 ...

  9. arcgis for javascript 隐藏或显示底图

    arcgis for javascript展示地图的时候,有图层的概念,一层一层的,类似photoshop,在应用界面上控制图层的显隐,是极常见的功能. 但是,如果是控制底图的显示或隐藏呢,怎么搞? ...

随机推荐

  1. Windows提供了两种将DLL映像到进程地址空间的方法

    调用DLL,首先需要将DLL文件映像到用户进程的地址空间中,然后才能进行函数调用,这个函数和进程内部一般函数的调用方法相同.Windows提供了两种将DLL映像到进程地址空间的方法: 1. 隐式的加载 ...

  2. grok 正则捕获(就是perl的正则捕获)

    2.3.2 grok 正则捕获: \s+ 和 [\n\t\r\f]+ 一样 1.命名分组格式为(?<grp name>),反向引用时用\k<grp name> 2.命名分组的匹 ...

  3. ACM学习-POJ-1003-Hangover

    菜鸟学习ACM,纪录自己成长过程中的点滴. 学习的路上,与君共勉. ACM学习-POJ-1003-Hangover Hangover Time Limit: 1000MS   Memory Limit ...

  4. 如何使用TestFlight进行App构建版本测试（转）

    在日常的开发当中,当一个项目在开发过程中或者完成准备上线,都需要我们进行真机测试,否则不可能开发完了就直接扔到了App,等上线了再下载看看,这都是不可能的.那么说到真机测试,大家肯定会想到弄一个99美 ...

  5. MODULE_AUTHOR、MODULE_DESCRIPTION、MODULE_LICENSE宏

    在阅读Linux Driver源码时,我们常常会在文件的结尾处看到诸如:MODULE_AUTHOR.MODULE_DESCRIPTION.MODULE_LICENSE等宏定义,这些宏主要是定义了一些模 ...

  6. Js闭包的用途

    本来想总结一点JavaScript中的闭包的一些用法,在查资料的时候发现了一篇很好的文章,就转过来收藏了,下面附上传送门: js闭包的用途 ---------sunlylorn 我们来看看闭包的用途. ...

  7. html网页获取php网页数据等知识记录

    所有跟php有关的网页都必须在Apache服务器下打开.需要配置好confg.ini的文件路径. AJAX: 通过事件不断的向服务器发送请求,然后服务器会时时返回最新的数据,这就是AJAX的功能 PS ...

  8. iOS设计模式解析（四）组合模式

    组合模式:将对象组合成树形结构以表示"部分-整体"的层次结构.组合是的用户对单个对象和组合对象的使用具有一致 Cocoa Touch中组合模式使用:Cocoa Touch框架中,U ...

  9. currentStyle、getComputedStyle

    element.offsetWidth: 返回元素的宽度,包括边框和内边距. element.offsetHeight: 返回元素的高度,包括边框和内边距. currentStyle: 获取计算后的样 ...

  10. sublime text帮你更好的写python

    在Google的Python风格指南中,有这样的要求: 用4个空格来缩进代码 但是每次在敲代码的时候,用一个tab确实比敲四次空格方便的多.令人欣慰的是sublime text 2能够把tab转换成4 ...