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>

Ⅲ. 4.X版本的api非常恶心，喜欢把简单的问题复杂化。

Arcgis api for javascript学习笔记-控制地图缩放比例尺范围(3.2X版本与4.6版本)

猜你喜欢