ArcGIS api for javascript+jquery实现简单的图层控制切换
2017-08-24 19:50
691 查看
这一个功能网上有很多版本,快被写烂了。写这篇博客的初衷是给各位不是GIS行业或没有接触过这个东东的猿们一些帮助。或许还有更简单或者相似的希望大家看了之后可以提出来一起讨论。只是很初级的代码,希望各位大大路过轻喷。欢迎交流。话不多说,咱们开始。
首先在已有地图对象及图层的基础上,咱们需要构建一个列表对象来装载我们的每一个图层。现在较简单的一般是使用无序列表<ul>元素来构建,当然还有其他方式,在这里不做讨论。在构建列表时,为了灵活和动态的加载当前所有的图层。咱们需要先获取所有的图层对象:
这是一种方式。但是如果页面上存在你隐藏的图层的话也会被获取到,有的时候不需要。那么就可以使用另外一种方式:
var layers = map.getLayersVisibleAtScale(map.getScale());
这种方式会获取当前地图比例尺下你所能看到的所有图层。而被你隐藏起来的那些就逃过了被统计的命运(笑)。然后我们需要开始正式的构建我们的列表菜单。
这里使用到的getLayer()方法可以在map所拥有的所有图层(layer)对象中通过该图层的ID来获取对应的图层。我这里想达到的效果是:通过获取我点击的带有图层ID的图片,在我的图层对象中找到该图层,然后改变它的可见性。从而达到隐藏或显示的效果。
需要注意的是,在使用ARCGIS JS改变图层可见性时要用setVisibility(true/false),而不是layer.Visibility=true/false.后者是达不到效果的。
最后,需要给菜单加入鼠标移入和移出的下放和收起特效:
页面结构如下:
最终效果图:
PS:初次发帖,不足之处还望见谅
首先在已有地图对象及图层的基础上,咱们需要构建一个列表对象来装载我们的每一个图层。现在较简单的一般是使用无序列表<ul>元素来构建,当然还有其他方式,在这里不做讨论。在构建列表时,为了灵活和动态的加载当前所有的图层。咱们需要先获取所有的图层对象:
var layers = map.getLayers();
这是一种方式。但是如果页面上存在你隐藏的图层的话也会被获取到,有的时候不需要。那么就可以使用另外一种方式:
var layers = map.getLayersVisibleAtScale(map.getScale());
这种方式会获取当前地图比例尺下你所能看到的所有图层。而被你隐藏起来的那些就逃过了被统计的命运(笑)。然后我们需要开始正式的构建我们的列表菜单。
for (i = 0; i < layers.length; i++) { buttonstring += '<li><img id="' + layers[i].id + '" src="/images/' + layers[i].id + '.png" /></li>'; } $("#layerscontrol").html(buttonstring);之所以用<img>标签,是希望将切换菜单做成点击图片切换的形式,文章末尾有效果图。在构建完成后需要给每个<li>元素添加对应的点击事件。这里采用jQuery来绑定。
$("#layerscontrol li").on("click", function (evt) { var layer = map.getLayer(evt.target.id); for (i = 0; i < layers.length; i++) { if (layers[i].id == evt.target.id) { layer.setVisibility(true); } else { layers[i].setVisibility(false); } } })
这里使用到的getLayer()方法可以在map所拥有的所有图层(layer)对象中通过该图层的ID来获取对应的图层。我这里想达到的效果是:通过获取我点击的带有图层ID的图片,在我的图层对象中找到该图层,然后改变它的可见性。从而达到隐藏或显示的效果。
需要注意的是,在使用ARCGIS JS改变图层可见性时要用setVisibility(true/false),而不是layer.Visibility=true/false.后者是达不到效果的。
最后,需要给菜单加入鼠标移入和移出的下放和收起特效:
$("#layerimage").hover(function () { $("#layerscontrol").slideDown("fast"); }, function () { var ss = $("#layerscontrol li:hover") if ($("#layerscontrol li:hover").length>0) { $("#layerscontrol").hover(function () { }, function () { $("#layerscontrol").slideUp("fast"); }); } else { $("#layerscontrol").slideUp("fast"); } });
页面结构如下:
<div id="layerscontrolDiv"> <img id="layerimage" style="display:none" src="~/images/layers.png"/> <ul style="list-style:none" id="layerscontrol"></ul> </div>
最终效果图:
PS:初次发帖,不足之处还望见谅
相关文章推荐
- 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 开发:不适用esri.toolbar.draw接口,由用户控制定位中心点和半径,实现查询落在圆内的要素
- ArcGIS Api for javaScript 4.6 实现一个简单的地图渲染
- arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
- 使用ArcGIS API for JavaScript实现类似ArcMap的图层控制面板Tab of Contents
- ArcGIS api for javascript-图层控制(图层树)
- ArcGIS api for javascript-图层控制
- ArcGIS api for javascript-图层控制(图层树)
- [置顶] ArcGIS API for JavaScript(4.x)——图层控制
- arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
- arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
- ArcGIS API for JavaScript(4.x)+EasyUI——图层控制
- ArcGIS API For IOS 实现图层显示控制
- ArcGIS api for javascript——放大时切换图层
- ArcGIS API For Javascript之地图基本加载与显示,地图切换、缩放、定位、比例尺、鹰眼图、坐标显示、查询搜索功能实现