GroupLayer をハグしよう

ReneRubalcava

<\/HEAD>

ArcGIS API 4 for JavaScript では、レイヤーを志を同じくする<\/EM>カテゴリにグループ化して管理するのに役立つ新しいレイヤータイプが導入されました。GroupLayer<\/A> は、その名の通り、レイヤーをグループ化する<\/EM>ための非常に興味深い機能を提供します。<\/P><\/P>例えば、動的マップサービスとして、このNOAA Storm Reports サービス<\/A>があるとします。これは嵐の報告の概要を素早く確認できる便利なサービスです。しかし、これは動的マップサービスであり、通常はMapImageLayer<\/A>で表示されますが、このレイヤータイプ（旧称 ArcGISDynamicMapServiceLayer）は初期の4.0リリースではポップアップをサポートしていません。<\/P>

<\/P>

これらのポイントの背後にあるデータは有用かもしれないので、アプリケーションでポップアップを表示したい場合があります。<\/P>

<\/P>

簡単な回避策としては、サービス内の各個別レイヤーを

FeatureLayer<\/A>として使用し、ポップアップを定義すれば問題ありません。しかし、アプリケーション内でこれらのデータを単一のレイヤーとして扱う必要がある場合（例えばボタン一つで全てオフにするなど）、少し工夫が必要です。<\/P>

<\/P>

ここで GroupLayer をハグしたくなるでしょう。<\/EM><\/P><\/P>そのコード例を見てみましょう。<\/P><\/P>require([
  "esri\/Map",
  "esri\/views\/MapView",
  "esri\/layers\/FeatureLayer",
  "esri\/layers\/GroupLayer"
], function (Map, MapView, FeatureLayer, GroupLayer) {
  var url = "

http:\/\/tmservices1.esri.com\/arcgis\/rest\/services\/LiveFeeds\/NOAA_storm_reports\/MapServer\/<\/>";<\/SPAN>

  var map = new Map({
    basemap: "streets"
  });

  var view = new MapView({
    container: "viewDiv",
    map: map,
    center: [-98.648, 36.374],
    zoom: 5,
    ui: {
      components: ["zoom", "attribution", "compass"]
    }
  });

  var titles = [
    "NOAA HAIL Storm Reports (24 hours)",
    "NOAA TORNADO Storm Reports (24 hours)",
    "NOAA WIND Storm Reports (24 hours)",
    "NOAA TORNADO Storm Reports (past week)"
  ];

  var layers = ["0", "1", "2", "3"].map(function(index, idx) {
    return new FeatureLayer({
      url: url + index,
      outFields: ["*"],
      popupTemplate: {
        title: titles[idx],
        content: "{*}"
      }
    });
  });

  var groupLayer = new GroupLayer({
    layers: layers,
    visibilityMode: "inherited",
    visible: true
  });
  map.add(groupLayer);

  view.then(function() {
    var btn = document.createElement("div");
    btn.className = "esri-button esri-widget-button esri-interactive esri-icon-feature-layer";
    btn.title = "Toggle Storm Data";
    view.ui.add(btn, "top-right");
    btn.addEventListener("click", function() {
      groupLayer.visible = !groupLayer.visible;
    });
  });
});<\/PRE><\/><\/>ここで行ったことは、嵐の報告データを個別の FeatureLayers として追加し、それらを GroupLayer でラップしました。そして UI にシンプルなボタンを追加し、そのボタンはグループ化された嵐データの表示・非表示を切り替えます。GroupLayer の visibilityMode<\/><\/> を "inherited"<\/><\/> に設定したことに注目してください。これはすべてのサブレイヤーが親の GroupLayer から可視性を継承することを意味します。この設定は必要に応じて変更して、GroupLayer 内のレイヤーの条件付き可視性など高度な制御も可能ですが、このユースケースではすべてがうまく機能します。<\/><\/><\/>このアプリケーションの ライブデモはこちらからご覧いただけます<\/><\/>.<\/><\/><\/>GroupLayer は FeatureLayers のラップに限定されず、任意のレイヤータイプをグループ化できるため、複数のマップサービスの可視性制御に非常に便利です。<\/><\/><\/>次回の ArcGIS API 4 for JavaScript アプリケーションでぜひ GroupLayer を試してみてください！<\/><\/><\/>ジオデベロッパー向けのヒントやコツについては、私の ブログをご覧ください<\/><\/>.<\/><\/>タイトル写真提供：Mel Aclaro さん via group hug | Flickr - Photo Sharing!<\/><\/> <\/><\/><\/>