ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画
这是个很有意思的例子，不过例子给的比较复杂，需要查很多API，我会在文章最后给出关键的类和属性解释。
同样发现一个很有意思的事儿：博客园似乎有爬虫，我4号发布的blogs，5号就在百度和google搜索页面上看到了转载或者复制。
这篇文章逻辑组织不太好，想知道怎么做缩放动画的可以直接拉到尾部看结论。
当然，这篇代码比较多，不建议手机看。
进入正题，goTo()动画，官方的例子是在SceneView中实现的。
照例，给出require的第一个字符串数组参数
require(
[
"esri/Map",
"esri/views/SceneView",
"dojo/query",
"dojo/on"
"dojo/domReady!"
]
function(Map,SceneView,query,on)
{
//你的代码
}
);
除了上一次熟悉的Map类和SceneView类，还多出来了query和on这俩，字面意思可以猜测是查询和事件有关。继续往下看。
为了实现动画移动摄像机，就要在html页面组织一些按钮。
于是，在html的body标签内如下组织：
<body>
<div id="optionsDiv">
<button id="default">Default flight</button>
<button id="linearSlow">Linear slow flight</button>
<button id="linearFast">Linear fast flight</button>
<button id="expoIncrease">Exponentially increasing speed flight</button>
<button id="fixedDuration">10 seconds flight</button>
<button id="bounceBerlin">Bounce to Berlin</button>
</div>
<div id="viewDiv"></div>
</body>
6个按钮，分别是：默认漫游、较慢漫游、较快漫游、渐渐加快漫游、10秒钟漫游、弹性缩放到柏林
于是，在require的第二个函数参数里，就这样给这些button添加事件：
funtion(Map,SceneView,query,on)
{
// 仍然是实例化两个对象，map和view
var map = new Map({
basemap: "osm"
});
var view = new SceneView({
container: "viewDiv",
map: map,
zoom: 4
}); on(dojo.query("#default"), "click", function(){ });
on(dojo.query("#linearSlow"), "click", function(){ });
on(dojo.query("#linearFast"), "click", function(){ });
on(dojo.query("#expoIncrease"), "click", function(){ });
on(dojo.query("#fixedDuration"), "click", function(){ });
on(dojo.query("#bounceBerlin"), "click", function(){ });
)
函数参数
仅仅是一个on(dojo.query(), , function(){})方法即可实现为DOM元素添加对应的事件。这里，指定了“click”事件。
关于dojo.query()，参考博客自 - http://blog.csdn.net/dojotoolkit/article/details/6265337
这里借用了CSS的语法，dojo.query("#default")，这样就能获取到元素了.
需要注意的是query方法获取到的是数组，如果只有一个那就是它本身。
单个按ID查找DOM元素的方法是dojo.byId()
我们继续。获取html中定义的按钮元素后添加了事件以及函数体后，自然就是为它添加动画效果了。
我们取完整函数体看看，有什么异同。
on(dojo.query("#default"), "click", function() {
view.goTo(shiftCamera());
});
on(dojo.query("#linearSlow"), "click", function() {
view.goTo(shiftCamera(),
{
speedFactor: 0.1,
easing: "linear"
});
});
on(dojo.query("#linearFast"), "click", function() {
view.goTo(shiftCamera(),
{
speedFactor: ,
easing: "linear"
});
});
on(dojo.query("#expoIncrease"), "click", function() {
view.goTo(shiftCamera(),
{
duration: ,
easing: "in-expo"
});
});
on(dojo.query("#fixedDuration"), "click", function() {
view.goTo(shiftCamera(),
{
duration: ,
maxDuration:
});
});
// 自定义时间函数体
function customEasing(t) {
return - Math.abs(Math.sin(-1.7 + t * 4.5 * Math.PI)) * Math.pow(
0.5, t * );
}
on(dojo.query("#bounceBerlin"), "click", function() {
view.goTo({
position: {
x: 13.40,
y: 52.52,
z: ,
spatialReference: {
wkid:
}
},
heading: ,
tilt:
}, {
speedFactor: 0.3,
easing: customEasing
});
});
click事件函数体
我们可以发现有很多东西是多出来的。以默认漫游按钮为切入点，发现使用了view这个对象的goTo()方法，参数未知，看来是一个有返回值的方法。查看官方API和本例代码得知goTo()方法和shiftCamera()方法的含义：
goTo()方法
将视图转移到给定的目标。参数可以是：Geometry或Geometry数组、Graphic或Graphic数组、Viewpoint对象、Camera对象。
本例中就使用了Camera对象（shiftCamera方法的返回值就是一个Camera）或Object对象（缩放到柏林）。
以上的参数是“target”，即目标。
后面还有一些可选的参数，用{}括起来作为一个Object对象：
animate（boolean）、speedFactor（number类型）、duration（numer类型）、maxDuration（number类型）、easing（string或方法体）
speedFactor是速度因子，很好理解，默认是1.
duration是持续时间，如果有这个，那么speedFactor就会被覆盖。
maxDuration是最大持续时间。
easing是缓动方式。
通常，easing必选，speedFactor和duration、maxDuration三选一。
参数均可选。
shiftCamera()方法
代码如下：
function shiftCamera(deg){
var camera = view.camera.clone();
camera.position.longitude += deg;
return camera;
}给定一个deg（旋转角，角度制），camera的position的longitude值加上deg值。当然，deg要和longitude类型一样。
position是一个空间点（Point类，继承自Geometry），longitude是经度。AJS4.2是默认用Web Mercator或WGS 84参考系的。
本例中默认漫游传入了60度，即每次按按钮就会把视角旋转60度。
我们再来看看第2-第5个漫游按钮。
它们除了shiftCamera方法返回的Camera对象（target）外，还多了一个{}Object对象（option）。
本例中，除了弹性缩放到柏林这个按钮外，其余都是用Camera对象和Object对象组合的方式，达到动画效果。
我们当然可以直接用{}来定义一个Camera对象，就像弹性缩放到柏林这个按钮的方法体内写的。
on(dojo.query("#bounceBerlin"), "click", function(){
view.goTo({ //这一层大括号定义的是Camera对象
position:
{ //这一层大括号定义的是Camera的position属性
x: 13.40,
y: 52.52,
z: 700000,
spatialReference:
{ //这一层是空间参考
wkid: 4326
}
},
heading: 0, //Camera.heading
tilt: 0 //Camera.tilt
},
{ //这一层大括号就是跟上面类似的Object对象了
speedFactor: 0.3,
easing: customEasing
});//这个小括号结束的是goTo的范围
});
在Object对象中，easing参数可以指定为一个方法体（返回值是number即可）。这里customEasing就是这样的一个方法。（看起来略复杂）
function customEasing(t) {
return 1 - Math.abs(Math.sin(-1.7 + t * 4.5 * Math.PI)) * Math.pow(0.5, t * 10);
}
（插一句：如果在C#中，可不能随便这样给个方法名就行了，要用委托才能操作方法）
关于easing这个参数的string值，大家可以自行到API查询，我简单列出这几个枚举：
linear, in-cubic, out-cubic, in-out-cubic, in-expo, out-expo, in-out-expo
都可以自己试试，估计就是速度的不同而已。官方推荐小于1s的动画就用自己定义的方法体，超过1s的就用上面的枚举就行了。
总结。
地图缩放动画的核心就是view对象的goTo()方法的使用。
goTo()方法在MapView类和SceneView类中都有提供，但是在它们的父类View类中没有。
本文就对官方的API和例子进行学习，主要了解goTo()方法的参数的使用。
用法：view对象.goTo(target, option);
可以是：{定义Camera对象}+{Option参数}传入（前5个按钮）
也可以是：直接传一个Camera对象+{Option参数}（最后一个按钮）。
Option参数中的easing是“必选”的（不然就没动画效果了呀），speedFactor、duration、maxDuration是三选一。
Camera对象可以自己用方法体返回，也可以直接用js的大括号定义。
改变Camera对象的一些属性值，如经纬度，就可以达到改变视角。
至于其他的，如Geometry、Graphic、Viewpoint就没有进行学习了，参考API可以解决，本文只是解读官方的例子达到入门效果。
ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画的更多相关文章
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- ArcGIS API for JavaScript 4.2学习笔记[23] 没有地图如何进行查询？【FindTask类的使用】
从第一篇到现在都是基于地图的,不管怎么样,不管是2D还是3D,至少有个图. 这次来个没有图的例子,看看纯文字的空间查询是什么样的. 本例适用于后台查询或低性能电脑的查询. 预览图 由于4.3和4.2的 ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译
内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...
- ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】
有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...
- ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）
这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...
- ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼（缩略图的实现及异步处理、Promise、回调函数、监听的笔记）
文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数. ...
- ArcGIS API for JavaScript 4.2学习笔记[19] 搜索小部件——使用更多数据源
上一篇中提到,空间搜索小部件是Search这个类的实例化,作为视图的ui属性添加进去后,视图就会出现搜索框了. 这节的主体代码和上篇几乎一致,区别就在上篇提及的sources属性. 先看看结果: 由于 ...
- ArcGIS API for JavaScript 4.2学习笔记[31] (补充学习)Task类
Task这个东西很有用,是AJS中用于解决各种乱七八糟任务的一个类.它有很多子类,有用于空间分析的,有用于空间查询的,等等. 这篇作为补充学习的第一篇,也是进阶学习的第一篇,我就改个写法. 我将使用思 ...
随机推荐
- 最大信息系数（MIC）——Detecting Novel Associations in Large Data Sets
本文介绍了一种发现两个随机变量之间依赖关系强度的度量MIC(最大信息系数,类似于相关系数的作用).MIC具有以下性质和优势: MIC度量具有普适性.其不仅可以发现变量间的线性函数关系,还能发现非线性函 ...
- 【阿里聚安全·安全周刊】阿里双11技术十二讲直播预约|AWS S3配置错误曝光NSA陆军机密文件
关键词:阿里双11技术十二讲直播丨雪人计划丨亚马逊AWS S3配置错误丨2018威胁预测丨MacOS漏洞丨智能风控平台MTEE3丨黑客窃取<权利的游戏>剧本|Android 8.1 本 ...
- 已有模板与tp框架结合
具体实现步骤: ①复制模板文件到view指定文件目录: ②复制css.js.img到view指定文件目录: ③把静态资源(css.js.img)文件的路径设置为“常量”信息(在index.php入口文 ...
- continue，break以及加上标签的使用（goto思路）
代码例子在java编程思想70-73页.这里只是想做做总结 java中需要用到标签的唯一理由就是因为由循环嵌套的存在,而且想从多层嵌套循环中break或者continue. 因此,标签只能放在循环前面 ...
- 迭代子模式（Iterator）
迭代子模式(Iterator) 顾名思义,迭代器模式就是顺序访问聚集中的对象,一般来说,集合中非常常见,如果对集合类比较熟悉的话,理解本模式会十分轻松.这句话包含两层意思:一是需要遍历的对象,即聚集对 ...
- mysql 系统性浅聊 myisam 存储引擎【原创】
>>思维导图 >>介绍 mysql中的存储引擎都是以插件的形式存在,目前用的最多存储引擎就是innodb和myisam.MySQL5.5.5以后(包括5.5.5)默认使用Inn ...
- poj 2456 Aggressive cows && nyoj 疯牛 最大化最小值 二分
poj 2456 Aggressive cows && nyoj 疯牛 最大化最小值 二分 题目链接: nyoj : http://acm.nyist.net/JudgeOnline/ ...
- 2016第七届 蓝桥杯 全国总决赛B题(完全平方数) （练习）
道友给看了一道题目,就记录一下吧 题目: 给你0,1,2,3,4,5,6,7,8,9十个数字,要你选出任意一个或几个组合在一起成为完全平方数,每个数字都必须选且只能选一次,求可能的方案. 比如有其中几 ...
- System.getProperty()方法获取系统变量
来自我的CSDN博客 今天在阅读JDBC的DriverManager类源码时,看到了这么一句代码: System.getProperty("jdbc.drivers"): ...
- macox下编译snappy静态库
源代码地址:https://github.com/google/snappy 下载 git clone https://github.com/google/snappy 编译 进入snappy源代码文 ...