ArcGIS API for JavaScript 4.2学习笔记[9] 同一种视图不同数据（Map）同步

ArcGIS API for JavaScript 4.x

ArcGIS API for JavaScript 4.x：
从3.x版本升级到4.x，变化比较大，学习、开发体验也会不一样。

本系列是转载至博客园原创作者-秋意正寒-致敬!

原地址：https://www.cnblogs.com/onsummer/p/6391513.html

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

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

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

先给出预览图

img

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

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

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

我们来看代码：

给出引用

1
2
3
4
5
6
[
      "esri/views/MapView",
      "esri/WebMap",
      "dojo/on",
      "dojo/domReady!"
]

很清爽。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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元素,事件类型,事件方法体);

见下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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元素而已。

给出官方源代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!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）同步

文章作者:ibrucekong

文章字数:1,340字

阅读时长:6分钟

全站字数:71.0k字

发布时间:2019年05月11日 - 10时56分

最后更新:2019年05月11日 - 10时56分

原始链接:https://ibrucekong.github.io/posts/3849267338/

许可协议: "署名-非商用-相同方式共享 3.0" 转载请保留原文链接及作者。

文章目录
© 2019 ibrucekong
Hexo Theme By maochunguang