ArcGIS API for JavaScript 4.2學習筆記[9] 同一種視圖不同數據(Map)同步


本例子核心:對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>
源代碼

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM