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