在一个WebGIS系统中往往要实现图形的切换，比如业务图层的切换，以及底图的切换等等，可以通过控制图层的可见性来实现。比如通过设置图层的opacity 、visible来控制，前几天有网友聊天的时候提了一个这样的需求如果在地图切换的时候添加一个过渡效果，以至于变化的效果不显得生硬。写面说一下我的实现思路。
先看一下效果吧 Demo链接
<!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>
关键代码如下（具体代码请下载完整的代码 地址：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来解决。
ArcGIS API for Javascript 图层切换渐变效果实现
原文：http://www.cnblogs.com/dubaokun/p/3528676.html