GIS奮闘記

元GISエンジニアの技術紹介ブログ。主にPythonを使用。

スポンサーリンク

ArcGIS API for JavaScript でWeb Map にあるレイヤーをセレクトボックスに格納する方法

さて、本日は ArcGIS API for JavaScript を使ってみたいと思います。レイヤーをArcGIS Online に共有することはよくあると思いますが、それと同じくらい マップを 共有することもあるかと思います。今回は Web Map として共有したマップに含まれているレイヤーをセレクトボックスに格納する方法について紹介します。

実行環境

ArcGIS API for JavaScript 4.14
Chrome

データ

以下エントリーで使用した神奈川県のデータを使用しました。

www.gis-py.com

上記データを Web Map としてArcGIS Online に共有しました。

f:id:sanvarie:20200201224639p:plain

f:id:sanvarie:20200201230012p:plain

ポイント

セレクトボックスの作成

以下のようにセレクトボックスを作成します。

<div id = 'divToolbar'>
    <label>レイヤー</label>
    <select id = 'ddLayerList'>
    </select>
</div>

Web Map の読み込み

以下のように WebMap クラスを使用します。そして、作成した Web Map の ID を設定してください。

const map = new WebMap({
    "portalItem" : {
        "id" : "adfcbd5d28174451b61ec8c0195af577"
    }
});

Web Map に格納されているレイヤーの取得

loadLayers というメソッドを作成します。その中でセレクトボックスに各レイヤー名称を格納しています。

map.when(() => loadLayers(map.layers))

function loadLayers(layers) {
  const ddLayerList = document.getElementById("ddLayerList");
   layers.forEach(l => {
        let o = document.createElement("option");
        o.textContent = l.title;
        o.layer = l;
        ddLayerList.appendChild(o)
   });
 }

サンプルコード

こちらがすべてのコードです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
    html,
    body,
    #divMapView {
        padding: 0;
        margin: 0;
        width:100%;
        height:100%;
    }
    #divToolbar {
        top:0;
        width:100%;
        position: fixed;
        background:rgba(0,0,0,0.6);
        color: white;
    }

    </style>
    <title>レイヤー一覧</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/css/main.css">
    <script src="https://js.arcgis.com/4.14/"></script> 
    <script>
    
     function loadLayers(layers) {
      const ddLayerList = document.getElementById("ddLayerList");
       layers.forEach(l => {
            let o = document.createElement("option");
            o.textContent = l.title;
            o.layer = l;
            ddLayerList.appendChild(o)
       });
     }
     
     require (["esri/WebMap", "esri/views/MapView"],
     (WebMap,MapView) => {
        const map = new WebMap({
            "portalItem" : {
                "id" : "adfcbd5d28174451b61ec8c0195af577"
            }
        });
        const mapView = new MapView({ 
            "container" : "divMapView",
            "map" : map
        })
        
        map.when(() => loadLayers(map.layers))
          
     })  
    </script>
</head>
<body>
    <div id = 'divMapView'></div>
    <div id = 'divToolbar'>
        <label>レイヤー</label>
        <select id = 'ddLayerList'>
        </select>
    </div>
</body>
</html>

ばっちりレイヤー名がセレクトボックスに格納されました!○○名というレイヤーは実はポイントレイヤーだったりと少々わかりづらいところがあるデータですが、今回は各レイヤー名の取得にフォーカスを置いているのでとりあえずよしとします。 f:id:sanvarie:20200201231015p:plain

Web GIS が主流になりつつあるため、今後ますます ArcGIS API for JavaScript の重要性が高まるかと思います。自分ももう少し色々勉強しなければならないと感じています。これからもどんどん ArcGIS API for JavaScript について書いていこうと思います。本日は以上です。