さて、本日は ArcGIS API for JavaScript を使ってみたいと思います。レイヤーをArcGIS Online に共有することはよくあると思いますが、それと同じくらい マップを 共有することもあるかと思います。今回は Web Map として共有したマップに含まれているレイヤーをセレクトボックスに格納する方法について紹介します。
実行環境
ArcGIS API for JavaScript 4.14
Chrome
データ
以下エントリーで使用した神奈川県のデータを使用しました。
上記データを Web Map としてArcGIS Online に共有しました。
ポイント
セレクトボックスの作成
以下のようにセレクトボックスを作成します。
<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>
ばっちりレイヤー名がセレクトボックスに格納されました!○○名というレイヤーは実はポイントレイヤーだったりと少々わかりづらいところがあるデータですが、今回は各レイヤー名の取得にフォーカスを置いているのでとりあえずよしとします。
Web GIS が主流になりつつあるため、今後ますます ArcGIS API for JavaScript の重要性が高まるかと思います。自分ももう少し色々勉強しなければならないと感じています。これからもどんどん ArcGIS API for JavaScript について書いていこうと思います。本日は以上です。