Svg地図オブジェクトの作成

このトピックでは、新しいSvg地図オブジェクトを画面またはコンテナに追加する方法およびその特定のプロパティについて説明します。

新しいSvg地図を作成するには、デザインモードで画面にアクセスする必要があります。

画面編集ページが表示されたら、左パネルの画面オブジェクトリストからSvg地図オブジェクトを探し、画面またはコンテナにドラッグアンドドロップします。

Svg地図を作成すると、最初は空になります。次の手順では、マップに表示するデータを定義するレイアウトを設定します。これを行うには、[構成(Configure me)]ボタンをクリックするか、Svg地図オブジェクトを選択して、カプセルワークスペースのトップメニューにある[レイアウトを設定(Configure layout)]ボタン（）をクリックします。

レイアウトオブジェクトの詳細については、レイアウトオブジェクト、レイアウトを設定およびレイアウトのデータブロックについてをご覧ください。

Svg地図は、他のすべてのオブジェクトと同様に、移動、サイズ変更、コピー/貼り付けによる複製、および画面上の他のオブジェクトとの連携が容易です。

詳細は、画面オブジェクトの構成を参照してください。

Svg地図レイアウト

Svg地図オブジェクトのレイアウトエディタは、地図固有のオプションを提供し、マッピングに必要な特定のデータブロックを含む必要があるという点で、従来のものとは若干異なります。
考慮すべき主な要素は、次の図で強調表示されています。

軸領域

軸領域では、データを異なるマップ領域に関連付けるために使用されるエンティティを追加できます。

Svg地図オブジェクトは、[行(By row)]フィールドで最大2つのエンティティに対応しています。
メンバー/文字列がSvg地図ファイル内のSVG領域のIDにマッピングされているエンティティ/テキストブロックを使用した領域マッピングを行うには、レイアウトにエンティティ/テキストブロックを含め、[SVG領域(SVG Areas)]メニューの[SVG領域名(SVG area name)]ドロップダウンでそれを選択する必要があります。詳細は、とSVGの管理を参照してください。
SVG地図ファイルには、マッピングが必要な各SVG領域の<g>SVG要素が含まれている必要があります。特に、全ての<g>要素には、対応するSVG領域の一意のIDを含まれている必要があります。

データ領域

メンバー/文字列がSVG地図ファイル内のSVG領域のIDにマッピングされたエンティティ/テキストブロックを使用して、領域マッピングを実現できます。

そのためには、メンバー/文字列がマップ内のSVG領域のIDにマッピングされたエンティティ/テキストブロックをレイアウトに追加する必要があります。次に、[オブジェクトのプロパティ(Object Properties)]パネルの[SVG領域(SVG Areas)]メニューの[SVG領域名(SVG area name)]ドロップダウンでそれを選択する必要があります。

SVG地図ファイルには各地図領域の<g>SVG要素のIDと座標が含まれ、レイアウトのエンティティ/テキストブロックには同じIDをメンバーコード（エンティティ）または文字列（テキストブロック）として含まれている必要があります。

データ領域に追加されたデータキューブは、[行(By row)]フィールドに追加されたエンティティ、または同じ関係ツリーの別のエンティティを、その構造内に持っている必要があります。

例

デパートに出店している店舗の来客データを可視化してみましょう。店舗エンティティには、マップのSVG領域のIDがメンバーとして含まれており、データは月、性別、年齢、店舗、時間ごとに次元化された来客キューブにロードされます。

店舗エンティティはレイアウトの[行(By row)]フィールドに追加され、[オブジェクトのプロパティ(Object Properties)]パネルの[SVG領域(SVG Areas)]メニューの[SVG領域名(SVG area name)]ドロップダウンで選択されます。

レイアウト設定は以下のようになります。

店舗エンティティは以下のメンバーを持ち、そのコードはSVG地図ファイルの地図領域の識別にも使用されます。

データキューブは、いずれかの集約レベルの、[マーカー(Markers)]フィールドに追加されたエンティティ、または同じ関係ツリーの別のエンティティを、その構造内に持っている必要があります。

オブジェクトのプロパティ

レイアウトエディタの[オブジェクトプロパティ(Object Properties)]パネルにある[SVG領域(SVG areas)]メニューでは、関連するマップ領域上に色付きレイヤーとしてデータ可視化を設定できます。

設定は、[SVG領域名(SVG area name)]フィールドからエンティティ/テキストブロックをSVG地図ファイルのSVG領域のラベルにマッピングすることで行うことができます。 [色(Color)]ドロップダウンメニューで、レイアウトからブロックを選択し、それらを領域の色のドライバーとして使用でき、[データ集約の色の不透明度の基準(Color opacity for data aggregation by)]ドロップダウンメニューで色の不透明度を制御する基準を定義できます。

Svg地図のプロパティと設定

オブジェクトを選択してレイアウトに関連付けると、Svg地図のプロパティを画面編集ページのコンテキスト右パネルから使用できるようになります。

Svg地図オブジェクトは、すべての画面オブジェクトに共通するすべてのオプションと、以下のプロパティに対応しています。

[マスタオブジェクト(Master object)]。有効な場合、マップ領域をクリックすると、画面上の他のすべてのオブジェクトによって表示されるデータが更新され、クリックしたアイテムに関連するデータのみが表示されます。マスタオブジェクトの結果は、画面選択
[パンとズーム(Pan and zoom)]。デザインモードとプレイモードの両方で、パンとズームのためのユーザーコントロールを有効または無効にできます。

[SVGを管理(MANAGE SVG)]ボタンで、SVG地図ファイルをアップロードし、地図領域を詳細度別に管理できます。

そのためには、次の手順を実行します。

ボタンをクリックします。 SVG地図設定ウィンドウが表示されます。

ここから、1つ以上のSVG地図ファイルをアップロードして、すべてのSvg地図設定で常に利用可能なライブラリを作成できます。
ファイルをアップロード（またはライブラリから以前にアップロードしたファイルを選択）したら、最大ズームレベル（0から19まで）を設定し、各レベルを利用可能なSvg地図と関連付けることができます。
[保存(SAVE)]ボタンをクリックすると、設定が保存され、ウィンドウが閉じます。

上記の例では、SVG地図がズームレベル0に関連付けられ、別のJSON地図がズームレベル3に関連付けられました。ユーザーが地図上でズームすると、ズームレベル3ではより詳細な地図レイヤーがこの設定に従って表示されます。

デザインモードでのSvg地図の操作

デザインモードでは、Svg地図オブジェクトはプレイモードで利用可能なものと同じインタラクティブな機能を提供します。

プレイモードのコンテキストメニュー（スライドツールバー）で使用できるオプションを設定することもできます。これを行うには、マップにカーソルを合わせて左上隅にあるコンテキストメニューアイコン（）をクリックし、下向きの矢印をクリックして展開します。構成パネルには、右上隅にある歯車アイコンからアクセスできます。

詳細情報：