Ⅰ. 在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. python课程：python3的数字与字符串

    一下是基于python2的教程的 python中有 多个数据类型,和,两种字符串类型 他们都是不可变的.

  2. CSS笔记 - fgm练习 - 鼠标移入移出div显示隐藏 CSS样式部分

    问题总结: 1. checkbox和下面隐藏的div对齐,是在清除了默认样式的前提下,而不需要额外设置float: left; 2. 隐藏的div这里不需要专门设置宽高.居中,是靠内容和padding ...

  3. AMBA标准

    AMBA标准定义了三种不同的总线 高级高性能总线(AHB): 高级系统总线(ASB):-----用的比较少 高级外设总线(APB). 基于AMBA的典型微控制器: 典型的AMBA AHB系统设计包含以 ...

  4. [NodeJS] Use Secrets When Deploying Applications with Now

    Applications require a lot of sensitive information. Database passwords, API keys and secrets used f ...

  5. 被误解的MVC和被神化的MVVM

    MVC 的历史 MVC,全称是 Model View Controller,是模型 (model)-视图 (view)-控制器 (controller) 的缩写.它表示的是一种常见的客户端软件开发框架 ...

  6. 【z02】选择客栈

    (hotel.cpp/c/pas) [问题描述] 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照 某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示) ...

  7. anaconda中实现双spyder版本

    1)先在conda中创建一个名为python2的环境,并下载对应版本python2.7 conda create --name python27 python=2.7 2)激活python2环境 ac ...

  8. HDU 1248 寒冰王座 完全背包

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=1248 中文题,大意就不说了. 第一道完全背包题,跟着背包九讲做的. 和0-1背包的区别在于所不同的是每种 ...

  9. AForge，Emgu.CV抓拍图像大小

    原文:AForge,Emgu.CV抓拍图像大小 2017年,忙忙碌碌地过去了,象往年一样,依然没有时间上CSDN,博客园. 这一年是打工以来最辛苦的一年. 这一年用了不少自己没有接触过的东西.如人脸识 ...

  10. freemarker 模板中定义变量

    在模板中能够定义三种类型的变量: 简单变量:它能从模板中的不论什么位置来訪问,或者从使用 include 指令引入的模板訪问. 能够使用 assign 或 macro 指令来创建或替换这些变量. 局部 ...