本例子核心：对MapView对象的map属性值进行替换即可达到更改地图数据的效果。

这个例子用的不是Map对象了，而是用的发布在服务器上的专题地图（WebMap）来加载到MapView上进行显示。

在html标签中，使用了section标签，不过没什么稀奇的，就把仨按钮放一块而已。

先给出预览图

三张专题地图：失踪人口密度分布、难民迁徙路线、2015年欧洲来港者。

这个东西很有用，尤其是在展示同一地区的专题地图的时候，这里也展示了什么叫View，什么叫Map。

因为中心点、比例尺是由View对象管控的，所以改变WebMap这个数据的时候，并不会改变位置和比例尺。

我们来看代码：

给出引用

[

      "esri/views/MapView",

      "esri/WebMap",

      "dojo/on",

      "dojo/domReady!"

]

很清爽。

既然要用到3个专题地图，那么就创建3个WebMap对象：

function(MapView, WebMap, on) {

      var webmapids = [

        "ad5759bf407c4554b748356ebe1886e5",

        "71ba2a96c368452bb73d54eadbd59faa",

        "45ded9b3e0e145139cc433b503a8f5ab"

      ];
      // 匿名函数返回一个WebMap实例

      var webmaps = webmapids.map(function(webmapid) {

        return new WebMap({

          portalItem: {

            id: webmapid

          }

        });

      });

      var view = new MapView({

        map: webmaps[0],

        container: "viewDiv"

      });

}

也是很简单。

给定一个webmap的ID字符串数组，每个ID是WebMap的唯一标识符。

然后用Collection对象的map()方法进行遍历操作，对传入的每一个ID，匿名函数返回一个WebMap实例。

如何实例化WebMap，请参考API中WebMap的构造函数。

然后，实例化一个MapView，map属性给定webmaps数组的第一个元素，即第一个WebMap——失踪人口图。

在实例化MapView后，就是给顶头的3个按钮添加事件了。

dojo给DOM元素添加事件还记得吗？就是goTo()动画那篇文章。

基本语法：

on(DOM元素,事件类型,事件方法体);

见下：

      on(document.querySelector(".btns"),

           ".btn-switch:click",

           function(event) {

               var id = event.target.getAttribute("data-id");

               if (id) {

                  var webmap = webmaps[id];

                  view.map = webmap;

                  var nodes = document.querySelectorAll(".btn-switch");

                  for (var idx = 0; idx < nodes.length; idx++) {

                       var node = nodes[idx];

                       var mapIndex = node.getAttribute("data-id");

                       if (mapIndex === id) {

                            node.classList.add("active-map");

                       }

                       else {

                           node.classList.remove("active-map");

                       }

                 }

            }

      });

使用css选择器点选，即对类进行选择。btns被选中。

在方法体内，先获取data-id这个自定义属性，进入if判断。

先按data-id选择到序号一致的WebMap，假如data-id=“2”，则选中第三张WebMap。

然后更改view.map属性为选择到的WebMap。

这里，数据就替换完成了。

从var nodes...到for循环体结束，讲的是：

获取全部class为btn-switch的DOM元素。

对这个数组进行遍历操作，若当前点击的div的data-id和遍历到的data-id三等号相同，那么就往这个DOM元素的classList添加active-map。

若不，则移除active-map。

意思就是说，如果点击的div就是当前地图，那么就标记为当前活动的WebMap，否则就不是活动的WebMap。

————————

整个程序就是这么简单，替换MapView对象的map属性值，修改DOM元素的classList和操作DOM元素而已。

给出官方源代码：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">

  <title>Load a basic WebMap and swap with another on the same View - 4.2</title>

  <style>

    html,

    body {

      font-family: sans-serif;

      padding: 0;

      margin: 0;

      height: 100%;

      width: 100%;

      overflow: hidden;

    }

    #viewDiv {

      position: absolute;

      right: 0;

      left: 0;

      top: 60px;

      bottom: 0;

    }

    .header {

      position: absolute;

      top: 0;

      width: 100%;

      height: 10%;

    }

    .btns {

      margin: 0 auto;

      display: flex;

      flex-direction: row;

      justify-content: center;

      align-items: center;

      overflow: auto;

    }

    .btn-switch {

      flex-grow: 4;

      background-color: rgba(34, 111, 14, 0.5);

      color: #FFF;

      margin: 1px;

      width: 50%;

      padding: 20px;

      overflow: auto;

      text-align: center;

      cursor: pointer;

      font-size: 0.7em;

    }

    .active-map {

      color: #fff;

      background-color: rgba(34, 111, 14, 1);

    }

  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.2/esri/css/main.css">

  <script src="https://js.arcgis.com/4.2/"></script>

  <script>

    require([

      "esri/views/MapView",

      "esri/WebMap",

      "dojo/on",

      "dojo/domReady!"

    ], function(

      MapView, WebMap,

      on

    ) {

      var webmapids = [

        "ad5759bf407c4554b748356ebe1886e5",

        "71ba2a96c368452bb73d54eadbd59faa",

        "45ded9b3e0e145139cc433b503a8f5ab"

      ];

      /************************************************************

       * Create multiple WebMap instances

       ************************************************************/

      var webmaps = webmapids.map(function(webmapid) {

        return new WebMap({

          portalItem: {

            id: webmapid

          }

        });

      });

      /************************************************************

       * Initialize the View with the first WebMap

       ************************************************************/

      var view = new MapView({

        map: webmaps[0],

        container: "viewDiv"

      });

      on(document.querySelector(".btns"), ".btn-switch:click", function(

        event) {

        /************************************************************

         * On a button click, change the map of the View

         ************************************************************/

        var id = event.target.getAttribute("data-id");

        if (id) {

          var webmap = webmaps[id];

          view.map = webmap;

          var nodes = document.querySelectorAll(".btn-switch");

          for (var idx = 0; idx < nodes.length; idx++) {

            var node = nodes[idx];

            var mapIndex = node.getAttribute("data-id");

            if (mapIndex === id) {

              node.classList.add("active-map");

            } else {

              node.classList.remove("active-map");

            }

          }

        }

      });

    });

  </script>

</head>

<body>

  <section class="header">

    <div class="btns">

      <div class="btn-switch active-map" data-id="0">Missing Migrants</div>

      <div class="btn-switch" data-id="1">Refugee Routes</div>

      <div class="btn-switch" data-id="2">2015 European Sea Arrivals</div>

    </div>

  </section>

  <div id="viewDiv"></div>

</body>

</html>

源代码

ArcGIS API for JavaScript 4.2学习笔记[9] 同一种视图不同数据（Map）同步的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

  7. ArcGIS API for JavaScript 4.2学习笔记[19] 搜索小部件——使用更多数据源

    上一篇中提到,空间搜索小部件是Search这个类的实例化,作为视图的ui属性添加进去后,视图就会出现搜索框了. 这节的主体代码和上篇几乎一致,区别就在上篇提及的sources属性. 先看看结果: 由于 ...

  8. ArcGIS API for JavaScript 4.2学习笔记[31] (补充学习)Task类

    Task这个东西很有用,是AJS中用于解决各种乱七八糟任务的一个类.它有很多子类,有用于空间分析的,有用于空间查询的,等等. 这篇作为补充学习的第一篇,也是进阶学习的第一篇,我就改个写法. 我将使用思 ...

  9. ArcGIS API for JavaScript 4.2学习笔记[30] 点和线高程查询（第八章完结）

    终于到最后一篇了,可喜可贺. 本例先说明了如何进行单点的高程差分析,然后说明了道路的起伏分析.前者很直观地比较了两个年份的高程数据之间的差值,体现山区的高程变化(有啥用啊?)后者,一条路上的起点终点起 ...

随机推荐

  1. tcp并发服务器(c20w)

    ** 原创文章,请勿转载 ** 并发服务器是一个老生常谈的话题,今天这里也写一个. 1. 目标: 同时在线连接20万(c20w). 开发语言:重要的事情说三遍,GOLANG, GOLANG, GOLA ...

  2. AndroidStudio中各种常见快捷键记录

    AndroidStudio中各种常用操作快捷键记录 简单方法 直接设置AS的快捷键与eclipse相同,方便直接从eclipse切到AS的人. 常用的AS的默认快捷键 ctrl + N 根据类名查找J ...

  3. 12. ZooKeeper配额和认证

    ZooKeeper具有与其数据模型相关的可配置配额(quota). 可以设置znode上的配额限制和存储的数据量.如果ZooKeeper命名空间中的一个子树超出与其关联的配额,ZooKeeper会在日 ...

  4. robotframework文本类型的下拉框

    对于下拉框定位和输入,这里主要遇到有两种类型的下拉选择. 其中一个类型是select-options格式,如图 这种方式的定位可以使用select from list by value或select ...

  5. （12.05）Java小知识！

     今天与大家分享关于抽象类的知识点. 抽象类: 抽象类应用场景:在某种情况下,某个父类只是知道子类应该包含怎样的方法,但无法准确的知道这些子类如何实现这些方法. 从多一个具有相同特征的类中抽象出一个抽 ...

  6. SSM Spring+SpringMVC+mybatis+maven+mysql环境搭建

    SSM Spring+SpringMVC+mybatis+maven环境搭建 1.首先右键点击项目区空白处,选择new->other..在弹出框中输入maven,选择Maven Project. ...

  7. java+jsp+sql server实现网页版四则运算.

    设计思路: 1需要的工具以及实现这个算法和代码的事先条件. (1)sql server里面建议一个叫t_result的表)(当然你起什么名字都可以),里面输入所需要的列名.id,firstnumber ...

  8. angular中复制文字到剪切板

    function copyToClipboard(oElement, value) { var aux = document.createElement("input"); if ...

  9. 初窥c++11：lambda函数及其用法

    转载于:点击打开链接 为什么需要lambda函数 匿名函数是许多编程语言都支持的概念,有函数体,没有函数名.1958年,lisp首先采用匿名函数,匿名函数最常用的是作为回调函数的值.正因为有这样的需求 ...

  10. Aurora 论坛图片下载

    Aurora 论坛图片下载是一款快速下载指定网页图片的利器,还可以下载高清原图呢.现支持的网站:①蜂鸟网论坛②中关村摄影论坛③POCO摄影空间④图虫网其他摄影论坛陆续添加中... 效果图: 项目地址: ...