マップチャートの基本

3. マップチャートの作成 – データを用意する

次はマップチャートの作成に入ります。
関東地方の地図を例に、以下の機能を持ったアプリケーションの作成手順を紹介します。

  • 県ごとの色の塗り分け
  • 県名の表示
  • 県名のポップアップ表示
  • クリックアクションで、その県の解説ページ(Wikipedia)に画面遷移

まず、マップチャートの下地となる情報を作成します。この情報をマップデータと呼びます。マップデータは製品付属のマップエディタで作成や編集、ファイル保存が可能です。
次に、作成したマップデータをWebCharts3Dデザイナで読み込み、ポップアップと画面遷移の機能を設定したマップチャートとして完成させます。

では、各ツールの使用方法およびマップチャートを出力するためのサーブレットとJSPの作成手順を解説していきます。

マップデータの作成

はじめにマップデータを作成します。マップデータには輪郭線やテキストの配置場所などが保存されています。
輪郭は手書きやESRIシェープ形式のインポート、または画像の輪郭を抽出する方法で作成できます。

フォーマットはXML形式で、主に下表に示す5つの要素から構成されています。

要素名 XMLタグ 概要
項目 <item> 要素をグループ化するための要素
エリア <area> 輪郭を表示するための要素
ライン <line> 線(矢印)を表示するための要素
テキスト <text> テキストを表示するための要素
イメージ <image> 画像を表示するための要素

マップデータファイルのサンプル

<?xml version="1.0" encoding="UTF-8"?>
<map name="Map">
  <imageMap>
    <imageDef  width="506"  height="313" image="A...A"/>
  </imageMap>

  <item name="Mainitem">

    <area points="128@158, ..."/>
    <line points="106@63, ..."/>
    <text x="284" y="138" width="100" height="40"
               halign="Left" valign="Top" multiline="true">textvalue</text>
    <image x="40" y="24" width="500" height="358" scale="false" image="0"/>

    <item name="Subitem">
      <area backColor="#AAAA00" points="609@124, ..."/>
    </item>
  </item>

</map>

マップエディタの起動

マップエディタの画面左側をツリービュー、右側をグラフィカルビューと呼びます。
ツリービューにはマップデータがツリー構造で表示され、グラフィカルビューには描画イメージが表示されます。XMLソースは[XML]タブで確認できます。

画像「マップエディタ」

ツールバーのボタンからは、各要素を追加することができます。以下は、各ボタンの説明と対応するXML要素です。

名前 アイコン ツリービュー
(初期表示)
対応する
XML要素
説明
アイテム追加 Item <item> item要素がツリービューに追加され、選択状態になります。
エリア追加 {area} <area> area要素を追加します。
グラフィカルビューをクリックするたびにその位置を取得し、points属性として追加します。
ライン追加 {line} <line> line要素を追加します。
グラフィカルビューをクリックするたびにその位置を取得し、points属性として追加します。
テキスト追加 [<TEXT>] <text> text要素を追加します。
グラフィカルビューをクリックしてテキストの位置を選択します。
イメージ追加 <Image> <image> image要素を追加します。
画像ファイルを選択してから、グラフィカルビューの目的の位置をクリックします。

area要素の作成

マップチャートで塗り分ける領域は、多角形の情報として管理されています。マップチャートでは、これら個々の多角形を「エリア(area)」と呼びます。

area要素は、ひとつひとつポイントを追加して作成します。マップエディタには、画面の輪郭線を解析し、area要素として抽出する機能(アウトライン化)が提供されています。
この機能を利用することで、複雑な図形も簡単にマップデータとして作成できます。
area要素として抽出するための条件は、画像の輪郭線が多角形や円のように外周が閉じられていることです。
なお、使用できる画像フォーマットはPNGとJPEG、GIFの3種類です。

ケース 形状 抽出結果
通常ケース
塗りつぶされた領域 塗りつぶされた領域はアウトライン化されません。
一部がはみ出た場合 画像の輪郭外にはみ出た部分がある場合はアウトライン化されません。
輪郭が切れている場合 輪郭に切れている部分がある場合はアウトライン化されません。
  1. 画像の追加
    マップデータのベースとなる画像を読み込みます。
    1. ツールバーの[イメージ追加]をクリックします。
    2. [開く]ダイアログボックスで画像を指定します。今回の例では以下の画像を使用します。

      画像「今回使用する画像」

    3. グラフィカルビュー内で画像を追加したい場所をクリックします。

      画像「グラフィカルビュー」拡大

  2. アウトラインの抽出
    追加したい画像を輪郭から抽出し、area要素を作成します。
    1. 画像を右クリックし[画像のアウトライン化]を選択します。
    2. [画像のアウトライン化]ダイアログボックスで、抽出する色(輪郭になっている色)を選択します。

      画像「画像のアウトライン化ダイアログボックス」拡大

      上の図では黒だけを選択していますが、複数色を選択することができます。
    3. [OK]をクリックすると画像の解析が行われ、アウトライン化されたarea要素が作成されます。

      画像「アウトライン化されたarea要素」拡大

【補足情報】

アウトラインは指定色から抽出されます。例えば、読み込まれた画像の輪郭を構成する色が4色であった場合、4色すべてを指定する必要があります。そのため、色数の少ない高精度の画像を使用することが作業の軽減につながります。

画像「4色指定」

また、既存の画像を利用して意図したようにアウトラインが抽出できない場合は、ペイントツールなどを利用して途切れた輪郭を書き足すことでアウトラインが抽出できます。

画像「輪郭の書き足し」

県別グループの作成

県別に色を塗り分けるために、作成したarea要素を区別する必要があります。
県別のitem要素を作成し、県名を入力します。入力した県名はitem要素のname属性に設定されるため、このname属性を使うとそれぞれのarea要素が区別できるようになります。

  1. ツリービューに表示されているarea要素を右クリックし、[階層化]を選択します。

    画像「ツリービューから階層化を選択」拡大

    新しくitem要素が追加され、area要素がその下に配置されます。

    画像「item要素の追加」拡大

  2. Item要素をダブルクリックし、県名を入力します。

    画像「Item要素をダブルクリック」拡大

    県名入力後のツリービューは下の図のようになります。

    画像「県名入力後のツリービュー」

    それぞれの県に上記操作を繰り返します。

Text要素の追加

マップチャート上に文字列を表示させるにはtext要素を使用します。
今回は$(name)変数を使用し、item要素に入力した県名をチャートへ表示します。$(name)変数はitem要素のname属性を参照する変数です。例えば、”$(name)”と入力したtext要素を”東京都”のitem要素の下に配置すると、text要素には”東京都”と表示されます。

  1. ツールバーの[テキスト追加]をクリックします。
    グラフィカルビュー内のテキストを追加したい場所をクリックすると、text要素が追加されます。

    画像「text要素の追加」拡大

  2. text要素マウス操作で選択し、”$(name)”と入力します。

    画像「textの入力」拡大

  3. ”東京都”のarea要素上に重なるように位置とサイズを調整します。

    画像「位置とサイズを調整」拡大

  4. ツリービューで、追加したtext要素を”東京都”のitem要素の下へドラッグ&ドロップします。このとき、area要素‐text要素の順で配置していきます。

    画像「text要素をitem要素の下へ」拡大

    それぞれの県においても、上記作業を繰り返し行います。

    画像「位置とサイズを調整」拡大

    【補足情報】

    マップチャートはツリー状に配置された要素を上から順に描画します。area要素の上にtext要素を表示する際には、area要素の色で塗りつぶされないように配置する必要があります。
    例えばtext要素-area要素の順に配置した場合、text要素の上にarea要素の塗りつぶしが描画され、text要素は見えなくなってしまいます。

  5. [ファイル]‐[名前を付けて保存]からをクリックし、ファイル名を「sample.map」 として任意のフォルダに保存します。