ArcGIS API for JavaScript 4.2学习笔记[6] goTo()地图动画

0
分享 2017-06-20
这是个很有意思的例子,不过例子给的比较复杂,需要查很多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 id="viewDiv">
</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/dojotoolk ... 65337
这里借用了CSS的语法,dojo.query("#default"),这样就能获取到元素了.
需要注意的是query方法获取到的是数组,如果只有一个那就是它本身。
单个按ID查找DOM元素的方法是dojo.byId()




我们继续。获取html中定义的按钮元素后添加了事件以及函数体后,自然就是为它添加动画效果了。
我们取完整函数体看看,有什么异同。
on(dojo.query("#default"), "click", function() {
view.goTo(shiftCamera(60));
});

on(dojo.query("#linearSlow"), "click", function() {
view.goTo(shiftCamera(60),
{
speedFactor: 0.1,
easing: "linear"
});
});

on(dojo.query("#linearFast"), "click", function() {
view.goTo(shiftCamera(60),
{
speedFactor: 6,
easing: "linear"
});
});

on(dojo.query("#expoIncrease"), "click", function() {
view.goTo(shiftCamera(60),
{
duration: 4000,
easing: "in-expo"
});
});

on(dojo.query("#fixedDuration"), "click", function() {
view.goTo(shiftCamera(30),
{
duration: 10000,
maxDuration: 10000
});
});

// 自定义时间函数体
function customEasing(t) {
return 1 - Math.abs(Math.sin(-1.7 + t * 4.5 * Math.PI)) * Math.pow(
0.5, t * 10);
}

on(dojo.query("#bounceBerlin"), "click", function() {
view.goTo({
position: {
x: 13.40,
y: 52.52,
z: 700000,
spatialReference: {
wkid: 4326
}
},
heading: 0,
tilt: 0
}, {
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可以解决,本文只是解读官方的例子达到入门效果。
文章来源:http://www.cnblogs.com/onsummer/p/6388084.html

2 个评论

有给地方掉了个逗号
做出来感觉怪怪的

要回复文章请先登录注册