アイテムのパディング設定

ReneRubalcava

<\/HEAD>

<\/P>

ArcGIS API for JavaScript 4.0beta1<\/A>のもう一つの便利な機能は、view padding<\/A>という概念です。一見すると、view paddingが正確に何をするのか疑問に思うかもしれません。<\/P>

<\/P>

ドキュメントからの

こちらのサンプル<\/A>は、view paddingが実際に何をするかをよく示しています。このサンプルを見ると、リバティ島と右側にテキストがあるDOM要素が表示されています。<\/P>

<\/P>

一見わかりにくいかもしれませんが<\/EM>、地図の中心はリバティ島の位置に設定されていますが、view paddingを設定することで、viewがそのパディング量だけ地図の中心をオフセットします<\/STRONG>。覚えておいてください、

地図の描画方法を制御しているのはviewです<\/A>。これにより、サイドバーやフッター、ヘッダーを地図に追加しつつも、できるだけ多くの地図領域を活用できます。ほぼ地図の周りにフレームを設けて、それぞれの辺を必要に応じてサイズ変更できるようなイメージです。<\/P>

<\/P>

アプリケーションでスペースを多く取るサイドパネルを作成したことがあるかもしれません。それらは特定の状況で地図を覆い隠したり、サイドバーを収めるために地図サイズを変更したりします。今ではviewのパディングを調整してこれらをオフセットする別の方法があります<\/EM>。<\/P><\/P>これはまた、何かが更新されたときに地図とUI要素がどのように連動するかを調整できることも意味します。例えば、使用していないときにサイドパネルのサイズを変更したい場合は、おそらく同時にview paddingも調整したいでしょう。<\/P><\/P>上記のサンプルを少し調整すればそれが可能です。<\/P><\/P>require([
  "esri\/Map",
  "esri\/views\/SceneView",
  "esri\/widgets\/Search",
  "dojo\/on",
  "dojo\/domReady!"
], function(
  Map,
  SceneView,
  Search,
  on
) {
  //マップを作成
  var map = new Map({
    basemap: "topo"
  });

  //ビューを作成し、view paddingを320ピクセルに設定
  var view = new SceneView({
    container: "viewDiv",
    map: map,
    center: [-118, 34],
    zoom: 9,
    padding: {
      right: 320
    }
  });
 
  view.then(function() {
    var searchWidget = new Search({
      view: view
    }, "searchDiv");
    searchWidget.startup();
  });
 
  var resize = document.getElementById("resize");
  on(resize, "click", function() {
    if (view.padding.right === 320) {
      view.padding = { right: 18 };
    } else {
      view.padding = { right: 320 };
    }
  });

  //view.paddingを使ってcssを更新
  var updatePadding = function(padding) {
    var right = padding.right + "px";
    var paddingRight = document.querySelector("#padding").style;
    paddingRight.width = right;
    paddingRight.visibility = "visible";
  };
 
  updatePadding(view.padding);
 
  //view paddingの更新を監視
  view.watch('padding', function(val) {
    updatePadding(val);
  });
});<\/PRE><\/P>この場合、ボタンクリックを監視してview paddingを調整し、それによってサイドパネルのサイズが変わります。EsriJS betaでこれを実現するのはそれほど難しくありません。<\/P><\/P>

このアプリケーションのデモはこちらからご覧いただけます<\/A>。<\/P>

<\/P>

現在のbetaリリースでのView paddingは、開発者として多くの柔軟性を提供するAPIへのちょっとした素敵な工夫です。ユーザーインターフェースやそれがユーザーの地図とのインタラクションに与える影響について創造的になることができます。ぜひ楽しんで使ってみてください<\/EM>。<\/P><\/P>さらに多くのgeodevヒントやコツについては、

私のブログをご覧ください<\/A>。<\/P><\/BODY><\/HTML>