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