リージョンドリルダウンヒートレイヤーは基本フラットマップの 1 つのコンポーネントです。 当該レイヤーの設定、データ、インタラクション (ラベル、枠線オプション、インタラクションの効果、位置情報など) を構成することができます。 リージョンドリルダウンヒートレイヤーは、省、直轄市、地級市のコロプレスレイヤーとして使用できます。 ここでは、リージョンドリルダウンヒートレイヤーの設定および当該レイヤーのコンポーネントの使用方法について説明します。
リージョンドリルダウンヒートレイヤーの追加方法および当該レイヤーのパラメーターの設定方法については、「基本フラットマップの設定」をご参照ください。
設定
- ラベル
- [ラベルフィールド]:ドリルダウンエリアのラベルフィールド。 名前は、[データ] タブの [フィールド] の値と一致している必要があります。
- [色]:ラベルの色。 現在のラベルの色を変更する方法については、「カラーピッカー」をご参照ください。
- [影の色] :ラベルの影の色を設定します。
- [フォントファミリ] :ラベルのフォント。
注 システムにインストールされているフォントのみが表示されます。 選択したフォントがシステムにインストールされていない場合は、デフォルトのフォントが表示されます。
- [フォントサイズ] :ラベルのフォントサイズ。
- [塗りつぶしの色] :Minimum、Maximum、No Data パラメーターの値に対応するエリアの色。
- [枠線のオプション]:エリアの枠線の色、太さ、線の種類。
- インタラクションの設定
- [ポイントしたとき] :カーソルをあわせたときにエリアを強調表示するための色。 この効果は、レイヤーのプレビュー時、またはレイヤーのパブリッシュ後にのみ表示されます。
- [ズーム範囲比] :エリアをクリックしたときのズームレベル。
- [ダブルクリックコールバック ID]:ウィジェット間でデータを関連付けるためのパラメーター変数。 コールバック ID は、静的 JSON データのフィールドに対応する必要はありません。 デフォルトでは、ダブルクリックされたエリアの
adcode 値がコールバック ID になっています。 たとえば、浙江省をダブルクリックすると、330000 が返されます。
注 この機能は、 [インタラクション] タブに追加されました。今後は [設定] タブからは削除されます。 DataV の最新バージョンのご利用を推奨します。 DataV の最新バージョンでは、[インタラクション] タブで複数のフィールドを設定可能です。
- [クリックコールバック ID]:ウィジェット間でデータを関連付けるためのパラメーター変数。 コールバック ID は、静的 JSON データの 1 つのフィールドに対応する必要があります。
注 この機能は、 [インタラクション] タブに追加されました。今後は [設定] タブからは削除されます。 DataV の最新バージョンのご利用を推奨します。 DataV の最新バージョンでは、[インタラクション] タブで複数のフィールドを設定可能です。
Data
- デフォルトエリア
- データタブで、 [データソースタイプ] ドロップダウンリストから [静的データ] を選択します。
下図のとおり、デフォルトでは、リージョンドリルダウンヒートレイヤーは中国のすべての省と直轄市のコロプレスレイヤーデータが表示されます。注 エリア adcode の詳細については、「 エリア adcode 、経度、緯度のマッピングテーブル」をご参照ください。
- 地区クラスのコロプレスレイヤーを使用する必要がある場合は、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" } ]
デフォルトデータを修正して、ドリルダウンエリアをカスタマイズすることもできます。 以下の例では、浙江省のカスタムデータの設定方法を示します。
- デフォルトエリアを参照し、adcode の値をデフォルトの静的 JSON データで330000 に変更します。
- 国レベルのデフォルトの area_tree.json ファイルを変更し、浙江省のデータを抽出します。 次の階層関係にあるファイルを設定します: 次図は、area_tree.json ファイルのデータの一部を示します。
重要
- 階層関係を定義したら、 area_id の値をカスタマイズします。 area_id の値は一意である必要があります。
- 返された JSON データの容量が多い場合は、静的データとして設定することはできません。
URL
を介したアクセスのみが可能です。
- area_tree.json ファイルの URL を取得します。
Alibaba Cloud Object Storage Service (OSS) を使用して、area_tree.json ファイルの URL を取得することを推奨します。重要 この URL では、HTTPS とドメイン名 (SSL 証明書取得) を使用する必要があります。
- topo_json ファイルを取得します。
- 浙江省の JSON ファイルをダウンロードするには、ここをクリックします。
- geojson.ioに移動し、ページの左上隅にある を選択して、 JSON ファイルを開きます。 浙江省のデータは、右側の編集ボックスに自動的に貼り付けられます。
- ページの左上隅で 注 http://turfjs.org/docs#unionをクリックし、結合方法を参照して2 つの隣接するエリアのデータを結合し、新しい GeoJSON ボーダーデータを取得します。
を選択し、topo_json ファイルを取得します。
- 下図に示すとおり、浙江省の topo_json ファイルを開きます。 データの先頭に浙江省の adcode (330000) を追加します。 最終的な浙江省の topo_json
ファイルを取得するには、330000 とデータをコロン (
:
) で区切り、330000 とデータを中括弧 ({}
) で囲みます。上記の最終的な topo_json ファイルには、浙江省の地級市のデータのみが含まれています。 地区または郡レベルにドリルダウンする場合、topo_json ファイルのさらなる設定が必要になります。 次の例では、杭州の地区または郡レベルにドリルダウンするデータの設定の仕方を示します。
- ここをクリックして杭州の JSON ファイルをダウンロードし、step bとstep c を参照して、杭州の topo_json ファイルを取得します。
- 下図のように、杭州の topo_json ファイルを開きます。 データの先頭に杭州の adcode (330100) を追加します。 330100 とデータをコロン
(
:
) で区切り、330100とデータを中括弧 ({}
) で囲みます。 - 杭州の新しいデータをコピーし、浙江省の最終的な topo_json データの後に貼り付けます。 浙江省と杭州のデータをコンマ (、) で区切ります。 中括弧 ({})
を使用してオブジェクトを囲みます。
最終的な topo_json ファイルをダウンロードするには、ここをクリックします。
- 最終的な topo_json ファイルの URL を取得します。
step iiiを繰り返して、最終的な topo_json ファイルの URL を取得します。
- リージョンドリルダウンヒートレイヤーの [カスタムエリア] セクションを設定します。
[カスタムエリア] セクションのデフォルト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 ルールの設定」をご参照ください。 - プレビューが期待どおりに機能している場合、[公開] をクリックしてプロジェクトを公開します。
同様の方法で、別の省や地級市のドリルダウンエリアデータを設定できます。 階層関係は次のとおりです:
ドリルダウンするには、下位レベルの adcode やロケーションデータなどのエリアデータが上位レベルに含まれている必要があります。 - [マッピングデータ] の詳細については、「 コロプレスレイヤーの使用ガイド」をご参照ください。
インタラクション
- [リージョンのクリック]:
[有効化] のチェックボックスをオンにしてコンポーネント間のインタラクションを有効化します。 [リージョンドリルダウンヒートレイヤー] のコンポーネントはインタラクションの設定に対応しています。 対象のエリアをクリックすると、リクエストがトリガーされ、エリアのデータを読み込みます。
エリアをクリックすると、そのエリアの adcode の値が自動的に表示されます。 詳細については、「ティッカーボードのコールバック ID の設定」をご参照ください。
- [リージョンのダブルクリック]:
[有効化] チェックボックスをオンにして、コンポーネント間のインタラクションを有効化します。 [リージョンドリルダウンヒートレイヤー] のコンポーネントはインタラクティブの設定に対応しています。 対象のエリアをクリックすると、リクエストがトリガーされ、エリアのデータを読み込みます。
エリアをクリックすると、そのエリアの adcode の値が自動的に表示されます。 詳細については、 「ティッカーボードのコールバック ID の設定」をご参照ください。
注 コールバック ID は、静的 JSON データのフィールドに対応する必要はありません。 デフォルトでは、ダブルクリックされたエリアの adcode の値がコールバック ID になっています。 たとえば、浙江省をダブルクリックすると、330000 が返されます。