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>
Arcgis api for javascript学习笔记-控制地图缩放比例尺范围(3.2X版本与4.6版本)的更多相关文章
- ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
- Arcgis api for javascript学习笔记(4.5版本) - 获取FeatureLayer中的graphics集合
在Arcgis api for javascript 3.x 版本中,我们可以直接通过某个FeatureLayer对象中的graphics属性获取要素集合. graphics属性 但是在4.x版本中, ...
- Arcgis api for javascript学习笔记(4.5版本) - 本地部署及代理配置
在开发过程中,由于api的文件比较多,没必要每个项目都将api加入到解决方案中.况且在VS中如果将api加入解决方案,在编写css或js代码时,由于智能提示需要扫描脚本等文件,会导致VS很卡.所以个人 ...
- Arcgis api for javascript学习笔记(3.2X版本)-初步尝试
Arcgis api for javascript(3.22版本)官方地址 :https://developers.arcgis.com/javascript/3/ 1. 根据官方示例实现一个简单地图 ...
- Arcgis api for javascript学习笔记 - 不改变默认端口(6080)情况下，外网访问Arcgis Server 发布的接口
Arcgis Server发布的地图服务地址默认端口号是6080,假设本机上只对80端口做了外网映射,在IIS中部署了一个网站绑定了80端口,那么网站中某个页面通过arcgis api for js ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图并叠加天地图标注
1.三维地图实现 在官网的demo中就有三维地图的实现,如下图所示 <!DOCTYPE html> <html> <head> <meta charset=& ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图实现弹窗功能
1. 对于Graphic对象,在初始化Graphic对象时设置popupTemplate属性,即可实现点击Graphic时显示弹窗. <!DOCTYPE html> <html> ...
- Arcgis api for javascript学习笔记(4.5版本)-三维地图的飞行效果
其实就只是用到了 view.goTo() 函数,再利用 window.setInterval() 函数(定时器)定时执行goTo().代码如下: <!DOCTYPE html> < ...
- Arcgis api for javascript学习笔记(4.6版本) - 二维MapView中的FeatureLayer显示标注
4.6版本api的FeatureLayer中有提供 labelsVisible 和 labelingInfo 两个属性,设置这两个属性可以实现显示将属性中某个字段作为标注.但是这两个属性只针对三维Sc ...
随机推荐
- django-rest-framework框架 第三篇 之CRUD视图扩展类(增删改查的优化)
CRUD视图扩展类 1 CreateModelMixin 2 RetrieveModelMixin 3 UpdateModelMixin 4 DestroyModelMixin <1> 创 ...
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
Using a react-intl FormattedNumber component, we'll pass a Number and a few additional props in orde ...
- poj 2240 floyd算法
Arbitrage Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 17349 Accepted: 7304 Descri ...
- smack capable(CAP_MAC_OVERRIDE)
https://blog.csdn.net/ning_wei/article/details/9670947 LINUX中的capable int smk_curacc(char *obj_label ...
- mina架构分析
使用的版本号是2.0.9 IoService分析 AbstractIoAcceptor定义了全部的public接口,并定义了子类须要实现的bindInternal函数,AbstractPollingI ...
- 目前以lib后缀的库有两种，一种为静态链接库(Static Libary，以下简称“静态库”)，另一种为动态连接库(DLL，以下简称“动态库”)的导入库(Import Libary，以下简称“导入库”）。静态库是一个或者多个obj文件的打包
前以lib后缀的库有两种,一种为静态链接库(Static Libary,以下简称“静态库”),另一种为动态连接库(DLL,以下简称“动态库”)的导入库(Import Libary,以下简称“导入库”) ...
- ios开发ios9新特性关键字学习：泛型，逆变，协变，__kindof
一:如何去学习?都去学习什么? 1:学习优秀项目的设计思想,多问几个为什么,为什么要这么设计,这么设计的好处是什么,还能不能在优化 ,如何应用到自己的项目中 2:学习优秀项目的代码风格,代码的封装设计 ...
- ios开发清除SDWebImage图片缓存
一:一般在实际的项目应用中都会用到第三方框架SDWebImage去下载缓存图片,但在ios开发应用中,常常涉及对SDWebImage缓存图片的清除.本文所列出代码即是对SDWebImage缓存图片的清 ...
- python 标准库 —— io（StringIO）
0. io流(io stream) 流是一种抽象概念,它代表了数据的无结构化传递.按照流的方式进行输入输出,数据被当成无结构的字节序或字符序列.从流中取得数据的操作称为提取操作,而向流中添加数据的操作 ...
- [转载]Ocelot简易教程（二）之快速开始2
为什么这篇的标题叫“Ocelot简易教程(二)之快速开始2”呢,因为很多朋友跟我说上一篇“ Ocelot简易教程(二)之快速开始1”内容太少了,只是简单介绍Ocelot的一些简单配置,让Ocelot能 ...