ArcGIS API for Javascript 圖層切換漸變效果實現

時間 2019-11-13

標籤 arcgis api javascript 切換漸變效果實現欄目 JavaScript 简体版

原文原文鏈接

　　在一個WebGIS系統中每每要實現圖形的切換，好比業務圖層的切換，以及底圖的切換等等，能夠經過控制圖層的可見性來實現。好比經過設置圖層的opacity 、visible來控制，前幾天有網友聊天的時候提了一個這樣的需求若是在地圖切換的時候添加一個過渡效果，以致於變化的效果不顯得生硬。寫面說一下個人實現思路。
先看一下效果吧 Demo連接 css

　　若是這個功能在普通的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個問題，一、如何獲取承載圖層的div元素二、若是實現動畫的實現。經過剛纔的發現，上面包裹圖層的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 ）html

     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來解決。
node

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。