ArcGIS JS API 4.16控制地图的缩放大小

在3.X的ArcGIS JS API版本中我们可以轻松的调用相应的API来实现地图的缩放大小的控制，让实例化后的地图在我们设置的范围中进行缩放，但是在4.X的版本中并没有相应的属性来控制，所以我们采用一种折中的方式来实现。

问题描述

在WebGIS项目开发过程中，有时候我们的数据服务在某些级别下是没有数据的，比如一个切片服务，仅仅切了5-12级，所以当我们将地图缩放到0-4级或者12级往后的话，会看不到我们的切片图层。为了解决这个问题，我们就要控制地图的缩放级别，换句话说就是将地图的最大和最小比例控制在5-12级，这样一来不管用户怎么样去缩放地图，都会在不同级别看到我们的切片图层。

搞懂了这样做的目的的话，那我们接下来看看具体怎么实现。

操作步骤

1、ArcGIS JS API 4.16，也就是ArcGIS JS API 4.X版本的实现方法如下：

// 控制图层的缩放级别
view.when(function () {
    view.on('double-click', function (evt) {
        evt.stopPropagation();
    });
    view.on('mouse-wheel', function (evt) {
        //鼠标滚轮缩小
        if (evt.deltaY > 0 && view.scale > 9000000) {
            evt.stopPropagation();
            return false;
        }
        //鼠标滚轮放大
        else if (evt.deltaY < 0 && view.scale < 20000) {
            evt.stopPropagation();
            return false;
        }
        if ((evt.deltaY > 0 && view.scale > 9000000) || (evt.deltaY < 0 && view.scale < 20000)) {
            console.info(view.scale);
            console.info(evt);
        }
    });
});           

复制

其实在4版本中我们是通过监听地图的鼠标滚动事件来实现的，在鼠标滚动的时候去阻止事件的执行。但是在3版本中实现起来就会容易得多，因为3版本中提供了相应的属性去控制。

2、ArcGIS JS API 3.33，也就是ArcGIS JS API 3.X版本的实现方法如下：

//通过scale属性实现
var map = new Map("map", {
    "maxScale": 9000000,
    "minScale": 20000,
});
//通过zoom属性实现
var map = new Map("map", {
    "maxZoom": 16,
    "minZoom": 4
});           

复制

在3版本中，我们只需要在地图初始化的时候，指定它的最大最小zoom或者scale属性就行了。

本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！

本文分享自作者个人站点/博客

http://www.xbeichenbei.com/

复制

如有侵权，请联系 [email protected] 删除。