Arcgis api for javascript学习笔记-控制地图缩放比例尺范围(3.2X版本与4.6版本)
2024-10-01 23:36:04
Ⅰ. 在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>
最新文章
- C#检测网卡和网络统计信息
- JS_ECMA基本语法中的几种封装的小函数
- 记录毕业论文 LanguageTool 二次开发时用到的网站
- DataSet key points
- ThinkPHP连接sql server数据库
- PHP做好防盗链的基本思想 防盗链的设置方法
- BufferedInputStream详解
- 解决onethink导出word后出现名字乱码的情况
- Div布局案例
- RAS、AES、DES加密
- python_原始_web框架
- 用户态Linux内核
- Perl基础速成
- HDU 1079 Calendar Game (博弈)
- oracle 12514文件解决
- luoguP1281 书的复制 DP,贪心
- Android开发学习笔记(二)——编译和运行原理(1)
- Flutter踩坑日记:解除依赖
- pthon自动化之路-编写登录接口
- Mogodb 学习一
热门文章
- C#基础数据类型与字节数组(内存中的数据格式)相互转换(BitConverter 类)
- JS中的发布订阅模式
- [D3] Better Code Organization with selection.call() with D3 v4
- Android Studio插件推荐-GsonFormat,ButterKnifeZelezny
- spark源码解析之基本概念
- Oracle以系统管理员的方式登录失败
- [array] leetCode-11. Container With Most Water-Medium
- 11、V4L2摄像头获取单幅图片测试程序
- JAVA后端实现统一扫码支付:微信篇
- Android使用BitmapFactory.Options解决加载大图片内存溢出问题