0
点赞
收藏
分享

微信扫一扫

arcgis api for 自定义zoom

1.需求

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

2.分析问题

UI视图

arcgis api for 自定义zoom_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");

arcgis api for 自定义zoom_解决方法_02

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

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

arcgis api for 自定义zoom_解决方法_03

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

arcgis api for 自定义zoom_解决方法_04

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

arcgis api for 自定义zoom_放大缩小_05

3.解决方法

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

箴言:因为这些东西是非常简单的。不要抱怨自己学不会,那是因为你没有足够用心。



举报

相关推荐

0 条评论