ArcGIS で始める Web マップアプリ開発　グラフィック編

はじめに

この記事は「ArcGIS で始める Web マップアプリ開発」のシリーズ記事として、はじめて Web マップアプリ開発を行う方に向けて、ArcGIS Maps SDK for JavaScript を使用した Web マップアプリ開発の流れをシリーズで連載しています。

第 5 回目となる今回は、ArcGIS Maps SDK for JavaScript の必須機能であるグラフィックを紹介します。

グラフィックを使用すると、単純なシンボルでマップ上の場所を示すことや、クエリーや他のタスクの結果を表示することが可能です。さらに使いこなすと、ジオメトリー、レイヤー、タスク、およびポップアップをより効果的に操作することも可能になります。

今回は、グラフィックの基礎部分を中心にご紹介します。前回の記事と同様にソースコードは ESRIジャパンの GitHub で公開していますので、同時に参照しながら本記事を読み進めることで、より深く理解いただけると思います。

Web アプリ開発の実行環境をお持ちでない方は、CodePen を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。

グラフィックを実装してみよう

１．地図の表示

マップコンポーネントを利用して地図を表示するまでのステップは、これまでの記事でご紹介していますので省略します。

２．グラフィックのプロパティについて

グラフィックには、下記表に示す 4 つのメインのプロパティがあります。

geometry	Geometry	現実の座標でグラフィックのジオメトリーまたは位置情報を定義します
symbol	Symbol	グラフィックのシンボルを定義します
attributes	Object	グラフィックのデータの属性が含まれます
popupTemplate	PopupTemplate	グラフィックの属性をポップアップで表示するテンプレートを定義します

以下で、各プロパティを使ったコードの記述方法を見ていきましょう。

３．グラフィックの実装

①必要なモジュールの追加

今回はグラフィック、グラフィックスレイヤーモジュールの 2 つを読み込みます。

<script type="module">
  const [Graphic, GraphicsLayer] = await $arcgis.import([
    "@arcgis/core/Graphic.js",
    "@arcgis/core/layers/GraphicsLayer.js",
  ]);
</script>

② グラフィックスレイヤーオブジェクトの作成と追加

マップコンポーネントの準備が整ったことを確認してから、グラフィックスレイヤーオブジェクトを作成し、マップに追加しておきます。

<script type="module">
  const [Graphic, GraphicsLayer] = await $arcgis.import([
    "@arcgis/core/Graphic.js",
    "@arcgis/core/layers/GraphicsLayer.js",
  ]);

  //追加開始
  const mapElement = document.querySelector("arcgis-map");
  await mapElement.viewOnReady();

  const graphicsLayer = new GraphicsLayer();

  mapElement.map.add(graphicsLayer);
  //追加終了

</script>

③ジオメトリー（ライン）を作成

ポリラインを宣言し、位置を表す新しいポリラインジオメトリーを作成します。

ラインに頂点を追加するには、paths プロパティを使用します。

// 緯度・経度座標でライン ジオメトリーを作成
const polyline = {
  type: "polyline",  // ポリラインに自動的に型変換
  paths: [
    [
      142.70820654700003,
      43.025899449000065
    ],
    [
      142.71502962200009,
      42.951703725000073
    ],
    [
      142.71988747600005,
      42.726739020000082
    ],
    [
      142.9701758330001,
      42.401820893000036
    ],
    [
      143.21793175400001,
      42.073811263000039
    ]
  ]
};

④シンボルを作成

③ で山脈の位置のジオメトリーが作成されました。マップ上に表示する際のシンボルを設定しましょう。

シンプルラインシンボルで山脈のラインシンボルを作成します。

// ここには上記のライン ジオメトリーの作成のコードが入るが省略

// 描画するシンプル ライン シンボルを定義
const lineSymbol = {
  type: "simple-line",  // SimpleLineSymbol に自動的に型変換
  color: [226, 119, 40],  // RGB カラーの値を配列として定義
  width: 4
};

⑤属性を作成

属性は、グラフィックに関する重要な情報を提供し、アプリケーションの有用性を高めることができます。

このステップではラインのグラフィックに2つの属性（名称、備考）を追加します。

// ここには上記のライン ジオメトリーの作成、シンボル定義のコードが入るが省略

// ラインのグラフィックに 2 つの属性を定義
const lineAtt = {
  名称: "日高山脈",      // 山地・山脈名
  備考: "北海道の背骨"   // 備考
};

⑥グラフィックを作成し、ジオメトリー、シンボル、属性を割り当て

作成したグラフィックにジオメトリー、シンボル、属性を設定後、それをグラフィックレイヤーに追加します。

// ここには上記のライン ジオメトリーの作成、シンボル定義、属性定義のコードが入るが省略

// グラフィックを作成
const polylineGraphic = new Graphic({
  geometry: polyline,   // 前のステップまでで作成したジオメトリーを追加
  symbol: lineSymbol,   // 前のステップまでで作成したシンボルを追加
  attributes: lineAtt   // 前のステップまでで作成した属性を追加
});

// グラフィックを ② で作成したグラフィック レイヤーへ追加
// 複数のグラフィックを追加する場合は、addManyメソッドへgraphicの配列を渡す
graphicsLayer.add(polylineGraphic);

⑦PopupTemplate をグラフィックに割り当て

ポップアップを使用すると、ユーザーはグラフィックの属性にアクセスできます。単純な PopupTemplate を設定すると、地図上でクリックしたときにそのフィーチャの属性を表示できます。

PopupsおよびPopupTemplateの操作方法の詳細については、Intro to popups tutorialおよびその他の Popup サンプル、もしくはシリーズの第 4 回目の記事を参照してください。

新しい PopupTemplate をグラフィックに追加します。この手順は、グラフィックのコンストラクターで行うか、GraphicsLayer にグラフィックを追加する前に行う必要があります。

// ここには上記のライン ジオメトリーの作成、シンボル定義、属性定義のコードが入るが省略

// グラフィックを作成
const polylineGraphic = new Graphic({
  geometry: polyline,   // ジオメトリーを追加
  symbol: lineSymbol,   // シンボルを追加
  attributes: lineAtt   // 属性を追加
  popupTemplate: {
  title: "{名称}",
  content: [{
    type: "fields",
    fieldInfos: [{
      fieldName: "名称"
    }, {
      fieldName: "備考"
    }]
  }]
 }
});

// グラフィックをグラフィック レイヤーへ追加
graphicsLayer.add(polylineGraphic);

４．結果

これで、山脈の位置を示す簡単なマップが作成されました。ラインをクリックして、グラフィックに追加した属性を表示することができます。

最終的なコードは次のようになります。

<script type="module">
  const [Graphic, GraphicsLayer] = await $arcgis.import([
    "@arcgis/core/Graphic.js",
    "@arcgis/core/layers/GraphicsLayer.js",
  ]);

  const mapElement = document.querySelector("arcgis-map");
  await mapElement.viewOnReady();

  const graphicsLayer = new GraphicsLayer();

  mapElement.map.add(graphicsLayer);

  // 緯度・経度座標でライン ジオメトリーを作成
  const polyline = {
    type: "polyline",  // ポリラインに自動的に型変換
    paths : [
      [
          142.70820654700003,
          43.025899449000065
      ],
      [
          142.71502962200009,
          42.951703725000073
      ],
      [
          142.71988747600005,
          42.726739020000082
      ],
      [
          142.9701758330001,
          42.401820893000036
      ],
      [
          143.21793175400001,
          42.073811263000039
      ]
    ]
  };

  // 描画するシンプル ライン シンボルを定義
  const lineSymbol = {
    type: "simple-line",  // SimpleLineSymbol に自動的に型変換
    color: [226, 119, 40],  // RGB カラーの値を配列として定義
    width: 4
  };

  // ライン オブジェクトの属性を定義
  const lineAtt = {
    名称: "日高山脈",      // 山地・山脈名
    備考: "北海道の背骨"   //  備考
  };

  // グラフィックを作成
  const polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: lineSymbol,
    attributes: lineAtt,
    popupTemplate: {
      title: "{名称}",
      content: [{
        type: "fields",
        fieldInfos: [{
          fieldName: "名称"
          }, {
          fieldName: "備考"
        }]
      }]
    }
  });

  // グラフィックをグラフィック レイヤーへ追加
  graphicsLayer.add(polylineGraphic);
    
</script>

まとめ

GraphicsLayer にグラフィックを追加すると、さまざまなジオメトリータイプのフィーチャを使用するときに便利です。ただし、同じジオメトリータイプ、属性のグラフィックでのみ動作する場合は、クライアント側の FeatureLayer を使用してレンダリング機能とクエリー機能を利用することをお勧めします。これを行う方法の例については、Create a FeatureLayer with client side graphics のサンプルを参照してください。

今回、GitHub 上で公開している最終的なサンプルコードは、中学生や高校生の地理の教科書に出てくる「日本の主な山地・山脈」、「主な活火山」をグラフィックとして座標を定義して追加しております。

今回作成したサンプルは以下で動作を確認することも可能です。

グラフィックで学ぶ「日本の山地・山脈、活火山」：https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_sdk/intro_graphics/intro-graphics....

ArcGIS で始める Web マップアプリ開発　グラフィック編