Ⅰ. 在3.X版本中，设置Map对象的 "maxScale" 和 "minScale" 属性
1<!DOCTYPE html> 2<html> 3<head> 4 <style type="text/css"> 5 html, body { margin: 0; padding: 0; height: 100%; width: 100%; } 6 #viewDiv{ width:100%;height:100%; } 7 </style> 8 <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css"> 9 <script src="https://js.arcgis.com/3.20/"></script> 10</head> 11<body> 12 <div id="viewDiv"></div> 13 <script type="text/javascript"> 14 var SCALE_MIN = 500000; 15 var SCALE_MAX = 6000000; 16 var SCALE_DEFAULT = 3000000; 17 require(["esri/map", "dojo/domReady!"], function(Map) { 18 var map = new Map("viewDiv", { 19 "scale": SCALE_DEFAULT, 20 "maxScale": SCALE_MIN, 21 "minScale": SCALE_MAX, 22 "basemap": "topo" 23 }); 24 }); 25 </script> 26</body> 27</html>
Ⅱ. 在4.X版本中，"mouse-wheel" 事件结合 evt.stopPropagation() 函数来实现
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <style> 7 html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } 8 </style> 9</head> 10<body> 11 <div id="viewDiv"></div> 12 <link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css"> 13 <script type="text/javascript" src="https://js.arcgis.com/4.5/"></script> 14 <script type="text/javascript"> 15 var SCALE_MIN = 500000; 16 var SCALE_MAX = 6000000; 17 var SCALE_DEFAULT = 3000000; 18 require(["esri/Map", "esri/views/SceneView", "dojo/domReady!"], function (Map, SceneView) { 19 var map = new Map({ 20 "basemap": "satellite", 21 "ground": "world-elevation" 22 }); 23 var view = new SceneView({ 24 "map": map, 25 "scale": SCALE_DEFAULT, 26 "container": "viewDiv", 27 "center": [103.8000, 34.8000], 28 }); 29 view.then(function(){ 30 view.on("double-click",function(evt){ 31 evt.stopPropagation(); 32 }); 33 34 view.on("mouse-wheel",function(evt){ 35 //evt.stopPropagation(); 36 //鼠标滚轮缩小 37 if(evt.deltaY > 0 && view.scale > SCALE_MAX){ 38 evt.stopPropagation(); 39 return false; 40 } 41 //鼠标滚轮放大 42 else if(evt.deltaY < 0 && view.scale < SCALE_MIN){ 43 evt.stopPropagation(); 44 return false; 45 } 46 if((evt.deltaY > 0 && view.scale > SCALE_MAX) || (evt.deltaY < 0 && view.scale < SCALE_MIN)){ 47 console.info(view.scale); 48 console.info(evt); 49 } 50 }); 51 }); 52 }); 53 </script> 54</body> 55</html>