DataV:v3-x のフレームアニメーションレイヤー

チャートスタイル

フレームアニメーションレイヤーは、ベースフラットマップ 3.0 のサブコンポーネントであり、カスタムフレームアニメーショングラフタイプを使用して、マップ上の特定のポイント効果をマークする機能を備えています。

スタイルパネル

• 検索設定: [スタイル] パネルの右上隅にある設定項目検索アイコン をクリックします。[検索設定] パネルで、検索する設定項目の名前を入力して設定項目を検索します。あいまい一致がサポートされています。詳細については、「設定項目の検索」をご参照ください。

• 全般: フレームアニメーションレイヤーの全般設定項目を設定します。

  メトリック	説明
  表示レベル	フレームアニメーションレイヤーの表示レベル値を設定します。設定されたレベル範囲内では表示され、レベル外では非表示になります。
  不透明度	フレームのアニメーションレイヤーの不透明度を % で指定します。範囲は 0 から 100 です。数値が大きいほど、アニメーションレイヤーは不透明になります。

• グラフィック: フレームアニメーションレイヤーのグラフィック設定項目を設定します。

  メトリック	説明
  動的シェイプ	アニメーションイメージのスタイルを選択します。[スタイル] の横にあるドロップダウンボックスをクリックして、5 つの組み込みスタイルから 1 つを選択できます。また、ドロップダウンパネルの入力ボックスにフレームアニメーションイメージの URL を入力して、リモートサーバー上のフレームアニメーションイメージをアニメーションイメージとして使用することもできます。入力ボックスの右側にある アイコンをクリックして、ローカルのフレームアニメーションイメージをアップロードしてアニメーションイメージとして使用することもできます。
  動的サイズ	アニメーションイメージの幅と高さを設定します。有効値: 0～400。単位: ピクセル。

• 動的効果: スライダーをドラッグして、フレームアニメーションレイヤーの動的効果を設定します。値の範囲は 0 から 2 です。

• ラベル: フレームアニメーションレイヤーのラベルのスタイルパラメーターを指定します。

  メトリック	説明
  ラベルを表示	スイッチをオンにすると、フレームアニメーションレイヤーにラベルスタイルが表示されます。
  表示モード	フレームアニメーションレイヤーラベルの表示モードです。有効な値: [クリック] および [ホバー]。
  相対位置	アニメーションレイヤーのラベルの相対位置です。有効な値: [左]、[中央]、[右]、[上]、および [下]。
  相対オフセット	フレームアニメーションレイヤーのラベルの相対的な水平および垂直オフセット値を指定します。単位: px。有効値: -100～100。
  コンテンツスタイル	フレームアニメーションレイヤーのラベルのコンテンツスタイルを設定します。[行ごとのスタイル] の右側にある または アイコンをクリックして、各行のスタイルを追加または削除します。 または アイコンをクリックして、行ごとに複数のコンテンツスタイルの配置を設定します。 アイコンをクリックして、選択したコンテンツスタイルをコピーし、同じ構成のコンテンツスタイルを追加します。 行フィールド: 行フィールドの名前。データパネルのフィールドと一致する必要があります。 フィールドスタイル: 行フィールドのスタイルを指定します。これには、フィールドのフォントスタイル、フォントサイズ、色、および重みが含まれます。 フィールドプレフィックス: フィールドの内容、間隔、フォント、フォントサイズ、色、重みを指定します。[フィールドプレフィックス] の左側にある アイコンをクリックすると、[フィールドプレフィックス] の表示を制御できます。 フィールドサフィックス: フィールドサフィックスのコンテンツ、間隔、フォント、フォントサイズ、カラー、および重みを指定します。[フィールドサフィックス] の左側にある アイコンをクリックして、[フィールドサフィックス] の値をコントロールします。 フィールド幅: ラベルに表示されるフィールドの幅。フィールドの適応タイプを含みます。有効な値: [適応] および [固定幅]。適応タイプに基づいてフィールドの幅を設定します。単位: ピクセル。 行の高さの比率: タグの行の高さの比率です。有効値: 1～2。 コンテンツのストローク: 色と重みを含む、タグのコンテンツのストロークスタイルです。[コンテンツのストローク] の左側にある アイコンをクリックして、[コンテンツのストローク] の表示/非表示をコントロールできます。 コンテンツシャドウ: タグのコンテンツシャドウのスタイルです。シャドウカラー、シャドウのぼかしの値、x 方向と y 方向のシャドウオフセット値が含まれます。 [コンテンツシャドウ] の左側にある アイコンをクリックして、[コンテンツシャドウ] の表示/非表示をコントロールできます。
  背景スタイル	フレームアニメーションレイヤー内のタグのバックグラウンドスタイルパラメーターを設定します。[バックグラウンドスタイル] パラメーターの左側にある アイコンをクリックして、[バックグラウンドスタイル] パラメーターの表示と非表示をコントロールします。 背景タイプ: タグの背景のタイプです。有効な値: [ベクター] および [イメージ]。 背景色: タグの背景色を設定します。このパラメーターは、[背景タイプ] を [ベクター] に設定した場合にのみ使用できます。 罫線スタイル: ラベルの罫線スタイルを設定します。罫線の線種、線幅、色を含みます。この機能は、[背景タイプ] に [ベクター] を選択した場合にのみ使用できます。 罫線の角丸: ラベルの罫線の角丸です。単位: ピクセル。このパラメーターは、[背景タイプ] パラメーターを [ベクター] に設定した場合にのみ使用できます。 イメージテンプレート: 背景イメージのテンプレートスタイルを選択します。このパラメーターは、[イメージテンプレート] に [イメージ] を選択した場合にのみ使用できます。 不透明度: 背景イメージの不透明度です。有効値: 0～100。このパラメーターは、[イメージテンプレート] に [イメージ] を選択した場合にのみ使用できます。 コンテンツマージン: タグ内のコンテンツとタグの境界線との間の距離を指定します。

• インタラクティブ: フレームアニメーションレイヤーのインタラクティブ設定項目です。

  • グラフィックインタラクション: プレビューページまたは公開ページでフレームアニメーションをクリックしたときに表示されるグラフィックインタラクションのスタイルです。[グラフィックインタラクション] の左側にある アイコンをクリックして、[グラフィックインタラクション] の表示を制御します。

    サイズスケール: スライダーをドラッグして、アニメーショングラフィックのサイズ範囲を設定します。有効値: 1～2。

• 条件: 条件付きのスタイルの説明です。

  条件付きスタイル: または アイコンをクリックして、条件付きスタイルを追加または削除します。 または アイコンをクリックして、複数の条件付きスタイルの配置スタイルを設定します。 アイコンをクリックして、選択した条件付きスタイル設定をコピーし、条件付きスタイルを追加します。条件付きツリーの設定方法の詳細については、「使用上の注意」をご参照ください。

  • グラフィック: スイッチをオンにすると、スタイルのグラフィック設定項目を設定できます。スイッチをオフにすると、スタイルのグラフィック設定項目を設定できません。

    メトリック	説明
    動的シェイプ	動的イメージスタイルを選択します。[スタイル] の横にあるドロップダウンボックスをクリックして、5 つの組み込みスタイルから 1 つを選択できます。また、ドロップダウンパネルの入力ボックスにフレームアニメーションイメージの URL を入力して、リモートサーバー上のフレームアニメーションイメージを動的イメージとして使用することもできます。入力ボックスの右側にある アイコンをクリックして、ローカルのフレームアニメーションイメージをアップロードして動的イメージとして使用することもできます。
    動的サイズ	この条件での動的イメージの幅と高さを設定します。有効値: 0～400。単位: px。

  • 動的効果: スライダーをドラッグして、この条件でのアニメーションレイヤーの再生速度を設定します。値の範囲は 0 から 2 です。

• カスタムダイアログボックススタイル: アニメーションレイヤーのカスタムダイアログボックスを指定します。

  メトリック	説明
  爆弾スイッチ	スイッチをオンにすると、[クリック] または [ホバー] でポップアップをトリガーできます。
  表示モード	フレームアニメーションレイヤーのポップアップの表示モードです。[クリック] または [ホバー] を選択できます。
  相対オフセット	ポップアップウィンドウの水平および垂直のピクセルオフセットです。有効値: -1000～1000。単位: ピクセル。
  テキストスタイル	ダイアログボックス内のテキストスタイルを設定します。テキストのフォントスタイル、フォントサイズ、色、および重みを含みます。
  Null 値を表示	スイッチをオンにすると、info フィールドがない、または info フィールドが空のオブジェクトで、ポップアップボックスに「データなし」と表示できます。
  ボックススタイル	パディング: ポップアップテキストのコンテンツと、上、下、左、右の辺との間の距離を指定します。 罫線スタイル: ポップアップの罫線の角丸、線幅、および色です。 背景色: ダイアログボックスの背景色を設定します。 投影スタイル: ポップアップの投影のぼかし色、ぼかし半径、X オフセット、および Y オフセットを指定します。 閉じるボタン: スイッチをオンにすると、アニメーションレイヤーのポップアップボックスに閉じるボタンとボタンの色が表示されます。 ポインティングアロー: スイッチをオンにすると、アニメーションレイヤーのポップアップボックスにポインティングアローが表示されます。

データソースパネル

高度なパネル

スイッチをオンにして、ウィジェットインタラクション機能を有効にします。フレームアニメーションポイントをクリックしたり、フレームアニメーションポイントにマウスを移動したりして、データリクエストをトリガーし、一時的な変数をスローして、クリック時またはマウス移動時に異なるエリアのデータを動的に読み込むことができます。デフォルトでは、クリックされたエリアの lng と lat の値が表示されます。詳細については、「コンポーネントインタラクション設定」をご参照ください。

ブループリントインタラクション

1. 左上隅の アイコンをクリックして、[ブループリント] ページに移動します。

2. [レイヤーノード] タブで、ウィジェットをメインキャンバスに追加します。

3. ブループリント設定パラメーターを表示します。

   • イベント

     イベント	説明
     データインターフェイスリクエストが完了したとき	データインターフェイスリクエストが応答され、フィルターによって処理された後、処理済みの JSON データでイベントがトリガーされます。特定のデータ例の詳細については、キャンバスエディターの右側の設定パネルにある [データソース] タブの [データ応答結果] セクションをご参照ください。
     ポイントをクリックしたとき	フレームアニメーションレイヤーのフレームアニメーションポイントがクリックされたときにスローされます。
     マウスが移動したとき	マウスがマップ上のフレームアニメーションポイントに移動したときにイベントをトリガーし、データをスローします。

   • 操作

     操作	説明
     データインターフェイスをリクエスト	この操作は、サーバーデータを再度リクエストするために実行されます。アップストリームのデータ処理ノードまたはレイヤーノードから送信されたデータがパラメーターとして使用されます。たとえば、API データソースが https://api.test で、[データインターフェイスをリクエスト] に渡されるデータが { id: '1'} の場合、最終的なリクエストインターフェイスは https://api.test?id=1 になります。
     データをインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットが再描画のためにインポートされます。サーバーデータを再度リクエストする必要はありません。特定のデータ例の詳細については、キャンバスエディターの右側の設定パネルにある [データソース] タブの [データ応答結果] セクションをご参照ください。
     表示/非表示を切り替え	ウィジェットを表示するか非表示にするかを指定します。パラメーターは不要です。
     表示	ウィジェットを表示します。詳細については、データ例をご参照ください。 { "animationType": "",// アニメーションメソッド。有効値: fade。このパラメーターを指定しない場合、アニメーションは生成されません。 "animationDuration": 1000,// アニメーションの遅延。単位: ms。 "animationEasing": ""// アニメーションカーブ }
     非表示	コンポーネントを非表示にします。詳細については、データ例をご参照ください。 { "animationType": "",// アニメーションメソッド。有効値: fade。このパラメーターを指定しない場合、アニメーションは生成されません。 "animationDuration": 1000,// アニメーションの遅延。単位: ms。 "animationEasing": ""// アニメーションカーブ }
     コンポーネント設定を更新	ウィジェットのスタイル設定は動的に更新されます。[スタイル] パネルで、[設定をクリップボードにコピー] をクリックしてウィジェットの設定データを取得します。その後、ブループリントエディターでデータ処理ノードのスタイルフィールドを変更します。