ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding（第二章完结）
这几个例子是第二章除了入门之外比较简单的几个，就做个合集，把最核心的代码（第二参数）和 引用放上来即可，不作多解释。
2D地图添加指北针widget
2D地图一般修正方向为正北方就需要这个widget。
引用：
[
"esri/Map",
"esri/views/MapView",
"esri/widgets/Compass",
"dojo/domReady!"
]
在function(Map,MapView,Compass)实例化Map和MapView后，添加这两行代码：
var compassWidget = new Compass({view: view});
view.ui.add(compassWidget, "top-left");
即可。有关Compass这个widget的构造函数，可以查阅API了解更多，我感觉不会那么少吧...还有这个ui.add()方法，感觉日后添加widget布局的时候可以仔细学学。
ps：Compass在SceneView中是默认显示的。
视图padding改变
这个几乎没有难度。
给个图预览吧：
本来小岛这种东西就应该在地图的最中央位置，但是由于右边多了一块DIV（宽度320px），所以地图为了避开DIV而对齐就必须把视图的padding值改为320（和DIV一样）。在百度地图旧版本中，就喜欢搞一个面板，用于提供搜索信息的输入框和结果框、筛选按钮等。
直接给出源代码：
require(
[ "esri/Map", "esri/views/MapView", "dojo/domReady!" ],
function(Map,MapView) {
var map = new Map({
basemap: "topo"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-74.045459, 40.690083],
zoom: 16,
padding: {
right: 320
}
});
});
仅仅是在view的实例化中把padding的right改为320，在html中：
<body>
<div id="viewDiv">
<div id="sidebar">
<div id="text">
内容云云，此处省略
</div>
</div>
</div>
</body>
在style标签中，把sidebar这个div的width设置成了同样的320px。
视图保存
这个就比较有趣了。首先要提供一个输入title的地方，还要有一个保存image的地方。
这个例子，使用了SceneView，SceneView的map属性使用了服务器上的WebScene（专题三维地图）。由于这个比较容易，就忽略了。
<body>
<div id="viewDiv"></div>
<div id="createSlideDiv">
New slide: <input type="text" id="createSlideTitleInput" size="10" />
<button
id="createSlideButton">Create</button>
</div>
<div id="slidesDiv"></div>
</body>
从html代码可以看出，提供了一个createSlideDiv，内含input和一个button以供输入。
还有一个slidesDiv以供保存img列表。
见下图：
第一步，把这几个div加入到view对象的ui中去。
view.ui.add(["createSlideDiv", "slidesDiv"], "top-right");
第二步，在view创建好后，执行以下代码。关于then()，请查看鹰眼一文的末尾。
view.then(function() {
dom.byId("slidesDiv").style.visibility = "visible";
var slides = scene.presentation.slides;
slides.forEach(createSlideUI);
on(dom.byId("createSlideButton"), "click", function() {
Slide.createFrom(view).then(function(slide) {
slide.title.text = dom.byId("createSlideTitleInput")
.value;
scene.presentation.slides.add(slide);
createSlideUI(slide, "first");
});
});
});
首先，将slidesDiv置为可视。
第二，若WebScene存在slide，那么就全部装到列表中去。
然后var一个slides变量，获取WebScene实例scene的当前所有的slides。
然后遍历每一个slides成员，对其进行createSlideUI操作（见下，即创建DIV列表里的UI对象）。
第三，调用dojo的on(DOM元素，事件类型，事件方法体)，为新增slide的那个按钮添加click事件。
注意Slide.createFrom()方法，它将从view中创建slide。
在这个方法的回调函数中，设置输入框的文本slide的标题。
然后把slide添加到scene这个WebScene中去。
最后调用createSlideUI创建div即可。
function createSlideUI(slide, placement) {
var slideElement = domConstruct.create("div", {
id: slide.id,
className: "slide"
});
var position = placement ? placement : "last";
domConstruct.place(slideElement, "slidesDiv", position);
domConstruct.create("div", {
textContent: slide.title.text,
className: "title"
}, slideElement);
domConstruct.create("img", {
src: slide.thumbnail.url,
title: slide.title.text
}, slideElement);
on(slideElement, "click", function() {
query(".slide").removeClass("active");
domClass.add(slideElement, "active");
slide.applyTo(view);
});
}
createSlideUI()方法就是创建DIV了，首先用domConstruct.create()方法创建一个divDOM元素，然后确定位置position，
紧接着在这个div里添加标题div、图片div，最后为这个div添加click事件。
虽然最后一个例子看起来比较长，但是逻辑都很清晰，代码也没什么碎片化，完全可以直接照抄两个代码段。
至此，第二章的学习就差不多了，关于WebScene、WebMap这两个从Map类中派生出来的子类（和Basemap同级），我觉得查阅API更有效果，而且可能是得配合ArcServer才能弄懂的东西，就先不学了。
要说数据准备这块这一章还真没写，所以极有可能在Layers那章才会学到了吧，再不济，百度啊谷歌啊干什么用的？
所以，整理一下所学，开始准备学习Popups（弹出框）、Searching（空间查询）和Analysis（空间分析）吧~
Layers和Widgets两章留给三月份研读。
ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding（第二章完结）的更多相关文章
- ArcGIS API for JavaScript 4.2学习笔记[8] 2D与3D视图同步
同一份数据不同视图查看可能用的比较少,因为3D视图放大很多后就和2D地图差不多了,畸变很小,用于超大范围的地图显示时有用,很多时候都是在平面地图上进行分析.查询.操作.教学需要可能会对这个有要求? 本 ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译
内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...
- ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】
有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...
- ArcGIS API for JavaScript 4.2学习笔记[12] View的弹窗（Popup）
看本文前最好对第二章(Mapping and Views)中的Map和View类有理解. 视图类有一个属性是Popup类型的popup,查阅API知道这个就是视图的弹窗,每一个View的实例都有一个p ...
- ArcGIS API for JavaScript 4.2学习笔记[3] 官方第二章Mapping and Views概览与解释
目录如下: 连接:第二章 Mapping and Views 根据本人体会, [这一章节主要是介绍地图(Map)和视图(View)的.] 其中,Get started with MapView(2D) ...
- ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）
这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...
- ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼（缩略图的实现及异步处理、Promise、回调函数、监听的笔记）
文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数. ...
随机推荐
- c语言捕捉异常
闲暇之日阅读lua源码,发现原来C语言除goto之外的另一个处理异常的方法.既为setjump longjump两个函数,setjump相当于try,longjump相当于catch.与goto不同的 ...
- Python之三目运算符
Python语言不像Java.JavaScript等这些语言有类似: 判段的条件?条件为真时的结果:条件为假时的结果 这样的三目运算,但是Python也有自己的三目运算符: 条件为真时的结果 if 判 ...
- Serverless无服务应用架构纵横谈
Serverless无服务应用架构纵横谈 一.Serverless是啥 自从互联网兴起以来,Server就成了网络的核心部件.所以围绕Server的生意圈,也发展得如火如荼. 从最早的电信托管,到虚拟 ...
- 文件夹的创建（cmd利用）
在windows本地上创建文件夹是无法用..结束的,我们要创建的话,需要在cmd里面进行创建输入 mkdir abc..\ 那么我们从本地看出abc..文件夹建成了怎么删除呢? 需要手动在里面建个文件 ...
- hibernate log4j
log4j.rootLogger=warn, stdout log4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender. ...
- 局域网下的html注入及DNS劫持
之前研究Dsploit的部分功能实现原理,现在了解的差不多了,简要记录下Dsploit的断网攻击,html注入,图片替换,cookie劫持的原理.本篇blog需要有一定的网络知识基础在看. 假设现有三 ...
- 好好写代码吧，没事别瞎B去创业！
知乎上看到这个问题 正好最近想写篇关于此的文章,于是就回答了一波. 也贴到这里来,回答如下 : 本问题简直为我量身定制,做为一个正在创业中的苦逼少年,说说我是如何从鼓吹怂恿身边人创业转换成反对创业的. ...
- ArrayList与数组间的转换
关键句:String[] array = (String[])list.toArray(new String[size]); public class Test { public static voi ...
- 利用linux shell自己主动顶贴
在论坛上面发帖问个什么东西的话,一旦不顶.帖子就秒沉了,可是又实在不想每时每刻都去顶,怎么办?以下展示了怎样利用shell 的crontab实现自己主动顶贴. 闲话不多说了,以豆瓣为例-– 1: 用c ...
- css中设置div水平居中，margin:0px auto无用的情况
在CSS中加了margin:0px auto;却没有效果,不能实现居中的问题!margin:0px auto;意思就是:上下边界为0.左右依据宽度自适应!就是水平居中的意思.无效的原因是,当你没有设置 ...