在一个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来解决。

ArcGIS API for Javascript 图层切换渐变效果实现的更多相关文章

  1. ArcGIS api for javascript——图层-创建定制的切片图层类型的图层

    描述 本例展示了如何创建一个定制图层,该图层访问来自WEB服务器的地图切片.这种方式最通用的用途是检索ArcGIS Server 9.2切片缓存或web上的其他地图切片服务.尽管本例使用的是一个Arc ...

  2. ArcGIS api for javascript——图层-创建WMS图层类型的图层

    本例使用一个WMS端点创建了一个简单的动态图层.首先,代码声明一个新的类my.CityStatesRiversUSAWMSLayer,该类继承esri.layers.DynamicMapService ...

  3. ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务

    1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...

  4. 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述

    原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...

  5. arcgis api for JavaScript _加载三维图层(scene layer)

    arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript  4.x 版本增加对三维的支持. 关于三维图层(sce ...

  6. [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets简介

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html] 一.Intro ...

  7. 基于ArcGIS API for Javascript的地图编辑工具

    最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...

  8. ArcGIS API for JavaScript介绍

    ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...

  9. ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能（四）

    转自:http://www.cnblogs.com/hll2008/archive/2008/11/22/1338630.html 目的:1.ArcGIS API for JavaScript实现To ...

随机推荐

  1. java后台获取URL带参demo

    URL:http://aos.wall.youmi.net/v2/check_fb_sig?order=YM130402cygr_UTb42&app=30996ced018a2a5e& ...

  2. java并发的基本概念和级别

    并发的概念: 并发(Concurrency)和并行(Parallelism) 并发偏重于多个任务交替执行,而多个任务之间有可能还是串行的.而并行是真正意义上的“同时执行”.严格意义上来说,并行的多个任 ...

  3. 用Theano学习Deep Learning（三）：卷积神经网络

    写在前面的废话: 出了托福成绩啦,本人战战兢兢考了个97!成绩好的出乎意料!喜大普奔!撒花庆祝! 傻…………寒假还要怒学一个月刷100庆祝个毛线………… 正题: 题目是CNN,但是CNN的具体原理和之 ...

  4. Mybit错误，提示There is no getter for property named 'tid' in 'class java.lang.String'

    改成 <select id="queryStudentByNum" resultType="student" parameterType="st ...

  5. MonkeyScript测试命令集合

    MonkeyScript:(不支持截屏) 可以被Monkey识别的集合命令 可以完成重复固定的操作   MonkeyRunner(支持截屏操作) 提供一系列API,可以完成模拟事件和截屏操作   Mo ...

  6. Windows C盘文件夹介绍及说明

    Documents and Settings是什么文件? 答案: 是系统用户设置文件夹,包括各个用户的文档.收藏夹.上网浏览信息.配置文件等. 补:这里面的东西不要随便删除,这保存着所有用户的文档和账 ...

  7. 前端使用CryptoJs类库进行sha-256、MD5加密

    Google的加密库 CryptoJs(点此下载) 包含了很多常用的加解密方式,包括AES.DES.SHA-1.SHA-2.SHA256.MD5等. DES对称加密在之前的文章中也有介绍过,大传送门. ...

  8. Spring与Redis的实现

    前言 Redis作为缓存还是相当不错的,一定程度上缓解了数据库的IO操作,具体不多说,具体网上查找资料. 实战 不多说,直接上代码. 第一步:所需要的依赖 <!-- redis --> & ...

  9. EF中关系映射问题

    一对一,和一对多的简单问题就部说了,直接来多对多这样的问题吧. 首现关系映射为这样的: /// <summary> /// 对应数据库中dbo.Address表 /// </summ ...

  10. 解决编译错误 implicit declaration of function 'strptime'

    根据man手册,在文件中加上以下定义,应该可以去处该warning        #define _XOPEN_SOURCE /* glibc2 needs this */        #inclu ...