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(){
    
    });
)

函数参数