Web アプリで Arcade を使ってみよう! (前編)

1 Kudo

Arcade は、ArcGIS プラットフォームで使用するために開発された、新しい式言語です。

他の式言語と同様に、演算や式の評価を行うほか、記述した式を ArcGIS プラットフォームにおいて共有、実行することができます。

ArcGIS API for JavaScript ではバージョン 4.2 およびバージョン 3.19 から Arcade を使用できるようになりました。

本記事は、ArcGIS API for JavaScript で Arcade を使用する方法を前編と後編に分けてご紹介します。

前編では、Arcade を使ったビジュアライゼーションの基本をご説明し、後編では、ArcGIS プラットフォームでの Arcade の共有についてご紹介する予定です。

Arcade で式を定義してみよう！

では、さっそく、Arcade を使ったビジュアライゼーションの方法をご紹介します。

Arcade を Web アプリで使用するには、Arcade で式を定義し、定義した式を ArcGIS API for JavaScript で参照します。このセクションでは、Arcade 式を定義してみます。

以下のサンプルは、愛知県の地価価格を可視化しています。前年と比較して価格の変動が大きいほどシンボルは大きく、また、正の値を赤、負の値を青で表しています。

このサンプルでは2つの Arcade式を定義してデータを表現しています。それぞれの式を見てみましょう。

前年と比較した価格の上昇率を求める

上記のサンプルはこちらのデータから作成しました。

愛知県地価調査（平成25年）
https://www.arcgis.com/home/item.html?id=0de12c97862c4c8ba70bbeb61e0d6236#data

残念ながら、データソースには上昇率の情報は用意されていません。

そこで、Arcade を使い、各年の地価価格のフィールド値から、前年と比較した価格の上昇率を求める式を定義します。

<!--上昇率-->
<script type="text/plain" id="land-price-rate">
  // 価格データがないとき null を返す
  if(IsEmpty($feature.Ｈ２５価格) || IsEmpty($feature.Ｈ２６価格)){
    return null;
  }

  // 上昇率を求める
  var rate = IIf($feature.Ｈ２５価格 > 0 && $feature.Ｈ２６価格 > 0, ($feature.Ｈ２６価格 / $feature.Ｈ２５価格 - 1) * 100, null);

  // 絶対値を求める
  var abs = Abs(rate);

  // 結果を返す
  return abs;
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Arcade は、変数の宣言や論理演算、関数の記述など JavaScript と似た構文を持っています。

もちろん、Arcade 独自の構文も定義されています。また、複雑な演算を簡単に行うための関数も豊富に提供されています。詳細は、ArcGIS Arcade ドキュメントをご参照ください。

さらに、Arcade には、フィーチャデータへアクセスするためのグローバル変数、$feature が用意されており、簡単にフィーチャのフィールド値を参照することができます。

$feature.FIELD_NAME

上昇率の正負を分類する

さて、もうひとつ、上昇率の正負を分類するための Arcade 式を用意しましょう。

上昇率が正の場合 "positive" を、0 の場合は 0 を、負の場合は "negative" を返すように式を書きます。

<!--正負-->
<script type="text/plain" id="land-price-pn">
  // 価格データがないとき null を返す
  if(IsEmpty($feature.Ｈ２５価格) || IsEmpty($feature.Ｈ２６価格)){
    return null;
  }

  // 上昇率を求める
  var rate = IIf($feature.Ｈ２５価格 > 0 && $feature.Ｈ２６価格 > 0, ($feature.Ｈ２６価格 / $feature.Ｈ２５価格 - 1) * 100, null);

  // 正か負かを求める
  var uqv = When(rate > 0, "positive", rate < 0, "negative", rate == 0, 0, null);

  // 結果を返す
  return uqv;
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

式が script タグ内に記述されているのは、ArcGIS API for JavaScript が式を文字列として参照するためです。

シンプルな一行の式のときは、JavaScript コード内にダブルまたはシングルクォートを使い書くこともできます。式が複数行に渡るときは、上記のように、別途 script タグ内に記述することもできます。この場合、ブラウザーが JavaScript としてスクリプトを実行することがないように、MINE タイプを text/plain にしましょう。

Arcade を使ってみよう！

では、用意した Arcade を ArcGIS API for JavaScript から参照し、データを可視化してみましょう。

まず、document.getElementById() メソッドを利用し、script タグ内に記述した Arcade 式を変数へ代入します。

var rateArcade = document.getElementById("land-price-rate").text;
var pnArcade = document.getElementById("land-price-pn").text;‍‍‍‍

続いて、レンダラーを作成します。

シンボルの色を正負の個別値（"positive"、0、"negative"）をもとに表現したいので個別値分類クラスを使います。上昇率を表すシンボルの大きさは、visualVariables オプションを使用し設定します。

var renderer = new UniqueValueRenderer({
  // 正負
  valueExpression: pnArcade,
  valueExpressionTitle: "正負",
  uniqueValueInfos: [{
    value: "positive",
    symbol: createSymbol("#ED5151"),
    label: "正"
  }, {
    value: 0,
    symbol: createSymbol("#E38B4F"),
    label: "0"
  }, {
    value: "negative",
    symbol: createSymbol("#149ECE"),
    label: "負"
  }, {
    value: null,
    symbol: createSymbol("#AAAAAA"),
    label: "その他"
  }],

  // 上昇率
  visualVariables: [{
    type: "size",
    valueExpression: rateArcade,
    valueExpressionTitle: "上昇率",
    minDataValue: 0,
    maxDataValue: 12,
    valueUnit: "unknown",
    minSize: "8px",
    maxSize: "60px"
  }]
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

式は valueExpression オプションに渡します。

あとは、いつも個別値分類を行うのと同様に、各個別値のシンボルを定義したり、シンボルの大きさを設定したりするだけです。

このように、Arcade を活用することで、実行時に式を評価し、返ってきた値をもとにレンダリングすることができます。表現したいデータを持つ属性フィールドが無い場合でも、データソース自体を更新する必要がなく、複数のフィールドを組み合わせることで多様な表現が可能になりました。

さらに、Arcade が提供する豊富な関数を利用することで、複雑な演算も簡単に行うことができます。

関連リンク