DataV:マップコンテナ

設定

• コンポーネント

  • コンポーネントを追加します。

    1. キャンバスエディターで、地球儀ウィジェットをクリックし、[設定] タブに移動します。

    2. [コンポーネント] の左側にあるアイコンをクリックします。

    3. 1つ以上のコンポーネントを選択し、[コンポーネントの追加] をクリックします。

       コンポーネントを追加すると、コンポーネントの下に表示されます。

    4. 追加したコンポーネントをクリックし、そのパラメータを設定します。

    5. 設定が完了したら、アイコンをクリックしてGlobeの [設定] タブに戻り、他のコンポーネントを設定します。

  • コンポーネントをコピー、編集、または削除する: コンポーネントの上にポインタを移動し、アイコンをクリックしてコンポーネントをコピーします。 アイコンをクリックしてコンポーネントを編集します。 アイコンをクリックして、コンポーネントを削除します。

• [設定の検索]: キャンバスエディターの右側のパネルで、[設定] タブをクリックし、右上隅の [設定の検索] をクリックします。 検索ボックスに必要な設定項目を入力し、検索アイコンをクリックして設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「」をご参照ください。

• Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックすると、ウィジェットの幅と高さを比例調整できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。

• 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。

• 回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。

  • 回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。

  • アイコンの黒い点をドラッグします。

  • アイコンをクリックして、ウィジェットを水平に反転します。

  • アイコンをクリックして、ウィジェットを垂直に反転します。

• 不透明度: ウィジェットの不透明度。 有効な値: 0と1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1

• グローバルオプション

  • カメラ回転

    パラメーター	説明
    水平	地球上のカメラ視点の経度。
    垂直	地球上のカメラ視点の緯度。

  • カメラセンター: x、y、z軸に対する地球のオフセット。

  • カメラ距離: カメラと地球の間の距離。 値を増やすと地球は小さくなります。

  • 自動回転速度: 地球の回転速度。 有効な値は 0～1 です。 値が0の場合、回転は停止します。

  • マップインタラクション: マップインタラクションを有効にするかどうかを指定します。 マップ操作を有効にすると、プレビューまたは公開ページでマップをドラッグ、ズームイン、ズームアウトできます。

  • カルーセルオプション

    パラメーター	説明
    カルーセル	[データ] タブで設定した経度と緯度を順番に回転させるかどうかを指定します。
    期間	アニメーションが経度と緯度のペアから別のペアに切り替わるのに必要な時間。
    遅延	アニメーションが1組の経度と緯度に残っている期間。

Data

3Dグローブウィジェットの [データ] タブには、[位置カルーセル] と [データ応答結果] が含まれます。

上の図のサンプルコード:

[
  {
    "lat": 37.77,
    "lng": -122.41
  },
  {
    "lat": 37.56,
    "lng": -77.42
  },
  {
    "lat": 50.1,
    "lng": 8.63
  },
  {
    "lat": 1.58,
    "lng": 103.79
  },
  {
    "lat": 22.27,
    "lng": 114.16
  },
  {
    "lat": 39.9,
    "lng": 116.4
  },
  {
    "lat": 31.23,
    "lng": 121.47
  },
  {
    "lat": 35.17,
    "lng": 134.03
  },
  {
    "lat": -35.38,
    "lng": 149.25
  }
]

相互連携

このウィジェットはインタラクションイベントをサポートしていません。

ブループリントエディターでのインタラクション設定

1. キャンバスエディターで、3Dグローブウィジェットを右クリックし、[ブループリントエディターに追加] を選択します。

2. ページの左上隅にあるアイコンをクリックします。

3. ブループリントエディターで、[追加されたノード] ペインで [グローブ] をクリックします。 キャンバス上でウィジェットのパラメータを設定できます。

   • イベント

     [Positions Carousel Requestの完了時]: 3DグローブウィジェットのデータがAPIによって返され、フィルターによって処理されると、このイベントがトリガーされてJSON形式のデータが渡されます。 詳細については、「データの例」をご参照ください。

     [Positions Carousel Requestの失敗時]: データインターフェイス要求が失敗した場合 (ネットワークの問題やインターフェイスのエラーなどが原因である可能性があります) 、イベントが返されてフィルターによって処理され、処理されたJSON形式のデータもスローされます。 特定のデータ例の詳細については、キャンバスエディターの [データ] タブの [データ応答結果] セクションをご参照ください。

   • Action

     Action	説明
     要求位置カルーセル	このアクションは、上流のデータ処理ノードまたはウィジェットによって渡されたパラメーターを受け取り、サーバーにデータを要求します。 たとえば、3DグローブウィジェットはAPIデータソースhttp:// api.testを使用し、[位置の要求] カルーセル] アクションに渡されるデータは { id: '1'} です。 その結果、はhttp:// api.test? をします。 id=1 APIを呼び出してデータを要求します。
     インポート位置カルーセル	このアクションは、APIからデータをインポートしてウィジェットをレンダリングし、サーバーからデータを要求しません。 詳細については、「データの例」をご参照ください。
     ウィジェット設定の更新	このアクションは、ウィジェットのスタイル設定を動的に更新します。 キャンバスエディターの [設定] タブで、[設定をクリップボードにコピー] をクリックする必要があります。 次に、ブループリントエディターのデータ処理ノードのボックスにデータを貼り付け、フィールド値を設定します。
     表示	このアクションはウィジェットを表示し、パラメーター入力は必要ありません。
     非表示	このアクションはウィジェットを非表示にし、パラメーター入力は必要ありません。
     非表示 /表示	ウィジェットは非表示または表示されます。
     移動	このアクションは、ウィジェットを指定された位置に移動します。 例： { // The type of the position. Valid values: to (absolute position) and by (relative position). Default value: to. "positionType": "to", // The position that consists of the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation settings. "animation": { "enable": false, // The animation duration. "animationDuration": 1000, // The animation effect. Valid values: linear, easeInOutQuad, and easeInOutExpo. "animationEasing": "linear" } }