您的位置：首页 > Web前端 > JavaScript

ArcGIS API for Javascript 图层切换渐变效果实现

2014-12-25 23:07 531 查看

在一个WebGIS系统中往往要实现图形的切换，比如业务图层的切换，以及底图的切换等等，可以通过控制图层的可见性来实现。比如通过设置图层的opacity 、visible来控制，前几天有网友聊天的时候提了一个这样的需求如果在地图切换的时候添加一个过渡效果，以至于变化的效果不显得生硬。写面说一下我的实现思路。
先看一下效果吧 Demo链接 http://cdpn.io/xsiub
[align=left]如果这个功能在普通的Web开发中，果要对两个html元素比如div实现渐变性的切换的效果，我们首先会想到使用Jquery或者dojo等框架来解决，这些框架中都有一些动画的方式来实现，可以尝试将这种思想用在地图上。[/align]
[align=left]首先应该知道，地图中的图片都是通过html元素来承载的。每个图层都被一个div包裹着，通过开发者工具查看 Map的组成如下。（单击图片看大图）[/align]
[align=left][/align]
[align=left]通过上图可以看到每个图层都被一个div包裹着，如果设置最外层div的透明度，里面包括的地图也会改变为相应的透明度。到此为止解决方案基本上思路是清晰了：找出每个图层的div，然后在动画里面动态地改变相应div的透明度。接下来进行编码实现。[/align]

<!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>

[align=left]上述代码中主要引入ArcGIS的Javascript API以及相应的CSS，并且添加了一个按钮来触发地图的切换事件。[/align]
在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来解决。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航