因为爱GIS,我们聚集于此
  • 快捷登录:
查看: 1606|回复: 2
收起左侧

[个人心得] ArcGIS API for Javascript 图层切换渐变效果实现

[复制链接]
  • TA的每日心情
    奋斗
    2014-6-1 10:53
  • 签到天数: 8 天

    [LV.3]偶尔看看II

    发表于 2014-3-4 22:31:40 | 显示全部楼层 |阅读模式

    有你,GIS才会更精彩,马上注册,我们一起学GIS。

    您需要 登录 才可以下载或查看,没有帐号?立即注册 用百度帐号登录

    x
    在一个WebGIS系统中往往要实现图形的切换,比如业务图层的切换,以及底图的切换等等,可以通过控制图层的可见性来实现。比如通过设置图层的opacityvisible来控制,前几天有网友聊天的时候提了一个这样的需求如果在地图切换的时候添加一个过渡效果,以至于变化的效果不显得生硬。写面说一下我的实现思路。
        先看一下效果吧   Demo链接 http://cdpn.io/xsiub

    如果这个功能在普通的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>

    [color=rgb(51, 51, 51) !important]复制代码

    上述代码中主要引入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();

    [color=rgb(51, 51, 51) !important]复制代码

    总结:通过控制包裹图层的div来实现效果的渐变,通过这种方式还可以给地图添加一个滤镜的功能,通过获取map的div 设置相应的CSS 熟悉即可。根据这种思想的指导,在以后开发中,如果碰到API不支持的工功能,可以试试这种这种控制原生的html来解决。


    http://www.gisall.com/forum.php?mod=viewthread&tid=132376
  • TA的每日心情
    开心
    2014-5-23 00:00
  • 签到天数: 121 天

    [LV.7]常住居民III

    发表于 2014-3-6 00:27:23 | 显示全部楼层
    进来看看了

    该用户从未签到

    发表于 2015-3-19 15:42:16 | 显示全部楼层
    麻烦问一下  你的底图是怎么来的?请指教。谢谢
    您需要登录后才可以回帖 登录 | 立即注册 用百度帐号登录

    本版积分规则

    关闭

    热门推荐上一条 /1 下一条

    © 2013-2014 GIS520 ( 陕ICP备14003560号-1 )Powered by Discuz! X3.2 Template by giscafer   
    快速回复 返回顶部 返回列表