ArcGIS for javascript API 实现地图卷帘效果

这个是今天在群里听到有人做了这个功能,于是产生了兴趣。也想来尝试下,参照了KK在github上的例子https://github.com/kunkun12/MapSwipe,例子写得很详细,我这里就不在赘述了。先看效果图:

其实原理很简单,就是设置第二次add进来的Layer的div容器的宽和高。

这里说下我从中学到的一下小的体会吧:在上面有2个radio button按钮,我们在选择水平卷帘或是垂直卷帘时,要对这个按钮做一个判断,这里巧妙的用这种写法

 var isverticalswipe=false;
   var ishorizontalswipe=false;
   on(dom.byId(‘verticalswipe‘),"click",function(){
     isverticalswipe=!isverticalswipe; //没有设置为true,而是a=!a;很巧妙
   });
 on(dom.byId(‘horizontalswipe‘),"click",function(){
      ishorizontalswipe=!ishorizontalswipe;
   });

源代码可以从上面给的github的连接里下载到。

时间: 2024-11-08 23:33:22

ArcGIS for javascript API 实现地图卷帘效果的相关文章

Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式

原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis for JavaScript实现的效果 看到了效果,是不是各位有点小鸡动,是不是也宠宠欲动,有木有?但是具体是怎么实现的呢?下面我来详细的给各位说说我的实现思路吧. 第一,数据. 其实搜索的对象从类型上来说,应该是点.线.面都支持的,但是在实际的操作过程中,不论是百度还是我自己做的时候,都会将所有

ArcGIS For JavaScript API 默认参数

“esri.config”的是在1.3版中的的“esriConfig”的替代品.如果您使用的是1.2或更低的版本,您应该参阅默认API v1.2和更低的配置.对于版本1.3或更高版本,您可以使用“esri.config”在地方的“esriConfig”.虽然“esriConfig”可以继续使用,与1.3版本,您应该更新您的应用程序,而不是使用“esri.config”.ArcGIS的JavaScript API中有一些默认的配置,可以被重写编程.例如:        var zoomSymbol

ArcGIS for Javascript API 3.16本地部署

1. 下载ArcGIS JavaScript API 下载地址为(需要注册账号):https://developers.arcgis.com/en/downloads/ 当前最新版本为4.0,在下载页面中选择v3.16 2. 本地部署API (1)web服务器:在服务管理器中添加角色,选择需要安装的IIS服务. IIS的部署十分简单,默认安装即可(全部勾选),不再赘述. (2)将下载的API解压至IIS生成的目录下:目录结构如下:里面包含install.html的安装API说明(英文版),您可以

Javascript+CSS实现影像卷帘效果

用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻,想把它搬到自己的WebGIS系统中去,抱着同样的想法,我也对这种比较炫的卷帘效果做了一下研究,吼吼,出来了,给大家汇报一下成果,先看张图: 卷帘效果 看到这样的效果,你是不是小鸡动了一下,嘿嘿,别急,听我慢慢道来. 首先,容器.分别用两个DIV来显示两个不同时期的影像.接下来设置两个容器的样式,代码: #after{ position: absolute; top: 0px; left: 0px; background-i

ArcGIS Server JavaScript API 各命名空间的含义【转】

1.esri 命名空间      所有的对象都是在 esri 命名空间下的,esri 有自己的属性和方法.      如 esri.version 返回当前 JavaScript API 的版本号.esri.hide(Element) 隐藏 html 元素,像 DIV 或者是 TABLE 元素.2.Graphic 对象      如果你做过 arcserver adf 开发或者是 arcserver api for Silverlight 开发的话,对 Graphic 对象应该是很熟悉的.这是一

Arcgis for javascript实现百度地图ABCD marker的效果

概述: 在我的博客中,有一篇相关的文章,这段时间,有很多人问我求源码,只是时间过去已长,源代码已找不到,乘着这个9.3放假,又重新实现了下,并相关代码做了优化,在此贴出来,方便大家使用. 相关文章地址: http://blog.csdn.net/gisshixisheng/article/details/39577817 实现后效果: 为直观期间,先贴出来我做的效果 列表展示和地图展示以及联动 显示信息 实现思路: 1.列表与地图的互动 鼠标经过列表时,修改列表图标,并根据列表返回的值在地图上绘

FK JavaScript之:ArcGIS JavaScript API之地图动画

地图要素动画应用场景:动态显示地图上的要素的属性随着时间的改变而改变,并根据其属性的变化设置其渲染.比如:某水域项目中,随着时间的变化,动态展现水域的清淤进度 本文目的:对ArcGIS JavaScript 官网示例中的代码进行分析注解.下述代码对官网示例进行了部分调整 示例网址1: 示例网址2: 示例中csv文件 以下为代码注释: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&

ArcGIS for JavaScript继承TiledMapServiceLayer来实现“动态切图”

这种方式可以提高出图速度于效果,算法见http://blog.newnaw.com/?p=633,我用ArcGIS for JavaScript API来实现.具体代码为: 1 function initDynamicMapLayer() { 2 dojo.declare("ogc.DynamicMapLayer", esri.layers.TiledMapServiceLayer, { // create DynamicMapLayer by extending esri.layer

ArcGIS Javascript API 加载高德在线地图扩展

利用ArcGIS JavaScript API加载高德在线地图的扩展 /** * Created by WanderGIS on 2015/7/15. */ define(["dojo/_base/declare", "esri/geometry/Extent", "esri/SpatialReference", "esri/geometry/Point", "esri/layers/TileInfo",