ArcGIS API for Javascript 图层切换渐变效果实现
在一个WebGIS系统中往往要实现图形的切换，比如业务图层的切换，以及底图的切换等等，可以通过控制图层的可见性来实现。比如通过设置图层的opacity 、visible来控制，前几天有网友聊天的时候提了一个这样的需求如果在地图切换的时候添加一个过渡效果，以至于变化的效果不显得生硬。写面说一下我的实现思路。
先看一下效果吧 Demo链接
<!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>
关键代码如下（具体代码请下载完整的代码 地址：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 图层切换渐变效果实现的更多相关文章
- ArcGIS api for javascript——图层-创建定制的切片图层类型的图层
描述 本例展示了如何创建一个定制图层,该图层访问来自WEB服务器的地图切片.这种方式最通用的用途是检索ArcGIS Server 9.2切片缓存或web上的其他地图切片服务.尽管本例使用的是一个Arc ...
- ArcGIS api for javascript——图层-创建WMS图层类型的图层
本例使用一个WMS端点创建了一个简单的动态图层.首先,代码声明一个新的类my.CityStatesRiversUSAWMSLayer,该类继承esri.layers.DynamicMapService ...
- ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务
1.前言 上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
- 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- arcgis api for JavaScript _加载三维图层(scene layer)
arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript 4.x 版本增加对三维的支持. 关于三维图层(sce ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html] 一.Intro ...
- 基于ArcGIS API for Javascript的地图编辑工具
最近工作上需要用ArcGIS API for Javascript来开发一个浏览器上使用的地图编辑工具,分享一下一些相关的开发经验. 我开发的地图编辑工具是根据ESRI提供的例子修改而来的,参考的例子 ...
- ArcGIS API for JavaScript介绍
ArcGIS API for JavaScript中的类是按照模块组织的,主要包含esri.esri/geometry.esri/renderers.esri/symbols.esri/symbols ...
- 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 ...
随机推荐
- 浅谈PHP面向对象编程（八、多态）
8.0 多态 在设计一个成员方法时,通常希望该方法具备一定的通用性.例如要实现一个动物叫的方法,由于每个动物的叫声是不同的,因此可以在方法中接收-个动物类型的参数的对象当传人猫类对象时就发出猫类的叫 ...
- HDU1869 六度分离
/* 六度分离 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submi ...
- 导出文件名带时间信息的dmp文件
exp system/orcl@orcl owner=aixm file=d:\aixm%date:~0,4%%date:~5,2%%date:~8,2%_%time:~0,2%%time:~3,2% ...
- 第二章：Android Studio概述（二）[学习Android Studio汉化教程]
The Main Menu Bar 主菜单栏 主菜单栏位于Android Studio的最上面,你几乎可以利用主菜单和其子菜单来执行任何操作.不像Android Studio中其他的一些菜单,主菜单 ...
- Python,OpenGL生命游戏
初学Python和OpenGL,练手的第一个小程序life.py,这个小程序在日后会不断调整,增加类.优化判断及操作 执行效果: 按正规生命游戏的规则: 1.周围生命等于3时产生生命 2.周围生命等于 ...
- leetcode451
public class Solution { public string FrequencySort(string s) { var dic = new Dictionary<char, in ...
- xe8 单元别名
xe8 单元别名 Unit scope F2613 Unit 'Graphics' not found. Project>Option>Unit scope names> vcl.I ...
- 禁用Java JDK的自动更新
- 颜色模式中8位,16位,24位,32位色彩是什么意思?会有什么区别?计算机颜色格式（ 8位 16位 24位 32位色）<转>
颜色模式中8位,16位,24位,32位色彩是什么意思?会有什么区别简单地说这里说的位数和windows系统显示器设置中的颜色位数是一样的.表示的是能够显示出来的颜色的多少. 8位的意思是说,能够显示出 ...
- 谈谈跨平台的app开发 坚定的选择了flutter
目前市场上,(市场也许用的不对),比较常见的技术有xamrin.RN.Flutter,确切的说flutter是后起之秀,笔者也是最近才开始学习,xamrin是微软系的技术,笔者也很早就开始学习了,RN ...