Ⅰ. 在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. Javascript和jquery事件--事件对象event

    1.  事件对象event 对于event,js的解释是Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.而jq的解释是事件处理(事件对象.目标元素 ...

  2. express 的路由分离

    在做大型项目是一般不会把路由写入server.js里,所以就有了路由分离 1.在项目目录下创建router文件夹 user.js var express = require("express ...

  3. <meta name="viewport" content="width=device-width,initial-scale=1.0">

    meta name="viewport" content="width=device-width,initial-scale=1.0" 解释  <meta ...

  4. springboot整合freemarker(转)

    添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>sp ...

  5. 【Struts2三】拦截器

    拦截器:就是在訪问action之前.对其进行拦截!能够在拦截器中做一些逻辑的处理! 比方权限验证.没有权限就不给予訪问! 拦截器等效于servlet中的过滤器! 使用拦截器步骤: 1.定义自己的拦截器 ...

  6. 英特尔投资：7200万美元投资12家创新公司，包括3家中国公司（www.intelcapital.com）

    集微网消息,英特尔投资——英特尔公司全球投资机构,今天在英特尔投资全球峰会上宣布向12家科技创业公司投资超过7200万美元.加上今天宣布的新投资,英特尔投资在2018年投资总额已超过1.15亿美元. ...

  7. jquery-12 jquery的ajax如何使用

    jquery-12 jquery的ajax如何使用 一.总结 一句话总结:就是$.get()和$.post()方法的使用,看参考手册就好,与php的交互. 1.删除元素的时候如何设置删除特效? ani ...

  8. webuploader 小demo

    页面写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. [D3] Convert Input Data to Output Values with Linear Scales in D3

    Mapping abstract values to visual representations is what data visualization is all about, and that’ ...

  10. 远离“精神乞丐”（IBM的前CEO郭士纳把员工分为四种类型）

    语音丨吴伯凡 乞丐与其说是一种身份, 不如说是一种精神状态, 习惯性索取且心安理得, 习惯性寻求安慰,习惯性抱怨, 与之截然对立的, 是“操之在我”(Proactive)的精神, 乞丐型员工是公司内部 ...