選択情報を操作する

いくつかのコンポーネントでは、ユーザがマップ上のフィーチャを対話的に選択することができます。Infrastructure Map Server は、必要に応じてマップ イメージを現在の選択情報で更新しますが、選択されたフィーチャの属性をユーザに表示することはしません。それはアプリケーションの役目です。

フィーチャの選択方法に関係なく、Map コンポーネントはアプリケーションがユーザの選択情報を取得したり操作するための API を提供しています。アプリケーションは、ユーザの選択情報が変更されたことを知るために、次の 2 つのイベントを使用できます。

• MAP_SELECTION_ON: Map コンポーネントは、新しい選択情報が作成されたときに、このイベントを発行します。
• MAP_SELECTION_OFF: Map コンポーネントは、現在の選択情報がクリアされたときに、このイベントを発行します。

アプリケーションは、Map コンポーネントから MAP_SELECTION_ON イベントを受け取ると、次の関数を使用して選択情報を操作できます。

• hasSelection() は、現時点で選択情報が存在するかどうかを示すブール値を返します。
• getSelection( callback ) は、現在の選択情報を取得します。選択情報の取得は非同期の処理になる可能性があるため、呼び出される側は選択情報の準備が整ったときに呼び出されるコールバック関数を用意します。コールバック関数には、次に説明するように 1 つの引数と 1 つの Selection オブジェクトが渡されます。
• clearSelection() は、現在の選択情報をクリアするために使用されます。この関数はマップから選択情報を削除して、現在の Selection オブジェクトを無効にします。

例として、「サンプル 2: 選択」を参照してください。

アプリケーションは、通常は MAP_SELECTION_ON イベントに応答して getSelection() を呼び出します。この代表的なコードは次のとおりです。

window.onload=function() {
  // ...
 
  Fusion.registerForEvent(
    Fusion.Event.FUSION_ERROR, 
    fusionError);
  Fusion.registerForEvent(
    Fusion.Event.FUSION_INITIALIZED, 
    fusionInitialized);      
  Fusion.initialize();
}
 
var theMap;
function fusionInitialized() {
  theMap = Fusion.getWidgetById('Map');
  theMap.registerForEvent(Fusion.Event.MAP_SELECTION_ON,
    OpenLayers.Function.bind(this.selectionOn, this));
  theMap.registerForEvent(Fusion.Event.MAP_SELECTION_OFF,
    OpenLayers.Function.bind(this.selectionOff, this));
}
 
function selectionOn() {
  //a new selection has been made, request it
  theMap.getSelection(displaySelection);
}
 
function displaySelection(selection) {
  //display the selection to the user in some way ...
}
 
function selectionOff() {
  //clear the selection results
}


 コールバック ルーチンに渡されるパラメータは、1 つ以上のマップからの選択内容が含まれる関連性のある配列です。ほとんどの場合、配列内には 1 つの要素があり、メイン マップのための Selection オブジェクトを備えています。この Selection オブジェクトは次の API を提供します。 
 getNumLayers() は、フィーチャが選択された画層の数を返します。 
 getNumElements() は、選択されたフィーチャの合計数を返します。 
 getLowerLeftCoord() は、選択されたすべてのフィーチャの境界ボックスの左下の座標を返します。 
 getUpperRightCoord() は、選択されたすべてのフィーチャの境界ボックスの右上の座標を返します。 
 getLayerByName( name ) は、画層の名前から、その画層に対応する Layer Selection オブジェクトを取得します。この関数は、要求された名前を持つ画層が選択結果にない場合、null を返します。 
 getLayer( index ) は、要求された画層に対応する Layer Selection オブジェクトを取得します(index は 0～ getNumLayers() によって返された値より 1 つ小さい数)。 

アプリケーションは、通常は選択範囲内の複数の画層を越えてループし、getLayer() または getLayerByName() によって返される Layer Selection オブジェクトを使用して、個々の結果を取得します。Layer Selection オブジェクトに次の API があります。 
 getName() は、選択されたフィーチャが格納されている画層の名前を返します。 
 getNumElements() は、この画層内で選択されているフィーチャの数を返します。 
 getNumProperties() は、この画層内のフィーチャについて、データのプロパティまたは属性の数を返します。 
 getPropertyNames() は、各プロパティの名前の配列を返します。 
 getPropertyTypes() は、プロパティのタイプの配列を返します。 
 getElementValue(elementIndex, propertyIndex) は、指定された要素に関する指定されたプロパティの実際の値を返します。 

次のコードは、Selection オブジェクトや Layer Selection オブジェクトを使用して、選択されたフィーチャを表形式で表示する方法の例を示しています。 
function displaySelection(multiSelection) {
  var theMap = Fusion.getWidgetById("Map");
  if (!theMap.hasSelection())
  {
    alert("Nothing selected");
    return;
  }
  var selection = multiSelection[theMap.getMapName()];
 
  //display the selection to the user in some way ...
  //make sure something got selected ...
  if (selection && selection.getNumLayers() > 0) 
  {
    //obtain a reference to the HTML Element that the results
    //will be placed in
    var resultElm = $('selectionResultDiv');
    resultElm.innerHTML = '';
    for (var i=0; i<selection.getNumLayers(); i++) {
      var selectionLayer = selection.getLayer(i);
      var propNames = selectionLayer.getPropertyNames();
      var span = document.createElement('span');
      span.className = 'selectionResultsTitle';
      span.innerHTML = 'Layer ' + selectionLayer.getName();
      resultElm.appendChild(span);
      var table = document.createElement('table');
      table.className = 'selectionResultsTable';
      resultElm.appendChild(table);
      //set up the table header to be the property names
      var thead = document.createElement('thead');
      table.appendChild(thead);
      var tr = document.createElement('tr');
      thead.appendChild(tr);
      for (var j=0; j<propNames.length; j++) {
        var td = document.createElement('td');
        td.innerHTML = propNames[j];
        tr.appendChild(td);
      }
      //output the selection values
      var tbody = document.createElement('tbody');
      table.appendChild(tbody);
      for (var j=0; j<selectionLayer.getNumElements(); j++) {
        var tr = document.createElement('tr');
        tbody.appendChild(tr);
        for (var k=0; k<propNames.length; k++) {
          var td = document.createElement('td');
          td.innerHTML = selectionLayer.getElementValue(j, k);
          tr.appendChild(td);
        }
      }
    }
  } else {
    //could display a message of some sort saying nothing was
    //selected
  }
}