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

来源：互联网发布：链路状态协议网络拓扑编辑：程序博客网时间：2024/06/05 20:30

声明：本文为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 Treefunction 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

最后：第一次发文章，有点小激动。本人小白，文中可能会有些不对，或者是不完善的地方。如发现，望指出，欢迎讨论。不使用EasyUI制作图层控制的文章我也会在近期发布的。
蟹蟹阅读。

阅读全文

0 0