ArcGIS API for JavaScript（4.x）——图层控制

最新推荐文章于 2023-06-27 12:16:09 发布

置顶 Merry_Xmas

最新推荐文章于 2023-06-27 12:16:09 发布

阅读量3.6k

点赞数 1

分类专栏： arcgis-api-for-js 文章标签： javascript api arcgis arcgis-api-for-js arcgis-api-for-javascript

arcgis-api-for-js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

声明：本文为LJH原创文章，转载请注明出处。
转载自：http://www.jianshu.com/p/ab1f67c125e7

ArcGIS API for JavaScript 4出来不是很久，网上的教程也比较少。那今天就来说一下如何用ArcGIS API for JavaScript（AJS4）做一个图层列表吧。

用EasyUI的同学可移步至下面的链接（EasyUI中的CheckBox Tree具有双击事件）
http://www.jianshu.com/p/76c19aad0459
用3.x版本的同学可参考下面的链接，本文思路也来自于此。
http://blog.csdn.net/GISShiXiSheng/article/details/40377699

话不多说，开始制作我们的图层控制吧！
主要思路：1、获取图层（可通过数组实现）；2、通过innerHTML将带有图层信息的复选框加至HTML；3.控制图层的显示；
图层的获取可通过将FeatureLayer添加进数组实现，图层的显示通过FeatureLayer.visible实现，源代码如下：

HTML代码

<body> 
    <div id="viewDiv"></div>
    <div id="layerList"></div>
    <script>
        //括号中的数字表示要加载的图层数，记得更改这里哦
        LoadMapByCount(4);
    </script>
</body>

css代码

#layerList{
    position: absolute;
    top: 500px;
    right: 12px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
    z-index: 2;
    background-color: rgba(250, 250, 250,1);
}

JS代码

//定义数组，用于存储图层   
var pFeaLyrs = new Array();

function LoadMapByCount(layerCount){
    require([  
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/FeatureLayer",  
        "esri/core/watchUtils",
        "dojo/dom",
        "dojo/promise/all",
        "dojo/query",
        "dojo/on",
        "dojo/domReady!"  
        ], function (Map, MapView, FeatureLayer, watchUtils, dom, all, query, on)
        {
            var pMap = new Map();

            var pMapView = new MapView({
                container: "viewDiv",
                map: pMap
            });

            //加载图层，
            AddLayer2Map();
             //别忘了改URL！
            function AddLayer2Map() {
                for (var i = 0; i < layerCount; i++) {
                    var mainLayer = new FeatureLayer({
                        url: "http://localhost:6080/arcgis/rest/services/无标题/MapServer/"+i
                    });
                    pFeaLyrs[i]=mainLayer;
                    pMap.add(mainLayer);
                };
            };

            setTimeout(function() {
                var htmlTxt="" ;
                for (var i = 0; i < layerCount; i++) {
                    var lyr = pFeaLyrs[i];
                    htmlTxt += "<input id='" + lyr.id + "' name='layerList' class='listCss' type='checkbox' value='checkbox'  "+(lyr.visible ? "checked":"")+"/>"+lyr.title + "<br>";
                }

                document.getElementById("layerList").innerHTML=htmlTxt; 

                on(dojo.query(".listCss"), "click", function() {
                    var inputs = dojo.query(".listCss");
                    alert(inputs.length);
                    for(var i=0;i<inputs.length;i++){ 
                        var lyr =pFeaLyrs[i];
                        if(inputs[i].checked) lyr.visible=true;
                        else lyr.visible=false;
                    }
                });     
            }, 1000);
        }
    );
};

最终效果：

QQ截图20170711100227.png

最后：第二次发文章，依旧小激动。本人小白，文中可能会有些不对，或者是不完善的地方。如发现，望指出，蟹蟹阅读。

Merry_Xmas

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
ArcGIS API for JavaScript（4.x）——图层控制

声明：本文为LJH原创文章，转载请注明出处。转载自：http://www.jianshu.com/p/ab1f67c125e7ArcGIS API for JavaScript 4出来不是很久，网上的教程也比较少。那今天就来说一下如何用ArcGIS API for JavaScript（AJS4）做一个图层列表吧。用EasyUI的同学可移步至下面的链接（EasyUI中的CheckBox Tree
复制链接

扫一扫