您的位置：首页 > Web前端 > JavaScript

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

2017-07-10 22:51 603 查看
声明：本文为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
});

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


最终效果：



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

蟹蟹阅读。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航