ArcGIS API for JavaScript(4.x)——图层控制
来源:互联网 发布:java使用命令行参数 编辑:程序博客网 时间:2024/05/29 10:11
声明:本文为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); } );};
最终效果:
最后:第二次发文章,依旧小激动。本人小白,文中可能会有些不对,或者是不完善的地方。如发现,望指出,蟹蟹阅读。
阅读全文
0 0
- ArcGIS API for JavaScript(4.x)+EasyUI——图层控制
- ArcGIS API for JavaScript(4.x)——图层控制
- arcgis api for javascript 图层控制
- ArcGIS api for javascript-图层控制
- ArcGIS api for javascript-图层控制(图层树)
- ArcGIS api for javascript-图层控制(图层树)
- ArcGIS api for javascript-图层控制(图层树)
- ArcGIS api for javascript-图层控制(图层树)
- (十)ArcGIS API For Javascript之动态图层
- 使用ArcGIS API for JavaScript实现类似ArcMap的图层控制面板Tab of Contents
- ArcGIS api for javascript+jquery实现简单的图层控制切换
- ArcGIS API for JavaScript——给图层添加标注
- ArcGIS For JavaScript API Add KML Layer(添加KML层)————(十八)
- ArcGIS For JavaScript API Dynamically create layer list(动态创建图层列表)————(八)
- ArcGIS For JavaScript API Feature layer hover(功能图层的悬浮)————(二十六)
- ArcGIS API For IOS 实现图层显示控制
- 【iOS】ArcGIS API For iOS 实现图层显示控制
- arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
- CentOS7 安装Harbor1.1.2
- centos7 telnet服务的安装和启动
- 编程之战第五章 百万级斐波那契
- Scrapy-Request和Response(请求和响应)
- NRF51822通道设置的理解
- ArcGIS API for JavaScript(4.x)——图层控制
- Maven3路程(四)用Maven创建Struts2项目
- R学习02(数据集创建)
- 边界检查
- 【排序算法】简单选择排序
- dubbo项目启动报错,无法加载org.apache.zookeeper.server.ZooTrace
- Android开发,关于aar你应该知道的
- url发送get,post请求,应该是最底层的,能够从http,request中直接get到的
- Android Studio 实用工具依赖库