利用ztree开发带有滑动条的地图图层列表
之前在写安卓移动端时候，有这样的一个对地图多个图层管理界面，即在单独写了一个图层面板，里面列举app的所有图层，如果懂得Android开发方面的小伙伴，就是一个ListView里面添加了SeekBar拖动按钮，通过拖动按钮图层的透明度不断变化可以直观的在地图上展示不同图层渲染情况。这样的需求，在做三维地理信息系统中，也有用到的地方，但苦于我们在使用的第三方三维平台中没有提供有图层透明度接口，因此无法实现需要的功能。而今天正好使用到arcgis for javascript的api，提供了调整图层透明度的接口，因此可以实现一下这个想法。
在学习这个功能中，我们使用ztree来加载地图图层。对于ztree我就不想说太多的溢美之词了，这个插件可以说非常强大，谁用谁知道。实现加载带有调整图层透明度的滑动条是在oncheck中实现，使用了子节点点击添加滑动条的方式。但是需要注意的是在哪个id中添加相应的div，我们来看一下ztree帮我们生成子节点的id。打开chrome浏览器，进入到调试模式，看看生成的id为treeNode.tId和”_a”的组合，具体如下图所示。
有了这一点后使用该对象的after方法追加我们需要的滑动条。对于滑动条，大家可以按照自己的需要或者熟悉的插件编写。然后将图层传入到我们的滑动条中，根据滑动条回调的值来设置不同的值，这样就可以相应的调整图层的透明度了。
那么来说了一下，关于ztree，在配置图层的使用，大家可以根据网络相关资料设置ztree的相应属性，这里就不一一说明了，具体可以参考网络相关资料。
最后实现的效果如下图所示。是不是就可以达到了需要的实现效果。当然，对于ztree的样式，比如图标，大家可以做相应的修改。
好了，最后贴上实现的代码吧。
var setting={check: {enable: true, //是否显示checkbox或radiochkboxType: { "Y": "", "N": "" }},view: {dblClickExpand: false,expandSpeed: "", //节点展开、折叠时的动画速度, 可设置("","slow", "normal", or "fast")selectedMulti: false //设置是否允许同时选中多个节点},data:{simpleData:{enable:true,idKey:"id",pidKey:"pId"}},callback:{onClick:onClick,onCheck:onCheck,}};var zNodes=[ {name:"地图数据",URL:"",id:10,pId:0,isParent:true,nocheck:true},{name:"卫星数据",URL:URLwxyx,id:101,pId:10},{name:"专题数据",URL:URLztsj,id:102,pId:10},{name:"地图数据",URL:"",id:11,pId:0,isParent:true,nocheck: true},{name:"卫星数据",URL:URLwxyx,id:111,pId:11},{name:"专题数据",URL:URLztsj,id:112,pId:11}];function onClick(e,treeId,treeNode){var zTree=$.fn.zTree.getZTreeObj("layerTree");zTree.checkNode(treeNode, !treeNode.checked, null, true);return false;}function onCheck(e,treeId,treeNode){var checked=treeNode.checked;if (treeNode.checked == true) {//选中节点的IDvar svcID = treeNode["id"];var newURL=treeNode["URL"];var curTreeObj = $.fn.zTree.getZTreeObj(treeId);//获取所有的节点var nodes = curTreeObj.getCheckedNodes();//遍历所有选中节点，去除非当前选中的服务,并将其父节点区划节点加入数组var i = 0, length = nodes.length;var qhNodes = [];for (; i < length; i++) {var curNode = nodes[i];if (curNode["id"] == svcID) {qhNodes.push(curNode.getParentNode());}}var parentIDsArr = [];var nodeIDsArr = [];var resultArr = [];length = qhNodes.length;//遍历区划节点集合 存入数组for (var i = 0; i < length; i++) {var curId = qhNodes[i]["id"];parentIDsArr.push(curId);}nodeIDsArr = parentIDsArr.concat();var j = 0;for(;j<length;j++){//获取节点的父节点var pNode = qhNodes[j].getParentNode();if (!!pNode) {//获取父节点的IDvar pID = pNode["id"];if ($.inArray(pID, nodeIDsArr) != -1) {parentIDsArr.splice(parentIDsArr.indexOf(qhNodes[j]["id"]), 1);}}}//移除图层代码 var curURL = treeNode["URL"];var ranges = eval("'" + parentIDsArr + "'"); var layerID = "Layer" + svcID;try{map.removeLayer(map.getLayer(layerID));}catch(e){}var layer = new esri.layers.ArcGISDynamicMapServiceLayer(newURL);var layerInfo=new Object();layerInfo.layer=layer;layerInfo.id=svcID;/*将勾选的图层服务添加到地图服务中*/MapServers.push(layerInfo);map.addLayer(layer);var aObj = $("#" + treeNode.tId + "_a");var editStr = "<div id='" + treeNode.tId + "-" + treeNode.id + "' style = 'width:190px;margin:3px 0px 3px 34px'></div>";aObj.after(editStr);$("#" + treeNode.tId + "-" + treeNode.id).slider({range: "min",value: 100,min: 0,max: 100,slide:function (event, ui){var num = ui.value / 100;ui.handle.parentNode.title = "当前透明度为" + num.toFixed(2);var handle=$(ui.handle.parentNode);$(ui.handle.parentNode).tipsy("hide");$(ui.handle.parentNode).tipsy("show");var id = ui.handle.parentNode.id.split("-")[1];layer.setOpacity(ui.value / 100);}});$("#" + treeNode.tId + "-" + treeNode.id + " div").css("background", "#95e9ca");$("#" + treeNode.tId + "-" + treeNode.id).attr("title", "当前图层透明度为1");$("#" + treeNode.tId + "-" + treeNode.id).addClass("tipsy-tip");}// 取消点击else{//取消勾选var aObj = $("#" + treeNode.tId + "_a");if (aObj && aObj.next()) {aObj.next("#" + treeNode.tId + "-" + treeNode.id).remove();$("#tipsy").remove();}var svcID = treeNode["id"];$.each(MapServers,function(index,item){if (item.id==svcID) {map.removeLayer(item.layer);}})}}$.fn.zTree.init($("#layerTree"), setting, zNodes);利用ztree开发带有滑动条的地图图层列表相关推荐
- OpenCV-python 证件照换底-利用函数inRange及滑动条creatTrackbar分割
OpenCV-python 证件照换底 利用函数inRange及滑动条creatTrackbar分割 证件照换底HSV参考图片总是设定不准inRange的值.做一个利用滑条滑动直接看效果的吧 inRa ...
- 利用OpenCV的函数createTrackbar创建滑动条查看二值化的最优阈值的源码及讲解
图像处理开发需求.图像处理接私活挣零花钱,请加微信/QQ 2487872782 图像处理开发资料.图像处理技术交流请加QQ群,群号 271891601 这个功能的实现其实很简单,主要是要明白creat ...
- Opencv实现利用滑动条来调整阈值
#include <opencv2/opencv.hpp> #include <iostream>using namespace cv; using namespace std ...
- OpenCV利用滑动条实现一个开关
//----------------------------------------------------------------------- // 代码说明:以下代码来自Learning Ope ...
- 利用openCV+python进行HSV颜色识别，并结合滑动条动态改变目标颜色
HSV颜色空间更容易表示一个特定颜色,通过opencv读取的图片为BGR颜色空间,我们利用cv2.cvtColor()可以轻松实现颜色空间的转变. 在函数之前,我们先大致了解一下HSV基本颜色分量范围 ...
- FFmpeg开发(九)——Qt视频播放器之快进滑动条(参考了暴风影音、迅雷影音)
FFmpeg开发(九)--Qt视频播放器之快进滑动条(参考了暴风影音.迅雷影音) 上一篇介绍了使用多线程 FFmpeg开发(八)--Qt视频播放器之多线程的使用(参考了暴风影音.迅雷影音) 本播放器系 ...
- matlab利用滑动条控制图片二值化阈值
前言 由于做项目的时候需要对图片进行二值化,而且图片不同需要达到二值化的效果也不同,如果一直要在程序里试探阈值比较麻烦.所以想利用图像界面中的滑动条人工控制二值化阈值. 一.主要步骤 1. 在matl ...
- IOS 开发 UIProgress 和 UISlidre 进度条和滑动条组件
进度条和滑动条组件非常常见,在ios中进度条组件是无法响应事件的.滑动条可响应事件.但是这两个组件均不可设置高度,可设置x,y,width 进度条属性 名称 类型 说明 默认值 progressVie ...
- 【QT开发笔记-基础篇】| 第二章 常用控件 | 2.9 滑动条 QSlider
本节对应的视频讲解:B_站_链_接 https://www.bilibili.com/video/BV1BT411g791 QSlider 是滑动条控件,滑动条可以在一个范围内拖动,并将其位置转换为整 ...
最新文章
- window.open(url?param=+paramvalue) 服务端 乱码问题解决
- [云炬创业学笔记]第一章创业是什么测试2
- 为什么会有那么多的人选择Java？学Java到底好不好？
- Git使用教程：真正手把手教你使用git！
- spring boot 入门-使用spring boot构建简单应用
- sql server2016里面的json功能 - 转
- 设备的开发【WP7学习札记之五】
- linux c 密码 星号,Linux C ： 登录密码星号 * 显示，包含能回退 backspace
- 竞价实例-让ESS省上加省
- 基于ENVI下的土地利用信息提取（三）
- svn 重新定位版本库
- 【C】C课程设计-驾校考试模拟系统
- Json Web Token（JWT）
- 明日边缘 Edge of Tomorrow (2014)旋风下载
- 如何下载网页上网站上的视频
- matlab stk 设置,[ STK ]（八）使用 Matlab，在 STK 中建立卫星间连线
- 6-2 找出大于num的最小素数 (16 分)
- 我作为“硬件工程师”，为什么怕做硬件？
- 三菱fx2n做从站的modbus通讯_三菱PLC控制如何变频器？正解多种方法
- 星座时代：一家企业的自白