ArcGIS API for Javascript 图层切换渐变效果实现
来源:互联网 发布:淘宝客html模板 编辑:程序博客网 时间:2024/04/30 00:46
在一个WebGIS系统中往往要实现图形的切换,比如业务图层的切换,以及底图的切换等等,可以通过控制图层的可见性来实现。比如通过设置图层的opacity 、visible来控制,前几天有网友聊天的时候提了一个这样的需求如果在地图切换的时候添加一个过渡效果,以至于变化的效果不显得生硬。写面说一下我的实现思路。
先看一下效果吧 Demo链接 http://cdpn.io/xsiub
总结:通过控制包裹图层的div来实现效果的渐变,通过这种方式还可以给地图添加一个滤镜的功能,通过获取map的div 设置相应的CSS 熟悉即可。根据这种思想的指导,在以后开发中,如果碰到API不支持的工功能,可以试试这种这种控制原生的html来解决。
先看一下效果吧 Demo链接 http://cdpn.io/xsiub
如果这个功能在普通的Web开发中,果要对两个html元素 比如div实现渐变性的切换的效果,我们首先会想到使用Jquery或者dojo等框架来解决,这些框架中都有一些动画的方式来实现,可以尝试将这种思想用在地图上。
首先应该知道,地图中的图片都是通过html元素来承载的。每个图层都被一个div包裹着,通过开发者工具查看 Map的组成如下。(单击图片看大图)
通过上图可以看到每个图层都被一个div包裹着,如果设置最外层div的透明度,里面包括的地图也会改变为相应的透明度。到此为止解决方案基本上思路是清晰了:找出每个图层的div,然后在动画里面动态地改变相应div的透明度。接下来进行编码实现。
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" > <style> html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; overflow-y:hidden; background-color: #DBD7D0;; font-family: "Trebuchet MS"; } </style> <title> </title></head><body><div id="map"><button id="switchbasemap" style="position: absolute;z-index: 1;left: 100px;top: 20px;height: 30px;">切换底图</button></div></body><script src="http://js.arcgis.com/3.7/"></script><script src="app.js"></script></html>
上述代码中主要引入ArcGIS的Javascript API以及相应的CSS,并且添加了一个按钮来触发 地图的切换事件。
在JS代码里主要解决了2个问题,1、如何获取承载图层的div元素 2、如果实现动画的实现。通过刚才的发现,上面包裹图层的div都有一个固定的id,有了这个id,可以通过document.getElementById 或者dojo自带的dojo.byId就可以轻而易举地获得了 ,如果使用的是最新的是3.7的api的话,调用新增的getNode方法就可以得到这个div了。至于实现动画效果可以使用dojo中的dojo/_base/fx 中的animateProperty 来实现,(Jquery中可以使用对应的$.animate)。
关键代码如下(具体代码请下载完整的代码 地址:http://codepen.io/kunkun/share/zip/xsiub)basefx.animateProperty({ node: colorfullbasemapdiv, duration:1000, properties: { opacity: 0 }, onEnd:function(){ colorfullbasemapdiv.style.display="none"; graybasemapdiv.style.display="block"; basefx.animateProperty({ duration:1000, node: graybasemapdiv, properties: { opacity: 1 } }).play(); } }).play();
总结:通过控制包裹图层的div来实现效果的渐变,通过这种方式还可以给地图添加一个滤镜的功能,通过获取map的div 设置相应的CSS 熟悉即可。根据这种思想的指导,在以后开发中,如果碰到API不支持的工功能,可以试试这种这种控制原生的html来解决。
1 0
- ArcGIS API for Javascript 图层切换渐变效果实现
- ArcGIS api for javascript+jquery实现简单的图层控制切换
- arcgis api for javascript 图层控制
- ArcGIS api for javascript-图层控制
- 使用ArcGIS API for JavaScript实现类似ArcMap的图层控制面板Tab of Contents
- ArcGIS For JavaScript API Switch Basemap(切换底图)
- 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 IOS 实现图层显示控制
- 【iOS】ArcGIS API For iOS 实现图层显示控制
- arcgis api javascript 之FeatureLayer图层实现热力图
- arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
- ArcGIS API For Javascript之多图层显示与隐藏,图层要素选框查询
- ArcGIS API for JavaScript v3.9实现鹰眼图
- 如何将裸码流pcm编码为aac文件
- playframework 一步一步来 之连接MySQL数据库
- 使用URL读取网络资源
- SQL Server 排序规则
- iOS中的单例
- ArcGIS API for Javascript 图层切换渐变效果实现
- Web_JavaScript_AJAX_AJAX基础知识;
- uva--10285Longest Run on a Snowboard+dp
- jsp中两种跳转方式及区别
- 使用LOL盒子的数据查询简单的战斗力信息
- 颠倒的价牌
- Ubuntu 搭建FTP服务器以及解决530问题
- MYSQL SHOW VARIABLES简介
- 2、ActiveMQ