リージョンドリルダウンヒートレイヤーは基本フラットマップの 1 つのコンポーネントです。 当該レイヤーの設定、データ、インタラクション (ラベル、枠線オプション、インタラクションの効果、位置情報など) を構成することができます。 リージョンドリルダウンヒートレイヤーは、省、直轄市、地級市のコロプレスレイヤーとして使用できます。 ここでは、リージョンドリルダウンヒートレイヤーの設定および当該レイヤーのコンポーネントの使用方法について説明します。

リージョンドリルダウンヒートレイヤーの追加方法および当該レイヤーのパラメーターの設定方法については、「基本フラットマップの設定」をご参照ください。

設定

[設定] タブの構成
  • ラベル
    • [ラベルフィールド]:ドリルダウンエリアのラベルフィールド。 名前は、[データ] タブの [フィールド] の値と一致している必要があります。
    • [色]:ラベルの色。 現在のラベルの色を変更する方法については、「カラーピッカー」をご参照ください。
    • [影の色] :ラベルの影の色を設定します。
    • [フォントファミリ] :ラベルのフォント。
      システムにインストールされているフォントのみが表示されます。 選択したフォントがシステムにインストールされていない場合は、デフォルトのフォントが表示されます。
    • [フォントサイズ] :ラベルのフォントサイズ。
  • [塗りつぶしの色] :Minimum、Maximum、No Data パラメーターの値に対応するエリアの色。
  • [枠線のオプション]:エリアの枠線の色、太さ、線の種類。
  • インタラクションの設定
    • [ポイントしたとき] :カーソルをあわせたときにエリアを強調表示するための色。 この効果は、レイヤーのプレビュー時、またはレイヤーのパブリッシュ後にのみ表示されます。
    • [ズーム範囲比] :エリアをクリックしたときのズームレベル。
    • [ダブルクリックコールバック ID]:ウィジェット間でデータを関連付けるためのパラメーター変数。 コールバック ID は、静的 JSON データのフィールドに対応する必要はありません。 デフォルトでは、ダブルクリックされたエリアの adcode 値がコールバック ID になっています。 たとえば、浙江省をダブルクリックすると、330000 が返されます。
      この機能は、 [インタラクション] タブに追加されました。今後は [設定] タブからは削除されます。 DataV の最新バージョンのご利用を推奨します。 DataV の最新バージョンでは、[インタラクション] タブで複数のフィールドを設定可能です。
    • [クリックコールバック ID]:ウィジェット間でデータを関連付けるためのパラメーター変数。 コールバック ID は、静的 JSON データの 1 つのフィールドに対応する必要があります。
      この機能は、 [インタラクション] タブに追加されました。今後は [設定] タブからは削除されます。 DataV の最新バージョンのご利用を推奨します。 DataV の最新バージョンでは、[インタラクション] タブで複数のフィールドを設定可能です。

Data

  • デフォルトエリア
    1. データタブで、 [データソースタイプ] ドロップダウンリストから [静的データ] を選択します。
      下図のとおり、デフォルトでは、リージョンドリルダウンヒートレイヤーは中国のすべての省と直轄市のコロプレスレイヤーデータが表示されます。リージョンドリルダウンヒートレイヤーのデフォルトエリアのデータ
      エリア adcode の詳細については、「 エリア adcode 、経度、緯度のマッピングテーブル」をご参照ください。
    2. 地区クラスのコロプレスレイヤーを使用する必要がある場合は、adcode の値を修正します。
      たとえば、浙江省の adcode の値 (330000) を取得するには、「エリア adcode 、経度、緯度のマッピングテーブル」をご参照ください。 リージョンドリルダウンヒートレイヤーでは浙江省のあらゆる地級市を特定でき、地区クラスのコロプレスレイヤーとして使用することも可能です。 この例を参考に別の省や直轄市のコロプレスレイヤーデータを設定できます。浙江省のドリルダウンヒートレイヤーデータ上図のサンプル JSON コードは以下のとおりです。
      [
        {
          "adcode": 330000
        }
      ]
  • [カスタムエリア] には、[area_tree] [area_topo_json] の 2 つのフィールドがあります。カスタムエリア
    デフォルトでは、DataV は中国のすべての省および直轄市の URL を次の階層関係で表示します。 > 省または直轄市 > 地級市 > 地区または郡。例は以下のとおりです。
    [
      {
        "area_tree": "https://sh-conf.oss-cn-shanghai.aliyuncs.com/map/area_drill/area_tree.json",
        "area_topo_json": "https://sh-conf.oss-cn-shanghai.aliyuncs.com/map/area_drill/china.topo.new.json"
      }
    ]

    デフォルトデータを修正して、ドリルダウンエリアをカスタマイズすることもできます。 以下の例では、浙江省のカスタムデータの設定方法を示します。

    1. デフォルトエリアを参照し、adcode の値をデフォルトの静的 JSON データで330000 に変更します。カスタムデータの設定
    2. 国レベルのデフォルトの area_tree.json ファイルを変更し、浙江省のデータを抽出します。 次の階層関係にあるファイルを設定します: 省または管轄市 > 地級市 > 地区または郡 次図は、area_tree.json ファイルのデータの一部を示します。国レベルの area_tree.json ファイル
      重要
      • 階層関係を定義したら、 area_id の値をカスタマイズします。 area_id の値は一意である必要があります。
      • 返された JSON データの容量が多い場合は、静的データとして設定することはできません。 URL を介したアクセスのみが可能です。
      上図に示されている area_tree.json ファイル全体をダウンロードするには、ここをクリックします。
    3. area_tree.json ファイルの URL を取得します。
      Alibaba Cloud Object Storage Service (OSS) を使用して、area_tree.json ファイルの URL を取得することを推奨します。
      重要 この URL では、HTTPS とドメイン名 (SSL 証明書取得) を使用する必要があります。
    4. topo_json ファイルを取得します。
      1. 浙江省の JSON ファイルをダウンロードするには、ここをクリックします。
      2. geojson.ioに移動し、ページの左上隅にある[オープン] > [ファイル]を選択して、 JSON ファイルを開きます。 浙江省のデータは、右側の編集ボックスに自動的に貼り付けられます。
      3. ページの左上隅で [保存] > [TopoJSON] を選択し、topo_json ファイルを取得します。 浙江省の topo_json ファイルの取得
        http://turfjs.org/docs#unionをクリックし、結合方法を参照して2 つの隣接するエリアのデータを結合し、新しい GeoJSON ボーダーデータを取得します。
      4. 下図に示すとおり、浙江省の topo_json ファイルを開きます。 データの先頭に浙江省の adcode (330000) を追加します。 最終的な浙江省の topo_json ファイルを取得するには、330000 とデータをコロン (:) で区切り、330000 とデータを中括弧 ( {} ) で囲みます。topo_json ファイル

        上記の最終的な topo_json ファイルには、浙江省の地級市のデータのみが含まれています。 地区または郡レベルにドリルダウンする場合、topo_json ファイルのさらなる設定が必要になります。 次の例では、杭州の地区または郡レベルにドリルダウンするデータの設定の仕方を示します。

      5. ここをクリックして杭州の JSON ファイルをダウンロードし、step bstep c を参照して、杭州の topo_json ファイルを取得します。
      6. 下図のように、杭州の topo_json ファイルを開きます。 データの先頭に杭州の adcode (330100) を追加します。 330100 とデータをコロン (:) で区切り、330100とデータを中括弧 ( {} ) で囲みます。 杭州の topo_json ファイル
      7. 杭州の新しいデータをコピーし、浙江省の最終的な topo_json データの後に貼り付けます。 浙江省と杭州のデータをコンマ (、) で区切ります。 中括弧 ({}) を使用してオブジェクトを囲みます。杭州の topo_json ファイルの追加

        最終的な topo_json ファイルをダウンロードするには、ここをクリックします。

    5. 最終的な topo_json ファイルの URL を取得します。

      step iiiを繰り返して、最終的な topo_json ファイルの URL を取得します。

    6. リージョンドリルダウンヒートレイヤーの [カスタムエリア] セクションを設定します。
      [カスタムエリア] セクションのデフォルトURL を step iii と step v で取得した 2 つの URL に置き換え、[データ応答を参照] をクリックしてマップの効果を表示します。 リージョンドリルダウンヒートレイヤーの [カスタムエリア] セクションの設定上図のサンプルコードは以下のとおりです。
      [
        {
          "area_tree": "https://datav-map-test.oss-cn-hangzhou.aliyuncs.com/zhejiang_area_tree.json",
          "area_topo_json": "https://datav-map-test.oss-cn-hangzhou.aliyuncs.com/zhejiang.topojson"
        }
      ]
      下図にプレビューを示します。 浙江省のマップで「杭州」をダブルクリックすると、杭州のマップに移動します。 任意の空白スペースをダブルクリックして、浙江省のマップに戻ることができます。プレビュー
      重要 カスタムドリルダウンエリアが表示されない場合、URL にクロスリージョンエラーが含まれている可能性があります。 OSS クロスリージョン設定でこの問題を解決することができます。 詳細については、「CORS ルールの設定」をご参照ください。
    7. プレビューが期待どおりに機能している場合、[公開] をクリックしてプロジェクトを公開します。

    同様の方法で、別の省や地級市のドリルダウンエリアデータを設定できます。 階層関係は次のとおりです: > 県または直轄市 > 地級市 > 地区または郡 ドリルダウンするには、下位レベルの adcode やロケーションデータなどのエリアデータが上位レベルに含まれている必要があります。

  • [マッピングデータ] の詳細については、「 コロプレスレイヤーの使用ガイド」をご参照ください。

インタラクション

  • [リージョンのクリック]:

    [有効化] のチェックボックスをオンにしてコンポーネント間のインタラクションを有効化します。 [リージョンドリルダウンヒートレイヤー] のコンポーネントはインタラクションの設定に対応しています。 対象のエリアをクリックすると、リクエストがトリガーされ、エリアのデータを読み込みます。

    エリアをクリックすると、そのエリアの adcode の値が自動的に表示されます。 詳細については、「ティッカーボードのコールバック ID の設定」をご参照ください。

  • [リージョンのダブルクリック]:

    [有効化] チェックボックスをオンにして、コンポーネント間のインタラクションを有効化します。 [リージョンドリルダウンヒートレイヤー] のコンポーネントはインタラクティブの設定に対応しています。 対象のエリアをクリックすると、リクエストがトリガーされ、エリアのデータを読み込みます。

    エリアをクリックすると、そのエリアの adcode の値が自動的に表示されます。 詳細については、 「ティッカーボードのコールバック ID の設定」をご参照ください。

    コールバック ID は、静的 JSON データのフィールドに対応する必要はありません。 デフォルトでは、ダブルクリックされたエリアの adcode の値がコールバック ID になっています。 たとえば、浙江省をダブルクリックすると、330000 が返されます。