Ⅰ. 在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>