专栏首页ArcGIS JS API开发ArcGIS JS API 4.16控制地图的缩放大小

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/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 去除ArcGIS JS API 4.16实例化后的地图拖动时默认自带的5px的外边框

    当我们用ArcGIS JS API 4版本实例化完一张二维地图的时候,鼠标移入地图区域内进行点击时,在地图周围会出现一个5像素的黑色边框,虽然不影响其他功能,但...

    X北辰北
  • ArcGIS API for JavaScript开发入门必读

    ArcGIS API for JavaScript开发必读的一篇入门文档,文章中对ArcGIS API for JavaScript做了简单的介绍,包括学习路线...

    X北辰北
  • ArcGIS JS API 4.16实现三维场景中在天地图底图上加载2000坐标系的倾斜摄影数据

    本文主要介绍下如何在国家天地图的底图上面使用ArcGIS JS API 4.16加载2000坐标系的倾斜摄影数据。

    X北辰北
  • 【ArcGIS JS API + eCharts系列】实现地图上二维图表的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制二维图表中的柱状图的实现步骤。

    X北辰北
  • ArcGis API JS 4.X本地化部署与地图的基础使用

    首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19。

    Kiba518
  • ArcGIS JS API 加载 TMS 地图瓦片

    TMS(Tile Map Service) 是 OSGeo (开源地理基金会) 提出的一种地图瓦片服务。额外补充一句,WMTS、WMS、WFS这些是 OGC(开...

    前端小tips
  • ArcGIS中导入2000系的OSGB数据后发布服务,并在前端调用

    本文在上一篇文章的基础之上,介绍下OSGB的倾斜摄影数据如何导入ArcGIS平台做数据处理、服务发布和前端ArcGIS JS API调用显示的一整套流程。

    X北辰北
  • 使用现代化的脚本进行 ArcGIS JS API 开发

    ArcGIS JS API 基于古老的 JavaScript 框架 Dojo 开发, dojo 虽然是曾经的王者, 但是2020年的前端开发, 早已是 Angu...

    beginor
  • ArcGIS JS API 4.14实现地图加载图片

    主要介绍如何用ArcGIS JS API 4.14实现在二维地图中添加图片的操作。

    X北辰北
  • 【番外】 Vue中使用ArcGIS JS API 4.14开发

    本文主要介绍如何在Vue项目中使用ArcGIS JS API进行开发,文中使用的JS API是目前最新版本的ArcGIS JS API 4.14,主要是在Vue...

    X北辰北
  • lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

    同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

    lzugis
  • 实例化二维地图

    主要介绍如何用ArcGIS JS API 4.14去实例化一张二维地图,并简单介绍了和3.X版本实现方式的异同。

    X北辰北
  • 关于FeatureLayer,WFSLayer,GraphicsLayer

    关于WebGIS JS API,只喜欢两种:上手容易,简单灵活的Leaflet,以及系统全面功能强大丰富的Arcgis JS API。

    MiaoGIS
  • Arcgis for Javascript之统计图的实现

    如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1、初始化状态;2、缩放后的状态;3、点击选中显示详情状态。第一种状态下,加载统计图,一般来说,...

    lzugis
  • Arcgis for Silverlight学习(一)

    1.地图的加载 arcgis server for silverlight 通过控件map实现地图的浏览功能。map控件的使用方法如下: <esri:Map x...

    水击三千
  • 高质量编码-conf.xml生成TileInfo

    使用Arcgis API时,如果我们要使用地图下载器下载的切片来作为图层服务,可以使用WMTSLayer。

    MiaoGIS
  • ArcGIS JS API 4.15实现地图加载图片(优化版)

    主要介绍如何用ArcGIS JS API 4.15实现在二维地图中添加图片的操作。上一篇文章已经介绍了如何添加图片的四种方法,但是添加到地图上的图片在拖动时有些...

    X北辰北

扫码关注腾讯云开发者

领取腾讯云代金券