arcgis api for 自定义zoom

1.需求

自定义UI，实现对地图的zoom操作，在view缩放的时候，带动画效果

2.分析问题

UI视图

一般情况，可能大部分初学者会使用以下代码对zoom进行操作，这个方法是可以放大缩小，但是动画是没有的，就显得很生硬

// 地图放大缩小
zoomInOrOut(type){
  if (type === 'in') {
    view.zoom += 1;
  } else {
    view.zoom -= 1;
  }
}

我们可以使用官方的插件，可以发现官方插件实现的放大缩小是带有动画的

import Zoom from "@arcgis/core/widgets/Zoom";
let zoom = new Zoom({
  view: view
});
view.ui.add(zoom, "bottom-right");

那么，官方插件放大缩小的动画是怎么实现的呢？

我们可以打开插件代码进行查看分析

大概就是调用view.mapViewNavigation属性的zoomIn()和zoomOut()方法，它是带有动画的

这个属性在官方文档并没有介绍

3.解决方法

// 放大缩小zoom
zoomInOrOut(type) {
    if (type === 'in') {
        G.view.mapViewNavigation.zoomIn()
    } else {
        G.view.mapViewNavigation.zoomOut()
    }
}