リージョナルサーマルレイヤー (V2.x) - DataV - Alibaba Cloud ドキュメントセンター

局所的な熱層は、基本フラットマップのサブコンポーネントである。地域ラベル、色、エッジ、マウスインタラクションイベント、位置情報など、独立したスタイル、データ、インタラクション構成をサポートしています。地域情報を熱地域の形で表示できます。このトピックでは、コロプレスレイヤーの設定項目について説明します。

重要

現在のバージョンはV2.xです。 V1.xの詳細については、「Regional thermal layer (V1.x) 」をご参照ください。

コンポーネントの [Choropleth Layer] をクリックします。 コロプレスレイヤーの [設定] タブが表示されます。

説明

ComponentsにChoropleth Layerが含まれていない場合は、Choropleth Layerコンポーネントを追加します。詳細については、「」をご参照ください。

パラメーター

Settings

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

エリアスタイル: エリアヒートレイヤーのエリア塗りつぶしの色とエッジスタイルのパラメーターを設定します。

パラメーター	機能
塗りつぶしの色	データの最大値、最小値、および空の値に対応する領域の色。
エッジスタイル	地域サーマルレイヤーの各エリアのエッジの色、太さ、ラインタイプ。

ラベル: リージョナルヒートレイヤーの領域のラベル表示フィールドとテキストスタイルパラメーターを設定します。 ラベルの左側にある Eye icon アイコンをクリックして、ラベルの表示を制御します。

パラメーター	機能
表示されたフィールド	リージョンのラベリングフィールド。ラベリングフィールドは、地理データのフィールド名と一致する必要があります。
テキストスタイル	リージョナルサーマルレイヤーの各領域のテキストラベルのフォントファミリ、テキストの太さ、フォントサイズ、色、影の色の詳細については、「カラーピッカーの説明」をご参照ください。説明システムにインストールされているフォントのみが表示されます。選択したフォントがシステムにインストールされていない場合は、デフォルトのフォントが表示されます。

ボックス: [プレビュー] または [公開] ページで、セクションに表示されるボックススタイルをクリックします。 ポップアップボックスの左側にある Eye icon アイコンをクリックして、ポップアップボックスの表示と非表示を制御します。

説明

ポップアップ機能を有効にするには、まずinfoフィールドを設定する必要があります。

infoフィールド: infoフィールドをオンにすると、infoフィールドをポップアップコンテンツとして設定します。このフィールドのHTMLタグを設定できます。 infoフィールドをオフにすると、ポップアップコンテンツはnameおよびvalueフィールドと互換性があります。
イベントタイプ: ダイアログボックスに表示されるイベントのタイプを選択します。

設定オプション: ポップアップボックスの設定項目の内容。 [デフォルト] または [カスタム] を選択できます。

親コンテナのデフォルト: システムのデフォルトスタイル。

カスタム設定: テキストスタイル、線の高さの比率、コーナーの半径などのパラメーターをカスタマイズできます。

パラメーター	機能
テキストスタイル	ダイアログボックスでテキストのフォント、太さ、フォントサイズ、色を設定します。詳細については、「カラーピッカーの手順」をご参照ください。
列の高さの比率	箇条書きボックス形式の行の高さの比率の値を設定します。
フィレット半径	ポップアップボックスのフィレット半径を設定します。値が大きいほど、角が丸くなります。
マージン	ダイアログボックス内のテキストとダイアログボックスの4辺の間の距離を設定します。
背景色	ダイアログボックスの背景色を設定します。
閉じるボタン	閉じたポップアップボタンの色とサイズ、およびボタン間の距離を上から右に設定します。

インタラクティブ設定

パラメーター	機能
ホバースタイル	ホバースタイルの左側にあるアイコンをクリックして、ホバーインタラクション機能を有効または無効にします。このスイッチをオンにすると、ポインタを上に移動したときに、塗りつぶしの色、エッジの色、および領域の厚さを設定できます。効果は、プレビューまたは公開時にのみ表示できます。
クリックしてフォーカス	左側のアイコンをクリックして、クリックしてフォーカス操作機能を有効または無効にします。有効にすると、エリアをクリックして、エリアの位置に基づいて特定の範囲の比率にフォーカスします。効果は、プレビューまたは公開時にのみ表示できます。

フィルタリングテーブルのメタデータ。

Regional Thermal Layer Data Panel v2.x

Geo-boundary geoJSON data interface: geo-boundary geoJSON data interfaceを設定して、抽出したリージョンgeoJSON境界データをDataVに適用できます。設定方法は次のとおりです。
1. データ抽出。
  GeoJSONを使用して、行政区画の境界にウィジェットDataV.GeoAtlasを抽出します。最下位レベルでは、地区および郡レベルの境界データを抽出できます。地域のアドコードは、地方および都市のアドコードと経度および緯度のマッピングテーブルを参照できます。抽出方法は以下の通りである。
  - 地方: デフォルトでは、地域の熱層は全国的に表示され、各州および市町村の地域の熱層データを直接使用できます。
  - 県レベル: 浙江省のすべての県レベルの都市の境界データを例に取ります。次の図は、抽出方法を示しています。
  - 地区と郡レベル: 例として、趙清市の範囲内のすべての地区と郡の境界データを取ります。抽出方法は次の図に示されています。
  - タウンシップストリートとカスタムリージョン: タウンシップストリートのデータを自分で取得する必要があります。必要に応じてリージョンの境界をカスタマイズします。たとえば、中国本土は、東部地域、西部地域、中国南部地域、中国北部地域、中国中部地域の5つの地域に分割でき、対応する州の境界データをマージすることで取得できます。
2. データアプリケーション。
  抽出されたデータを次のようにDataVに設定します。
  1. Regional Thermal Layerコンポーネントの [データ] タブで、[Geo Boundary Geojson Data Interface] をクリックします。
  2. [データソースの設定] をクリックします。 [データソースの設定] パネルで、[データソースタイプ] を [API] に設定します。
  3. 次の図に示すように、抽出したJSON APIをデータ入力領域に貼り付けます。
    上の図では、Zhaoqing内のサブエリアの境界情報が抽出されています。サンプルAPIは次のとおりです。
```
https://geo.datav.aliyun.com/areas/bound/441200_full.json
```
  4. ダッシュボードにプロジェクトを公開します。設定されたリージョンサーマルレイヤーを表示できます。
データ構成中に、領域テキストラベルがオフセットされてもよい。解決策は次のとおりです。
- リージョンサーマルレイヤーのバージョンを確認してください。現在、利用可能な地域熱層コンポーネントには、地域熱層v0.2.4以降が含まれます。以前のバージョンのリージョナルサーマルレイヤーを使用する場合は、レイヤーを削除して再度追加する必要があります。
- GeoJSON抽出ツールのデータが更新されました。新しいGeoJSONデータファイルを使用する必要があります。
- 1つ以上のパラメーターの値を変更します。
  たとえば、郡レベルでの趙慶市のGeoJSONデータは、高yao地区のテキストでオフセットでマークされています。
  1. DataV.GeoAtlas boundary generatorツールを使用して、ZhaoqingのGeoJSONデータファイルを地区および郡レベルでアップロードし、プロパティシートパネルにcustomLabelPositionプロパティパラメーターを追加します。
    [プロパティシート] パネルで、[ハイライト] セクションでパラメーターを見つけ、customLabelPosition属性列を編集して追加し、カスタム "customLabelPosition": [112.500801,22.927694] プロパティを追加します。
    図1. ウィジェットの属性の変更
    図2. 変更されたプロパティの表示
  2. 変更内容を保存したら、GeoJSONファイルをローカルコンピューターにダウンロードし、GeoJSONファイルをサーバーまたはOSSにアップロードして新しいAPIを生成します。
  3. 左側のナビゲーションウィンドウで、[Regional Thermal Layer] > [Data] > [Geo-Boundary GeoJSON Interface] を選択します。
  4. [データソースの設定] をクリックします。 [データソースの設定] パネルで、[データソースタイプ] を [API] に設定します。
  5. 新しく生成されたJSON API URLをデータ入力フィールドに貼り付けます。設定が完了すると、ハイライトラベルが期待どおりに表示されます。

熱値インターフェイス

ヒート値データインターフェイスを設定することで、リージョナルヒート層のスタイルをカスタマイズできます。リージョナルサーマルレイヤは、データ優先レンダリングをサポートする。

Regional Thermal Layerコンポーネントの [データ] タブで、[Thermal Value Data Interface] をクリックします。

[データソースの設定] をクリックします。 [データソースの設定] パネルで、[データソースタイプ] を [静的データ] に設定します。下表に、各パラメーターを説明します。 Heat Value Data Interface v2.x

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

[
  {
    "area_id": "710000" 、
    "value": 64
  },
  {
    "area_id": "330000" 、
    "value": 388
  },
  {
    "area_id": "150000" 、
    "value": 82
  },
  {
    "area_id": "210000" 、
    "value": 478
  },
  {
    "area_id": "220000" 、
    "value": 491
  },
  {
    "area_id": "230000" 、
    "value": 849
  },
  {
    "area_id": "310000" 、
    "value": 273
  },
  {
    "area_id": "320000" 、
    "value": 656
  },
  {
    "area_id": "340000" 、
    "value": 157
  },
  {
    "area_id": "350000" 、
    "value": 764
  },
  {
    "area_id": "360000" 、
    "value": 797
  },
  {
    "area_id": "370000" 、
    "value": 337
  },
  {
    "area_id": "410000" 、
    "value": 32
  },
  {
    "area_id": "420000" 、
    "value": 225
  },
  {
    "area_id": "430000" 、
    "value": 693
  },
  {
    "area_id": "440000" 、
    "value": 19
  },
  {
    "area_id": "450000" 、
    "value": 141
  },
  {
    "area_id": "460000" 、
    "value": 906
  },
  {
    "area_id": "650000" 、
    "value": 904
  },
  {
    "area_id": "810000" 、
    "value": 526
  },
  {
    "area_id": "820000" 、
    "value": 407
  }
]

表1. 説明

項目	説明
area_id	リージョンのアドコード番号。DataV.GeoAtlasで取得できます。
name	リージョン名です。
値	エリアの値。これは、対応する領域の色を制御するために、設定パネルの塗りつぶし色の最大値、最小値、およびデータ設定項目の値なしで使用できます。説明 16 進数のカラー値の範囲は、データソースの value プロパティの値の範囲に基づいて計算されます。
info	オプションです。ポップアップウィンドウの内容。

データソースでは、strokeColor (ラインカラー) 、weight (ライン幅) 、dashArray (点線) 、fillColor (フィルカラー) などのフィールドを設定することもできます。
マップ内の対応する領域は、設定したパラメーターに従ってレンダリングされます。次の図に示すように、fillColorはred、#fff000、rgba(0,256、0,0) 形式でパラメーターを設定できます。

表1. パラメーター

パラメーター	説明
制御モード	スイッチをオンにすると、ウィジェットの初期化時にデータが要求されません。データリクエストは、コールバックIDまたはBlueprint Editorで設定されたメソッドに基づいてのみトリガーされます。スイッチをオフにすると、データ要求が自動的にトリガーされます。デフォルトでは、スイッチはオフになっています。
自動データ要求	[自動データ要求] チェックボックスをオンにすると、動的ポーリングを有効にし、ポーリング間隔を手動で指定できます。このチェックボックスをオンにしないと、データは自動的に要求されません。手動でページを更新してデータを要求するか、Blueprint EditorまたはコールバックIDイベントを使用してデータ要求をトリガーする必要があります。
データソース	キャンバスエディターの右側のパネルで、[データ] タブをクリックします。 [静的データ] の横にある [設定] をクリックします。 [Configure Datasource] パネルで、[data source Type] ドロップダウンリストからデータソースを選択します。コードエディターでデータクエリのコードを入力し、[データ応答のプレビュー] をクリックしてデータソースの応答をプレビューし、応答を表示します。詳細については、「資産データの設定」をご参照ください。
データフィルター	[データフィルタ] チェックボックスをオンにすると、データ構造の変換、データのフィルタリング、および簡単な計算を実行できます。 [フィルターの追加] の横にあるプラス記号 (+) をクリックすると、表示されるエディターでデータフィルターのスクリプトを設定できます。詳細については、「データフィルターの使用」をご参照ください。
データ応答結果	データ要求に対する応答。データソースが変更された場合は、[データ応答結果] の横にあるアイコンをクリックして、データ応答をリアルタイムで表示できます。

相互連携

ウィジェット間のインタラクションを有効にするには、[有効化] チェックボックスをオンにします。 Regional Thermal Layerコンポーネントには、インタラクティブな構成があります。エリアをクリックするか、エリアにマウスを移動するか、エリアからマウスを移動すると、データ要求がトリガーされ、コールバック値がスローされます。この方法では、エリアをクリックしたり、エリアにマウスを移動したり、エリアからマウスを移動したりすると、さまざまなエリアのデータが動的に読み込まれます。デフォルトでは、クリックしたリージョンのarea_id値が返されます。詳細については、「ウィジェットのコールバックIDの設定」をご参照ください。

Blueprint Editorでのインタラクションの設定

キャンバスエディターで、基本フラットマップウィジェットの [リージョナルサーマルレイヤー] の横にあるアイコンをクリックします。
ページの左上隅にあるアイコンをクリックします。

ブループリントエディターで、[追加されたノード] ペインで [Choropleth Layer] をクリックします。キャンバス上のコロプレスレイヤーのパラメーターを設定できます。 Regional Thermal Layer Blueprint Editor Parameters v2.x

イベント

イベント	説明
geo-boundary geojsonデータインターフェイス要求が完了したとき	geo-boundary geojsonデータインターフェイス要求の後にスローされるイベントが返され、フィルターによって処理されます。また、処理されたJSON形式のデータをスローします。特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
熱値データインタフェース要求が完了したとき	発熱量データインターフェイス要求の後にスローされるイベントが返され、フィルターによって処理されます。また、処理されたJSON形式のデータをスローします。特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
geo-boundary geojsonデータインターフェイス要求が失敗した場合	地理的に制限されたgeojsonデータインターフェイス要求が失敗した場合 (要求の失敗はネットワークの問題またはインターフェイスのエラーが原因である可能性があります) 、イベントが返され、フィルターによって処理され、処理されたJSONデータもスローされます。特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
熱値データインターフェイス要求が失敗した場合	発熱量データインターフェース要求が失敗したときに返されるイベント (要求の失敗はネットワークの問題またはインターフェースエラーが原因である可能性があります) 、フィルターによって処理されます。イベントは、処理されたJSONデータもスローします。特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
リージョンをクリックしたとき	リージョナルサーマルレイヤーの領域がクリックされたときにスローされます。
マウスをリージョンに移動してトリガー	マウスがエリアヒートレイヤーのエリアブロックに移動すると、イベントがトリガーされ、データがスローされます。
マウスがリージョン外に移動したときのトリガー	エリア・ヒート・レイヤーのエリア・ブロックからマウスが移動すると、イベントがトリガーされ、データがスローされます。

ポリシーアクション

Action	説明
geo-boundary geojson data interfaceのリクエスト	このアクションは、サーバーデータを再度要求するために実行されます。アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。たとえば、APIデータソースが`http:// api.test`で、要求geo-boundary geojson data interfaceに渡されるデータが `{ id: '1'}` の場合、最終的な要求インターフェイスは`http:// api.test?id=1`です。
リクエスト熱値インターフェイス	このアクションは、サーバーデータを再度要求するために実行されます。アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。たとえば、APIデータソースが`http:// api.test`で、Request Heat Value data Interfaceに渡されるデータが `{ id: '1'}` の場合、最終的なリクエストインターフェイスは`htp:// api.test?id=1`です。
geo-boundary geojsonデータインターフェイスのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。サーバーデータを再度リクエストする必要はありません。特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
热価データのインポート	ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。サーバーデータを再度リクエストする必要はありません。特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
表示	ウィジェットは、パラメータを指定する必要なしに表示されます。
非表示	ウィジェットは、パラメータを指定する必要なしに非表示になります。