Arcgis api for javascript學習筆記-控制地圖縮放比例尺範圍(3.2X版本與4.6版本)

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