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