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

最新推荐文章于 2024-06-24 15:02:06 发布

Merry_Xmas

最新推荐文章于 2024-06-24 15:02:06 发布

阅读量1.9k

点赞数 1

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

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

2 篇文章 0 订阅

订阅专栏

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

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

不想用EasyUI的同学可移步至下面的链接
http://www.jianshu.com/p/ab1f67c125e7
用3.x版本的同学可参考下面的链接，本文思路也来自于此。
http://blog.csdn.net/GISShiXiSheng/article/details/40377699

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

HTML代码

<body class="easyui-layout">
<div id="viewDiv" data-options="region:'center'"></div>
<div id="layerList" data-options="region:'west',split:true,collapsed:false" title="图层控制">
    <ul class="easyui-tree" id="mytree" data-options="animate:true,checkbox:true"></ul>
</div>
<script type="text/javascript">
    //括号中的数字表示要加载的图层数，记得更改这里哦
    LoadMapByCount(24);
    setTimeout(ShowLayers, 1000);
</script>
</body>

CSS代码

<body class="easyui-layout">
    <div id="viewDiv" data-options="region:'center'"></div>
    <div id="layerList" data-options="region:'west',split:true,collapsed:false" title="图层控制">
        <ul class="easyui-tree" id="mytree" data-options="animate:true,checkbox:true"></ul>
    </div>
</body>

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
            });

            pOverView.ui.components = [];

            //加载图层，
            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);
                };
            }
        }
    );
};
//将图层信息添加至CheckBox Tree
function ShowLayers(){
    for (var i = 0; i < pFeaLyrs.length; i++) {
        var title = pFeaLyrs[i].title;
        var id = pFeaLyrs[i].id;
        var checked = pFeaLyrs[i].visible
        var aLayerData={"id":id,"text":title,"checked": checked };
        layersData.push(aLayerData);
    }
    //控制图层的显示
    $('#mytree').tree({
        data: layersData,
        onCheck: function(node, checked){
            for (var i = 0; i < pFeaLyrs.length; i++) {
                if (node.id == pFeaLyrs[i].id) {
                    if(checked) 
                        pFeaLyrs[i].visible=true;
                    else 
                        pFeaLyrs[i].visible=false;
                }
            }
        }
    });
}

最终效果：
QQ截图20170710212241.png