ArcGIS API for JavaScript开发教程系列(三)之图层列表控件

最新推荐文章于 2024-06-25 10:03:29 发布

bulletproofcao

最新推荐文章于 2024-06-25 10:03:29 发布

阅读量6.2k

点赞数

分类专栏： arcgis for javascript arcgis二次开发文章标签： javascript arcgis 图层列表 LayersList

arcgis二次开发同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

arcgis for javascript

3 篇文章 0 订阅

订阅专栏

ArcGIS API for JavaScript开发教程系列(三)之图层列表控件

图层列表控件控制图层的显示与否，把勾选的图层可以叠加在基础底图之上，通过对图层的取消勾选，让其不在地图上显示，具体的看代码的注释吧

首先是JavaScript的代码：用于创建地图与添加图层列表控件

 //定义需要引入的功能模块
        require([
            "esri/arcgis/utils",
            "esri/dijit/LayerList",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function (arcgisUtils, LayerList) {
            //创建新的map，根据map id请求使用arcgis online的地图
            arcgisUtils.createMap("df8bcc10430f48878b01c96e907a1fc3", "map").then(function (response) {
                //创建新的图层列表控件，放在id为“layerList”的div里
                var myWidget = new LayerList({
                    map: response.map,
                    //根据请求返回的地图，获取地图的图层列表，添加到图层列表的图层中
                    layers: arcgisUtils.getLayerList(response)
                    //把图层列表放置在id为“layerList”的div里
                }, "layerList");
                //打开图层列表
                myWidget.startup();
            });
        });

下面是全部的代码：

<!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>Layer List Dijit</title>
    <!--引入外部样式表-->
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css" />
    <!--设置样式-->
    <style>
        html, body, .container, #map {
            height:100%;
            width:100%;
            margin:0;
            padding:0;
            font-family:"Open Sans";
        }
        #map {
            padding:0;
        }
        #layerListPane {
            width:25%;
        }
        .esriLayer {
            background-color:#fff;
        }
        .esriLayerList .esriList {
            border-top:none;
        }
        .esriLayerList .esriTitle {
            background-color:#fff;
            border-bottom:none;
        }
        .esriLayerList .esriList ul {
            background-color: #fff;
        }
    </style>
    <script>
        var dojoConfig = { parseOnLoad: true };
    </script>
    <script src="https://js.arcgis.com/3.16/"></script>
    <script>
        //定义需要引入的功能模块
        require([
            "esri/arcgis/utils",
            "esri/dijit/LayerList",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dojo/domReady!"
        ], function (arcgisUtils, LayerList) {
            //创建新的map，根据map id请求使用arcgis online的地图
            arcgisUtils.createMap("df8bcc10430f48878b01c96e907a1fc3", "map").then(function (response) {
                //创建新的图层列表控件，放在id为“layerList”的div里
                var myWidget = new LayerList({
                    map: response.map,
                    //根据请求返回的地图，获取地图的图层列表，添加到图层列表的图层中
                    layers: arcgisUtils.getLayerList(response)
                    //把图层列表放置在id为“layerList”的div里
                }, "layerList");
                //打开图层列表
                myWidget.startup();
            });
        });
    </script>
</head>
<body class="claro">
    <div class="container" data-dojo-type="dijit/layout/BorderContainer"
        data-dojo-props="design:'headline',gutters:false">
        <!--图层列表显示的div控件-->
        <div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div id="layerList"></div>
        </div>
        <!--放置地图的div控件-->
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
    </div>
</body>
</html>