这几个例子是第二章除了入门之外比较简单的几个，就做个合集，把最核心的代码（第二参数）和 引用放上来即可，不作多解释。

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（第二章完结）的更多相关文章

  1. ArcGIS API for JavaScript 4.2学习笔记[8] 2D与3D视图同步

    同一份数据不同视图查看可能用的比较少,因为3D视图放大很多后就和2D地图差不多了,畸变很小,用于超大范围的地图显示时有用,很多时候都是在平面地图上进行分析.查询.操作.教学需要可能会对这个有要求? 本 ...

  2. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

  3. ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图

    ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...

  4. ArcGIS API for JavaScript 4.2学习笔记[5] 官方API大章节概述与内容转译

    内容如上,截图自ESRI官网,连接:ArcGIS API for JavaScript 4.2 [Get Started] 类似于绪论一样的东西,抽取了最需要关注的几个例子.如:加载Map和View, ...

  5. ArcGIS API for JavaScript 4.2学习笔记[21] 对3D场景上的3D要素进行点击查询【Query类学习】

    有人问我怎么这个系列没有写自己做的东西呢? 大哥大姐,这是"学习笔记"啊!当然主要以解读和笔记为主咯. 也有人找我要实例代码(不是示例),我表示AJS尚未成熟,现在数据编辑功能才简 ...

  6. ArcGIS API for JavaScript 4.2学习笔记[12] View的弹窗（Popup）

    看本文前最好对第二章(Mapping and Views)中的Map和View类有理解. 视图类有一个属性是Popup类型的popup,查阅API知道这个就是视图的弹窗,每一个View的实例都有一个p ...

  7. ArcGIS API for JavaScript 4.2学习笔记[3] 官方第二章Mapping and Views概览与解释

    目录如下: 连接:第二章 Mapping and Views 根据本人体会, [这一章节主要是介绍地图(Map)和视图(View)的.] 其中,Get started with MapView(2D) ...

  8. ArcGIS API for JavaScript 4.2学习笔记[16] 弹窗自定义功能按钮及为要素自定义按钮（第五章完结）

    这节对Popups这一章的最后两个例子进行介绍和解析. 第一个[Popup Actions]介绍了弹窗中如何自定义工具按钮(名为actions),以PopupTemplate+FeatureLayer ...

  9. ArcGIS API for JavaScript 4.2学习笔记[7] 鹰眼（缩略图的实现及异步处理、Promise、回调函数、监听的笔记）

    文前说明:关于style就是页面的css暂时不做评论,因为官方给的例子的样式实在太简单了,照抄阅读即可. 这篇文章有着大量AJS 4.x版本添加的内容,如监听watch.Promise对象.回调函数. ...

随机推荐

  1. 《java.util.concurrent 包源码阅读》27 Phaser 第一部分

    Phaser是JDK7新添加的线程同步辅助类,作用同CyclicBarrier,CountDownLatch类似,但是使用起来更加灵活: 1. Parties是动态的. 2. Phaser支持树状结构 ...

  2. java虚拟机概述

    java 虚拟机是什么?       java虚拟机是一个将字节码指令映射为对应物理操作系统指令的程序.       java程序的运行需要事先安装 jdk,而在jdk内部的jre中其核心就是 jvm ...

  3. 关于springboot启动的问题.

    IDE使用的是IDEA: 遇到的问题:使用springboot自带main方法无法启动示例,解决方案: 如果大家使用Application中的main方法无法正常启动时,可以去修改Project St ...

  4. StringUtils工具类常用方法汇总2(截取、去除空白、包含、查询索引)

      在上一篇中总结了StringUtils工具类在判断字符串为空,大小写转换,移除字符或字符序列,替换,反转,切割合并等方面的方法,这次再汇总一下其它常用的方法. 一.截取   StringUtils ...

  5. Numpy数组的基本运算操作

    一.算术运算符 In [3]: a = np.arange(0,5) Out[3]array([0, 1, 2, 3, 4]) In [4]: a+4 Out[4]: array([4, 5, 6, ...

  6. zzuli 1812: sort 排序

    1812: sort Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 352  Solved: 216 SubmitStatusWeb Board De ...

  7. ElasticSearch 学习记录之ES几种常见的聚合操作

    ES几种常见的聚合操作 普通聚合 POST /product/_search { "size": 0, "aggs": { "agg_city&quo ...

  8. 用nodejs把目录下所有用px做单位的css文件转化为用rem做单位的css文件

    20171105 1211/星期日 公司为了更好适配手机端,以前用px做单位的css文件,全部需要转化为用rem做单位,目前是1rem=37.5px;开发新项目时,还是用习惯的px写样式代码,完成UI ...

  9. 基于Java使用Snmp4j进行监控与采集(snmptrap、snmpwalk、snmpget)

    之前有在弄监控服务器这块的工作,今天来整体总结下.因为有些服务器(路由器.交换机等都是基于snmp协议的)必须使用snmp协议去监控采集和接收信息,所以必须去了解snmp相关内容,以及如何在基于jav ...

  10. 机房收费系统——转换list泛型时，字段名称不正确应出现故障

    因为之前对泛型研究了一番,所以就開始尝试着在机房收费系统重构中增加了泛型的使用. 可是到了做学生查看剩余金额这个功能的时候,还是依照之前的方法做的,可是在载入数据的时候班级这个框就没有显示出来--然后 ...