Flexのデータマップコントロールを使用したデータ駆動型地図アプリケーションの構築
作成日
8 June 2009
ページ ツール |
必要条件
この記事に必要な予備知識
- Flexに関する一般的な知識。
- データグリッドやリストなどのデータ駆動型コントロールに関する基本的な理解。
ユーザーレベル
中級
必要な製品
- Flex Builder 3 (Download trial)
サンプルファイル
- flex_datamap.zip (450 KB)
高機能なYahoo! Maps ActionScript 3.0コンポーネントを使えば、FlashまたはFlexに基づく地図アプリケーションを簡単に作成できます。ただし、Flex開発者にとっては、使用モデルがFlexのデータグリッドやリストなどのデータ駆動型コントロールとまったく違うと感じられるかもしれません。
Flexデータマップコントロールは、Yahoo! Mapコンポーネントに基づいて作成された無料のオープンソースコンポーネントであり、データグリッドやタイルリストコントロールと同じデータプロバイダーから入力を取得して、Locationまたはカスタマイズ可能なフィールドに基づいてそのデータを地図上にプロットします。地図上のマーカーをクリックすると、アイテムレンダラーがポップアップして、その場所に関連するデータを表示します。
このほかに、データプロバイダーに対する変更が自動的に反映される、Ctrlキーを押すことで複数の項目をボックス選択できる（図1を参照）、マップ上に自由に描画できる（描画はズームレベルに応じて拡大縮小されます）、描画を保存して復元できるといった機能があります。
注意：データマップコントロールは、MPL 1.1オープンソースライセンスに基づいてライセンスされています。
このコントロールの主な使用法は、場所情報を含むデータがある場合に、地図上にそのデータをプロットし、その場所に関連するデータをクリック1つで表示できるようにすることです（私は当初、「データグリッドの地図化」コントロールと呼んでいました）。
この記事では、データマップコントロールの機能を説明し、次のような機能を持つ単純で強力なアプリケーションを、わずか数行のコードで作成する手順を紹介します。
- データグリッドと地図上に同じデータを表示します。
- データグリッドで行った変更を地図上に反映します。
- 地図上の複数の項目をボックス選択できます。
- 地図上に自由に描画して、保存したり復元したりできます。
データマップコントロールの機能
Flexデータマップコントロールは、リストコントロールやデータグリッドコントロールと同様にデータプロバイダーから入力を受け取り、各オブジェクトのmapFieldプロパティ（デフォルトではLocation）を調べ、地図上の該当する場所にマーカーをプロットします。データプロバイダーのArrayCollectionが変更された場合、地図にも反映されます。データグリッドコントロールやリストコントロールと同様に、オブジェクトの追加、編集、削除、フィルタリングを行って、地図を自動的に更新させることができます。これは簡単そうに思えるかもしれませんが、いくつか注意すべき点があります。まず、地図の境界とズームレベルは、すべてのマーカーが表示されるように自動的に調整されます。データマップコントロールには、地図上にプロットされた場所がカバーする領域を視覚的に示すためのオーバーレイを描画する機能もあります（このためのAPIはYahoo! Mapsコンポーネントに用意されています）。視覚表現を見やすくするため、このオーバーレイは、APIを直接使用した場合よりも広い領域を囲むようになっています。
アイテムレンダラーとマーカーレンダラー
マーカーをクリックすると、アイテムレンダラーがポップアップします（アイテムレンダラーは独自に設定できます）。これは地図と一緒に（多少の遅れはありますが）移動し、地図の境界で正しくクリッピングされます。マーカーレンダラーを指定して、各マーカーの表示方法を制御することもできます。この機能は、Yahoo! Mapsコンポーネントに組み込まれています。
マーカー選択
マーカーをクリックして選択すると、selectedObjectがそのマーカーに関連付けられたデータを指すようになります。Ctrlキーを押しながらクリックすると複数のマーカーを選択できます。これらにはselectedObjectsからアクセスできます。マーカーを選択するもう1つの方法として、Ctrlキーを押しながらマウスをドラッグして、選択ボックスを作成することができます。選択ボックス内部にあるマーカーが選択されます。これはトグルになっており、選択されているマーカーがボックス内に入ると、選択が解除されます。
地図上のフリーフォーム描画
地図上に描画するには、Shiftキーを押しながらマウスを動かします。描画は経度と緯度に基づいて記録されるので、地図と共に正しく拡大縮小および移動されます。このデータは、データマップコントロールのfreeformLinesBase64プロパティを取得または設定することによって、Base64エンコードされた文字列で保存したり復元したりできます。
データマップを使った単純で強力なアプリケーションの構築
データマップによる地図アプリケーションの作成は、きわめて簡単です。最初の目標は、地図上にデータをプロットすることです。その後、同じデータにバインドされた編集可能なデータグリッドを追加し、データの表示方法をカスタマイズして、アプリケーションに対話機能を持たせます。
地図上へのデータのプロット
- 新規Flexプロジェクトを作成します。
- Yahoo! Maps SWCファイルをダウンロードし、libsディレクトリにコピーします。
- この記事のサンプルファイルの中のDataMap SWCファイルを、libsディレクトリにコピーします。
注意：サンプルファイルには、アプリケーションの完成版MXMLファイルが用意されたFlex Builderプロジェクトも含まれています。
- メインMXMLファイルで、表示するデータを宣言します。
private var mapData:Array = [
{Name: "Joe", Location:"Agra"},
{Name: "Sam", Location:"Delhi"},
{Name: "Ram", Location:"Mumbai"},
{Name: "Shyam", Location:"Chennai"},
];
[Bindable]
private var mapColl:ArrayCollection = new ArrayCollection(mapData);
注意：HTTPService、WebService、またはRemoting呼び出しを使ったサーバーサイド要求を実行することで、この配列にライブデータを入力することもできます。
- データマップコントロールをインスタンス化するために、Flex Builderで<DataMapと入力してCtrl+スペースキーを押し、コンテンツアシストを起動します。上で宣言したデータをこれにバインドします。
<controls:DataMap
id="mapGrid"
yahooAppID="yourappidhere"
dataProvider="{mapColl}"
enableDrawMode="true"
geocoderFailure="Alert.show('failed to geocode' + event)"
width="75%" height="100%" />
注意：Ctrl+スペースキーが動作するのは、libsフォルダーにDatamapLib.swcが存在する場合だけです。
- Yahoo! APIキーを取得し、
yahooAppID属性を使ってコンポーネントに割り当てます。この時点でアプリケーションをコンパイルして実行すると、地図が表示され、Agra、Delhi、Mumbai、Chennaiにマーカーがプロットされます。マーカーをクリックして、対応する名前を表示してみてください。先に述べたように、Ctrlキーを押しながら複数のマーカーをボックス選択したり、Shiftキーを押しながら地図上にフリーフォームを描画したりできます（図2を参照）。
機能の拡張
- 同じデータを編集可能なデータグリッドに割り当てることによって、Locationフィールドの値を変更すると地図上のマーカーが即座に更新されるようにします。
<mx:DataGrid id="dg" dataProvider="{mapColl}" editable="true" width="25%" />
<mx:Application>のlayout属性をhorizontalに設定することで、データグリッドと地図を横に並べて表示します。
- マーカーをクリックしたときにデータが表示される方法をカスタマイズするには、アイテムレンダラーを設定します。
<controls:DataMap id="mapGrid"
<!-- other attributes omitted for brevity -->
>
<controls:itemRenderer>
<mx:Component>
<mx:Canvas>
<mx:TextArea editable="false" text="This guy's name is {data.Name}" />
</mx:Canvas>
</mx:Component>
</controls:itemRenderer>
</controls:DataMap>
- 地図上のマーカーをクリックするかボックス選択したときに動作を実行するには、
itemClickまたはboxSelectイベントを待ち受けます。イベントハンドラーでは、イベントオブジェクトのselectedObjectまたはselectedObjectsプロパティを使用して、選択されたアイテムを判定できます。
<controls:DataMap id="mapGrid" itemClick="dg.selectedItem = event.selectedObject"
<!-- other attributes omitted for brevity -->
>
これで、マップ上のアイテムをクリックすると、対応するオブジェクトがデータグリッドで選択されます。
次のステップ
データマップコントロールを使うことで、地図を利用したFlexアプリケーションの開発効率が大幅に向上するはずです。データマップコントロールには、この記事で説明していない他の設定可能なプロパティもあります。これについては、データマップコンポーネントのデモを参照してください。
Yahoo! Maps Flash APIをデータマップなしで使用したい場合は、Adobe Developer Connectionの記事Yahoo! Maps Flash APIの使用を参照してください。
