Ⅰ. 在3.X版本中，设置Map对象的 "maxScale" 和 "minScale" 属性

<!DOCTYPE html>

<html>

<head>

    <style type="text/css">

        html, body { margin: 0; padding: 0; height: 100%; width: 100%; }

        #viewDiv{ width:100%;height:100%; }

    </style>

    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">

    <script src="https://js.arcgis.com/3.20/"></script>

</head>

<body>

    <div id="viewDiv"></div>

    <script type="text/javascript">

        var SCALE_MIN = 500000;

        var SCALE_MAX = 6000000;

        var SCALE_DEFAULT = 3000000;

        require(["esri/map", "dojo/domReady!"], function(Map) {

            var map = new Map("viewDiv", {

                "scale": SCALE_DEFAULT,

                "maxScale": SCALE_MIN,

                "minScale": SCALE_MAX,

                "basemap": "topo"

            });

        });

    </script>

</body>

</html>

Ⅱ. 在4.X版本中，"mouse-wheel" 事件结合 evt.stopPropagation() 函数来实现

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">

    <style>

        html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; }

    </style>

</head>

<body>

    <div id="viewDiv"></div>

    <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">

    <script type="text/javascript" src="https://js.arcgis.com/4.5/"></script>

    <script type="text/javascript">

        var SCALE_MIN = 500000;

        var SCALE_MAX = 6000000;

        var SCALE_DEFAULT = 3000000;

        require(["esri/Map", "esri/views/SceneView", "dojo/domReady!"], function (Map, SceneView) {

            var map = new Map({

                "basemap": "satellite",

                "ground": "world-elevation"

            });

            var view = new SceneView({

                "map": map,

                "scale": SCALE_DEFAULT,

                "container": "viewDiv",

                "center": [103.8000, 34.8000],

            });

            view.then(function(){

                view.on("double-click",function(evt){

                    evt.stopPropagation();

                });

                view.on("mouse-wheel",function(evt){

                    //evt.stopPropagation();

                    //鼠标滚轮缩小

                    if(evt.deltaY > 0 && view.scale > SCALE_MAX){

                        evt.stopPropagation();

                        return false;

                    }

                    //鼠标滚轮放大

                    else if(evt.deltaY < 0 && view.scale < SCALE_MIN){

                        evt.stopPropagation();

                        return false;

                    }

                    if((evt.deltaY > 0 && view.scale > SCALE_MAX) || (evt.deltaY < 0 && view.scale < SCALE_MIN)){

                        console.info(view.scale);

                        console.info(evt);

                    }

                });

            });

        });

    </script>

</body>

</html>

Arcgis api for javascript学习笔记-控制地图缩放比例尺范围(3.2X版本与4.6版本)的更多相关文章

  1. ArcGis API for JavaScript学习——加载地图

    ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...

  2. Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合

    在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...

  3. Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置

    在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...

  4. Arcgis api for javascript学习笔记(3.2X版本)-初步尝试

    Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...

  5. Arcgis api for javascript学习笔记 - 不改变默认端口(6080)情况下，外网访问Arcgis Server 发布的接口

    Arcgis Server发布的地图服务地址默认端口号是6080,假设本机上只对80端口做了外网映射,在IIS中部署了一个网站绑定了80端口,那么网站中某个页面通过arcgis api for js ...

  6. Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注

    1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...

  7. Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能

    1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...

  8. Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果

    其实就只是用到了 view.goTo()  函数,再利用 window.setInterval()  函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...

  9. Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注

    4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...

随机推荐

  1. linux中软件安装方式

    通常Linux应用软件的安装包有三种: tar包,如software-1.2.3-1.tar.gz.它是使用UNIX系统的打包工具tar打包的. rpm包,如software-1.2.3-1.i386 ...

  2. ntp 服务器

    ntp.sjtu.edu.cn 202.120.2.101 (上海交通大学网络中心NTP服务器地址)s1a.time.edu.cn 北京邮电大学s1b.time.edu.cn 清华大学s1c.time ...

  3. （素材源代码） 猫猫学IOS（五）UI之360等下载管理器九宫格UI

    猫猫分享,必须精品 先看效果 代码学习地址: 猫猫学IOS(五)UI之360等下载管理器九宫格UI 猫猫学IOS(五)UI之360等下载管理器九宫格UI http://blog.csdn.net/u0 ...

  4. js进阶 12-18 jquery如何实现自定义右键菜单（把问题分细）

    js进阶 12-18  jquery如何实现自定义右键菜单(把问题分细) 一.总结 一句话总结:用鼠标右键事件contextmenu,阻止系统默认事件,让做好的右键菜单显示出来,并且显示在我们出现的位 ...

  5. Redis学习笔记--Hash（五）

    Redis的数据是通过key-value的方式存储的,对于value的数据类型有字符串.Hash.list.set.sortedSet在redis命令语句中,语句是忽略大小写的,但是key是不可以忽略 ...

  6. Intel X86 CPU 系列的寻址方式

    Intel X86 CPU 系列的寻址方式 数据总线和地址总线要尽量相同,这个是一个地址就是一个指针.

  7. UVA 10340 - All in All 水~

    看题传送门 Problem E All in All Input: standard input Output: standard output Time Limit: 2 seconds Memor ...

  8. 【BZOJ 1597】 [Usaco2008 Mar]土地购买

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 把这n个土地按照x为第一关键字.y为第二关键字.都升序排. 然后考虑一个土地xi,yi 若有一个土地的x<=xi且y<= ...

  9. Eclipse 使用技巧之 ---- 查看本类调用和被调用列表

    当工程复杂的情况下,用眼睛去人工查看调用情况是很费力也没必要的.我们需要用 Eclipse 来做这点. (1)    我们查看本类调用他类情况可以直接看 import . (2)    如果要查看本类 ...

  10. （三）RabbitMQ消息队列-Centos7下安装RabbitMQ3.6.1

    原文:(三)RabbitMQ消息队列-Centos7下安装RabbitMQ3.6.1 如果你看过前两章对RabbitMQ已经有了一定了解,现在已经摩拳擦掌,来吧动手吧! 用什么系统 本文使用的是Cen ...