FeatureView のスタイル設定

FeatureView アセット内の特徴のスタイルは、JavaScript オブジェクトで定義されたルールを使用して指定します。スタイルは、FeatureViewLayer の初期定義時またはその後の任意の時点で設定できます。スタイリング システムでは、対象物の大規模なグループに適用される幅広いスタイルルールと、特定の対象物に適用されるより具体的なルールを設定できます。対象物のスタイルは、対象物の特性に基づいて、定数値またはデータドリブンで定義できます。

スタイル オブジェクト

スタイル オブジェクトの基本構造は次のとおりです。ルールには、包括的なルールと具体的なルールの 2 種類があります。ブロードルールは FeatureView アセット内のすべての対象物に適用されますが、特定のルールは対象物の一部に適用されます。

{
  // Broad style rules.
  opacity: …,
  polygonFillColor: …,

  // Specific style rules.
  rules: [
    { … },
    { … }
  ]
};

Broad ルール

すべての対象物（または特定のジオメトリ タイプの対象物）にスタイル プロパティを適用するには、スタイル オブジェクトの最上位レベルでスタイル プロパティを指定します。

{
  opacity: 0.5,
  pointShape: 'triangle',
  lineWidth: 10,
  polygonFillColor: 'green'
};

固有のルール

対象物の一部にスタイル プロパティを適用するには、rules フィールドを使用します。rules フィールドは、JavaScript オブジェクトのリストを受け入れます。各オブジェクトには、ee.Filter オブジェクトで定義された条件に従って特徴を選択する filter があり、その後に一連のスタイル プロパティが続きます。次の例では、「REP_AREA」プロパティが 100 未満の場合にのみ、polygonStrokeWidth と polygonFillColor を設定するルールがあります。特定のルールは、包括的なルールのスタイル プロパティをオーバーライドします。また、rules リストの末尾近くにあるルールは、先頭近くにあるルールをオーバーライドします（特定のルールは先頭から順に評価されます）。

{
  rules: [
    {
      filter: ee.Filter.lt('REP_AREA', 100),
      polygonStrokeWidth: 0.5,
      polygonFillColor: 'blue'
    },
    { … }  // Optionally include additional rules.
  ]
};

設定スタイル

特徴スタイルは、FeatureViewLayer が宣言されたとき、またはその後の任意の時点で設定できます。

FeatureViewLayer 件の申告

FeatureViewLayer を宣言するときに可視化パラメータを設定するには、visParams パラメータを使用します。

var visParams = {
  opacity: 0.5,
  lineWidth: 10,
  polygonFillColor: 'purple'
};

var layer = ui.Map.FeatureViewLayer({
  assetId: 'WCMC/WDPA/current/polygons_FeatureView',
  visParams: visParams
});

Map.add(layer);

既存のFeatureViewLayer

既存の FeatureViewLayer の可視化パラメータを設定するには、setVisParams 関数を使用します。以前に指定されたスタイルルールはすべて置き換えられ、指定されていないプロパティはデフォルトに設定されます。

var layer = ui.Map.FeatureViewLayer('WCMC/WDPA/current/polygons_FeatureView');
Map.add(layer);

layer.setVisParams({
  opacity: 0.5,
  lineWidth: 10,
  polygonFillColor: 'purple'
});

シンボル

スタイル プロパティごとに、定数スタイルルールまたはデータドリブン スタイルルールを指定できます。データドリブン オプションでは、特徴プロパティ値を使用してシンボルを決定します。シンボルは、カテゴリ型または補間型のいずれかです。スタイル プロパティの一覧については、スタイル プロパティの表をご覧ください。

定数

定数スタイルルールは、設定するスタイル プロパティとその値で構成されます。次の例では、ポリゴンの塗りつぶしの色を青に設定しています。

var visParams = {
  polygonFillColor: 'blue'
};

カテゴリ

カテゴリ スタイルルールは、設定するスタイル プロパティと、次の 3 つのプロパティを持つ JavaScript オブジェクトで構成されます。

  • property - 値がスタイルに影響する特徴プロパティ名。
  • categories - 対象物プロパティ値をスタイル プロパティのシンボル ogie にマッピングするリストのリスト。各カテゴリには、プロパティ値の後に適用するシンボル値が続きます。カテゴリを定義するプロパティ値は文字列である必要があります。
  • defaultValue - プロパティ値が categories で定義されていない特徴に適用するデフォルトのシンボル。null または未定義の場合、デフォルトのスタイル設定が適用されます。

たとえば、次のオブジェクトは、「MARINE」特徴プロパティに基づいて color スタイル プロパティを設定します。「MARINE」カテゴリ「0」の対象物は紫、「1」は緑、「2」は青、その他のカテゴリは白に設定されます。

var visParams = {
  color: {
    property: 'MARINE',
    categories: [
      ['0', 'purple'],
      ['1', 'green'],
      ['2', 'blue']
    ],
    defaultValue: 'white'
  }
};

補間

補間されたスタイルルールは、設定するスタイル プロパティと、最大 5 つのプロパティを持つ JavaScript オブジェクトで構成されます。

  • property - 値がスタイルに影響する特徴プロパティ名。
  • mode - 補間モード（'linear' または 'interval'）。
  • palette - 入力プロパティ値を補間する色、不透明度、幅のリスト。形式は mode によって異なります。詳しくは、リニアと区間のセクションをご覧ください。

'linear' モードにのみ適用

  • min - palette リストの最初の要素にマッピングするプロパティ値。
  • max - palette リストの最後の要素にマッピングするプロパティ値。

線形

線形補間モードでは、palette プロパティで定義されたシンボル値のリスト間で、min～max の範囲内の入力値を線形にマッピングすることで、特徴スタイル プロパティが設定されます。入力値は、min と max で設定された範囲にクランプされます。

たとえば、次のオブジェクトは、「REP_AREA」特徴プロパティに基づいて color スタイル プロパティを設定します。palette プロパティは、min～max の入力値が黄色から赤、青へと線形に変化することを示す色のリストです。1 ～ 500 の値は黄色と赤の間で補間され、500 ～ 1000 の値は赤と青の間で補間されます。

var visParams = {
  color: {
    property: 'REP_AREA',
    mode: 'linear',
    palette: ['yellow', 'red', 'blue'],
    min: 1,
    max: 1000
  }
};

間隔

区間の補間モードでは、入力値をクラスブレークにマッピングし、クラス固有のシンボルを適用することで、対象物のスタイル プロパティを設定します。選択した特徴プロパティからの入力値は、切り捨てられて最も近いクラス分割値に割り当てられます。palette プロパティはリストのリストとしてフォーマットされます。各内部リストには、クラスブレーク値の後にスタイル プロパティ値が含まれます。プロパティ値がクラス分割の最小値未満の特徴は、デフォルトのスタイル プロパティ設定を維持します。

次の例では、特徴塗りつぶしの不透明度は「REP_AREA」プロパティの分類クラスに応じて設定されています。クラス定義とスタイル記号は、リストのリストとして palette プロパティに指定します。これは、値 0、80、2,000、5,000 で分割され、それぞれの特徴のオパシティが 0.5、0.35、0.22、0.15 の 4 つのクラスがあることを示します。つまり、「REP_AREA」の値が $ 0 \le x < 80 $ の特徴は塗りつぶしオパシティが 0.5、$ 80 \le x < 2000 $ の値は塗りつぶしオパシティが 0.35 になります。

var visParams = {
  fillOpacity: {
    property: 'REP_AREA',
    mode: 'interval',
    palette: [
      [0, 0.5],
      [80, 0.35],
      [2000, 0.22],
      [5000, 0.15]
    ]
  }
};

すべてのスタイル プロパティ

次の表に、スタイル オブジェクトで指定できるすべてのスタイル プロパティを示します。特定のジオメトリ タイプにスタイル プロパティを設定すると、「すべてのジオメトリ」に設定された対応するスタイル プロパティがオーバーライドされます（たとえば、polygonFillColor を設定すると、fillColor に設定された値がオーバーライドされます）。

プロパティ タイプ 説明 補間ルールをサポート
すべてのジオメトリ
isVisible Boolean 特徴を表示するかどうかを設定します。 いいえ
color String すべてのジオメトリ タイプに塗りつぶし/ストロークの色を設定します。16 進数値または CSS3 カラーにする必要があります。 ○
opacity Double すべてのジオメトリ タイプの塗りつぶし/ストロークの不透明度を設定します。0 ～ 1 の範囲の浮動小数点数にする必要があります。 ○
width Double すべてのジオメトリ タイプにストローク幅を設定します。 ○
fillColor String すべてのジオメトリ タイプに塗りつぶし色を設定します。16 進数値または CSS3 カラーにする必要があります。 ○
ポイント ジオメトリ
pointShape String ポイント ジオメトリの形状を設定します。ee.FeatureCollection.style と同じ形状（円、正方形、菱形、十字、プラス、五芒星、六芒星、三角形、三角形_上、三角形_下、三角形_左、三角形_右、五角形、六角形、星 5、星 6）をサポートします。 いいえ
pointSize Double ポイント ジオメトリの幅をピクセル単位で設定します。 ○
pointFillColor String ポイント ジオメトリの塗りつぶしの色を設定します。16 進数値または CSS3 カラーにする必要があります。 ○
pointFillOpacity Double ポイント ジオメトリの塗りつぶしの不透明度を設定します。0 ～ 1 の範囲の浮動小数点数にする必要があります。 ○
ライン ジオメトリ
lineType String 線のタイプを設定します。ee.FeatureCollection.style と同じタイプ（実線、破線、点線）をサポートします。 いいえ
lineWidth Double 線の幅をピクセル単位で設定します。 ○
lineColor String 線形ジオメトリの色を設定します。16 進数値または CSS3 カラーにする必要があります。 ○
lineOpacity Double ライン ジオメトリの不透明度を設定します。0 ～ 1 の範囲の浮動小数点数にする必要があります。 ○
ポリゴン ジオメトリ
polygonStrokeWidth Double ポリゴンのストローク幅を設定します（ピクセル単位）。 ○
polygonStrokeType String ポリゴンの線のタイプを設定します。ee.FeatureCollection.style と同じタイプ（実線、破線、点線）をサポートします。 いいえ
polygonStrokeColor String ポリゴン ジオメトリのストロークの色を設定します。16 進数値または CSS3 カラーにする必要があります。 ○
polygonStrokeOpacity Double ポリゴン ジオメトリのストロークの不透明度を設定します。0 ～ 1 の範囲の浮動小数点数にする必要があります。 ○
polygonFillColor String ポリゴン ジオメトリの塗りつぶしの色を設定します。16 進数値または CSS3 カラーにする必要があります。 ○
polygonFillOpacity Double ポリゴン ジオメトリの塗りつぶしの不透明度を設定します。0 ～ 1 の範囲の浮動小数点数にする必要があります。 ○