arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现

图层控制是很多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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

可视化格式模型-包含块

一个元素box的定位和尺寸,有时候会跟某一矩形框有关,这个矩形框,就被称作元素的包含块。而元素会为它的子孙元素创建包含块,那么,是不是说,元素的包含块就是它的父...

20680
来自专栏天天

20171024

11930
来自专栏木子昭的博客

<自动化办公> Python 操控 Word

虽然Word不好用, 但还必须得用它, python-docx是专门用于编辑Word文档的一个工具库, 它有两大用途, 自动化生成word文档 and 自动化...

3K80
来自专栏九彩拼盘的叨叨叨

学习前端 第5周 第4天

9330
来自专栏前端知识分享

第79天:jQuery事件总结(二)

       上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。

12020
来自专栏河湾欢儿的专栏

标签类型

标签类型 块 1.独占一行 2.支持所有样式 3.不设置宽度的时候,宽度撑满整个一行 内嵌 1.可以在一行显示 2.不支持宽高,不支持上下的mar...

11330
来自专栏用户2442861的专栏

CSS基础(三):选择器

复合选择器, 由两个选择器直接构成,第一个必须是元素选择器,第二个必须是类选择器和ID选择器,这两个选择器之间不能有空格。

7010
来自专栏三木的博客

React 概要

React 简介 React 是一个开源的javascript库,用来构建用户接口(UI)。下图是React的一些基本信息: ? React 的特点 单向数据流...

20870
来自专栏Python攻城狮

Javascript(2)-js进阶

备注:如果父元素进行了relative/absolute定位,offsetTop/offsetLeft就是相对父元素的顶部和左边的距离,如果父元素默认定位,就是...

23030
来自专栏Java技术分享圈

杨老师课堂之JavaScript案例全选、全不选、及反选

        3.2当第一个按钮--全选--被单击 会 触发一个函数,此函数涉及到复选框全部选中功能,但是复选框一共有多少个是未知的,所以我们要去做一个循环,...

7320

扫码关注云+社区

领取腾讯云代金券