zoukankan html css js c++ java

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>

查看全文

相关阅读:
echarts各个配置项详细说明总结
 享元模式
 观察者模式
 策略模式
 桥接模式
 适配器模式
 建造者模式
 原型模式
 单例模式
 Java8新特性——集合底层源码实现的改变

原文地址：https://www.cnblogs.com/tracine0513/p/9286644.html