注: 以下の翻訳の正確性は検証されていません。AIPを利用して英語版の原文から機械的に翻訳されたものです。
Mapウィジェットは、オブジェクトセットまたはオブジェクトデータを構成可能なインタラクティブな地理空間ビジュアライゼーションとして表示します。
これらのマップビジュアライゼーションは、次の2種類のレイヤーで構成されています。
Mapウィジェットは、MapboxGL ↗ を使用してマップをレンダリングします。ユーザーのブラウザでWebGLがサポートされていない場合、MapウィジェットはLeaflet ↗を使用してレンダリングされます。
Mapウィジェットは、ベースマップの画像の主なソースとしてMapboxを使用し、Mapboxをプロキシできない安全なネットワーク向けに「Internal」スタイル(ベースマップ画像のカスタムソース)をサポートします。ウェブマップ技術の詳細については、Mapbox documentation ↗をご覧ください。
以下のスクリーンショットは、さまざまなレイヤータイプを表示するように構成されたMapウィジェットの例を示しています。
Mapウィジェットでは、オーバーレイレイヤーがマップのベースレイヤーの上にポイントやシェイプとしてデータを表示します。Mapウィジェットには以下のタイプのオーバーレイレイヤーがあります。
Pointレイヤーは、ジオハッシュプロパティ(緯度経度ペアの形で保存される)によってプロットされる地図上の個々のオブジェクトをポイントやマーカーで表現します。ポイントの色、アイコンタイプ、およびサイズは、プロットされるオブジェクトのプロパティに基づいてスタイリングできます。
構成情報については、以下のconfigure point layersセクションを参照してください。
例:利用可能な病院ベッド数によって色分けされた、病院の場所を示す地図。
Clusterレイヤーは、ジオハッシュの位置プロパティに基づいた大規模なオブジェクトセットに最適です。クラスターはポイントに似ていますが、各オブジェクトごとに単一のマーカーをプロットする代わりに、地理的な近接性に基づいてオブジェクトをクラスターに集約し、クラスターのサイズや色を構成して、指定されたエリア内のオブジェクトの数(または地域内のオブジェクト全体のプロパティの合計や平均などの他の集計関数)を表現します。
構成情報については、以下のconfigure cluster layersセクションを参照してください。
例:国内の気象観測所の一般的な地理的分布を示す地図。
Mapウィジェットのchoroplethレイヤーは、国や州などの地域を表示し、その地域を表すオブジェクトの属性や集計に基づいて色分けします。これにより、異なる地域全体の変動やパターンを視覚化し、これらの値が時間と共にどのように変化するかを見ることができます。
構成情報については、以下のconfigure choropleth layersセクションを参照してください。
FunctionsでH3六角形のカスタム集計をサポートするために、choroplethレイヤーを使用してH3六角形を個々の地域としてマッピングすることもできます。以下のconfigure choropleth layers for H3セクションを参照してください。
例:各州の人口密度によって色分けされた州の地図。
Line segmentレイヤーは、2つのポイントを結ぶ線分として個々のオブジェクトをプロットします。
構成情報については、以下のconfigure line segment layersセクションを参照してください。
例:出発空港から到着空港までのフライトルートを線で結んだ地図。
Staticレイヤーは、動的にフィルター処理することができず、オブジェクトデータ以外のソースからの情報を表示します。これらのレイヤーは、同じ地図上の他のデータレイヤーを文脈化するための背景情報を提供するのに最も役立ちます。レイヤーのデータはGeoJSON ↗形式またはベクターレイヤーで提供できます。
構成情報については、以下のconfigure static layersセクションを参照してください。
例:さまざまな地域で悪天候が発生するリスクを示すレイヤー。
Savedレイヤーは、Map Layer Editorで構成され、個別のリソースとして保存されたマップレイヤーを表示します。これらのレイヤーは複数のアプリケーション間で共有でき、一貫した方法でFoundry全体に背景情報を提供するためによく使用されます。
以下は、新しく追加され、まだ構成されていないMapウィジェットとその構成パネルの画像です。
Mapウィジェットの主要な構成オプションは以下の通りです。
Yes
に設定されると詳細が表示されます。詳細については、以下のconfigure drawing controlsセクションを参照してください。Yes
に設定されると詳細が表示されます。詳細については、以下のconfigure time stepper controlsセクションを参照してください。Pointレイヤーの主要な構成オプションは以下の通りです。
prominent
、specific
、またはnone
など)を表示できます。Clusterレイヤーの主要な構成オプションは以下の通りです。
ラインレイヤーの主な構成オプションは以下の通りです。
ラインレイヤーソース
の下には、集計済みラインレイヤーに対応する 2 つのソースの詳細が記載されています。GeoJSONとベクターです。ラインレイヤーソース
の下には、対応する 3 つのソースの詳細が記載されています。ポイント・トゥ・ポイント、GeoJSON、およびベクターです。prominent
、specific
、またはnone
などの任意の設定されたプロパティが表示されます。ラインレイヤーソース: ラインレイヤーに描画される線のソース情報をロードするためのさまざまな方法は以下の通りです。
ジオシェイプ
または文字列
のプロパティタイプをサポート)。静的レイヤーの主な構成オプションは以下の通りです。
prominent
、specific
、またはnone
などの任意の設定されたプロパティが表示されます。集計値シリーズは、単純な集計、関数集計、および導出された集計の 3 つの方法で構成できます。
Copied!1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46
import { Function, Double, FunctionsMap} from "@foundry/functions-api"; import { Objects, ObjectSet, CovidPositive, CovidTest, H3Hexagon} from "@foundry/ontology-api"; export class MyFunctions { @Function() public async calculateCovidPositivityRate(hexes: ObjectSet<H3Hexagon>, positives: ObjectSet<CovidPositive>, tests: ObjectSet<CovidTest>): Promise<FunctionsMap<H3Hexagon, Double>> { const map = new FunctionsMap<H3Hexagon, Double>(); // 最大バケット数を6000に設定して、すべてのH3六角形と解像度2の集計を許可 const max_buckets = {maxBuckets: 6000} const positives_bucketed = await positives .groupBy(positive => positive.hex_index.exactValues(max_buckets)) .count(); // 結果をマップに変換して、バケット化された配列よりもルックアップを効率的にする const positives_hex_map = new Map(); positives_bucketed.buckets.forEach((bucket: any) => { positives_hex_map.set(bucket.key, bucket.value); }); const tests_bucketed = await tests .groupBy(test => test.hex_index.exactValues(max_buckets)) .count(); const tests_hex_map = new Map(); tests_bucketed.buckets.forEach(bucket => { tests_hex_map.set(bucket.key, bucket.value); }); hexes.all().forEach(hex => { const positive_count = positives_hex_map.get(hex.hex_index); const test_count = tests_hex_map.get(hex.hex_index); // positive_countとtest_countがundefinedでない場合、陽性率を計算してマップに設定 if ((positive_count !== undefined) && (test_count !== undefined)) { map.set(hex, positive_count/test_count * 100); } }); return map; } }
以下の例では、Country
オブジェクトには時系列プロパティ COVID19 New Cases
があり、その国で観測された新しい COVID19 ケースの毎日の履歴を保存しています。時系列トランスフォーム は、この毎日のケース数をケースの変化率を記録する時系列に変換します。最後に、時系列サマライザー が Map データレイヤーにこの変換された時系列の最新値をフィードします。つまり、ケース値の最後に知られている変化率を計算します。Color Configuration パネルは、この値に関する国ごとのコントラストを強調するようにマップをスタイル設定します。時系列トランスフォームとサマライザーの詳細については、Workshop の時系列プロパティを参照し、カラー設定の詳細については以下の color configuration セクションを参照してください。
以下のスクリーンショットは カラー設定 のオプションを示しています。
カラー設定 の設定オプションは以下の通りです:
カラー設定: カラーは3つの方法で設定できます:
ライン/ボーダースタイル: ラインレイヤーに表示されるラインや他のレイヤータイプのボーダースタイルの設定。
値フォーマッター: 値を異なる形式で表現することができます。たとえば、値をパーセンテージとして表現するには、%
を値フォーマッターとして設定します。指定された値は d3-format 文字列 ↗ である必要があります。
以下は、選択、可視性、およびイベント設定 の主な設定オプションです:
True
に切り替えると、複数のオブジェクトを同時に選択する機能が無効になります。次の選択は前の選択を解除します。True
に切り替えると、最初のマップ読み込み時にレイヤーが非表示になります。レイヤーがグループの一部である場合、最初のレイヤーに対して設定された設定が考慮されます。以下のスクリーンショットは、さまざまな形状を表示する Map ウィジェット とその設定パネルの例を示しています。
描画コントロール のコア設定オプションは以下の通りです:
#F29D49
で、これはライトオレンジの16進コードです。0
から 1
まで設定します。最大の不透明度は 1
です。#F29D49
で、これはライトオレンジの16進コードです。#F29D49
で、これはライトオレンジの16進コードです。0
から 1
まで設定します。最大の不透明度は 1
です。#F29D49
で、これはライトオレンジの16進コードです。Map ウィジェットには組み込みの タイムステッパー があり、ユーザーが時間を進めたり戻したりすることで、マップ上のデータが時間とともにどのように変化するかを確認できます。
タイムステッパーは、ユーザーが選択した時間ウィンドウに対応するオブジェクトセットフィルターを設定されたオブジェクトセットフィルター変数に公開することで機能します。このフィルター変数を使用して、マップに表示される1つ以上のレイヤーをバックするオブジェクトセットをフィルター処理し、その時間ウィンドウに関連するオブジェクトのみを返します。
タイムステッパーを活用するには、時間単位あたりの測定値を含むオブジェクトを使用することをお勧めします。各オブジェクトには、フィルター処理できる日付またはタイムスタンププロパティがあるべきです。特定の時間ウィンドウをフィルター処理することで、個々のオブジェクトをロードしたり、そのウィンドウ内のオブジェクトを集約してマップに表示するデータを取得できます。
以下のスクリーンショットは、タイムステッパーが設定されたマップの例を示しています:
以下のスクリーンショットは タイムステッパーコントロール の設定オプションを示しています:
タイムステッパーのコア設定オプションは以下の通りです:
以下のスクリーンショットは ビューポートフィルター の設定例を示しています。
ビューポートフィルターはオブジェクトセットフィルター変数を出
Copied!1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
@Function() public costToVolume(expenses: ObjectSet<Expense>): FunctionsMap<string, Double> { const map = new FunctionsMap<string, Double>(); // 各国ごとのコストを計算する const costsPerCountry = expenses .groupBy(expense => expense.countryId.topValues()) .sum(expense => expense.cost); // 各国ごとのボリュームを計算する const volumePerCountry = expenses .groupBy(expense => expense.countryId.topValues()) .sum(expense => expense.volume); // 各国ごとのコストとボリュームの比を求める costsPerCountry.buckets.forEach(bucket => { var volume = volumePerCountry.buckets.find(b => b.key === bucket.key); map.set(bucket.key, bucket.value / volume); }); // 各国ごとのコストとボリュームの比のマップを返す return map; }
このコードは、経費のオブジェクトセットを受け取り、各国ごとのコストとボリュームの比を計算し、その結果をマップとして返します。まず、各国ごとのコストとボリュームを計算し、その後、それぞれのコストとボリュームの比を求めます。
(30歳未満の人口/総人口)
で表すことができます。集約されていない値の系列は、静的プロパティ、関数バックプロパティ、および時系列プロパティの3つの方法で設定できます。
Copied!1 2 3 4 5 6 7 8 9 10 11 12 13 14
@Function() public countryPositivityRate(countries: ObjectSet<Country>): FunctionsMap<Country, Double> { // 国ごとの陽性率を格納するためのマップを作成 const positivityRatePerCountry = new FunctionsMap<Country, Double>(); // すべての国をループして処理 countries.all().forEach(country => { // 国ごとの陽性率を計算(1日の新規感染者数 / 1日の新規陽性検査数) var positivityRate = country.dailyNewCases / country.dailyNewPositiveTests; // 計算した陽性率をマップに格納 positivityRatePerCountry.set(country, positivityRate); }); // 国ごとの陽性率のマップを返す return positivityRatePerCountry; }