在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版本的实现方法如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| // 控制图层的缩放级别 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版本的实现方法如下:
1 2 3 4 5 6 7 8 9 10
| //通过scale属性实现 var map = new Map("map", { "maxScale": 9000000, "minScale": 20000, }); //通过zoom属性实现 var map = new Map("map", { "maxZoom": 16, "minZoom": 4 });
|
在3版本中,我们只需要在地图初始化的时候,指定它的最大最小zoom或者scale属性就行了。