在一個WebGIS系統中往往要實現圖形的切換，比如業務圖層的切換，以及底圖的切換等等，可以通過控制圖層的可見性來實現。比如通過設置圖層的opacity 、visible來控制，前幾天有網友聊天的時候提了一個這樣的需求如果在地圖切換的時候添加一個過渡效果，以至於變化的效果不顯得生硬。寫面說一下我的實現思路。
先看一下效果吧 Demo鏈接
如果這個功能在普通的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來解決。