GeoJSON を REST API 配信して Leaflet.js で表示しよう - Esri Leaflet Tips

1 Kudo

GeoJSON とは地理空間データフォーマットの 1 つであり、Web ではもっともポピュラーなフォーマットです。

GeoJSON の仕様については geojson.org に詳しいです。

本記事は、「GeoJSON を使って地図へのデータ表示してるんだけど、データに対する検索や空間的な条件に応じた抽出などを動的に行いたい。ただし、クライアントで処理するのは避けたいし、地理データ取得用に API 書くのも面倒だな」という人にオススメの内容です。

タイトルの通り、GUI 操作ですぐに公開できる動的なクエリ API を備えたサービスの配信方法から、それを使って Leaflet.js で特定の条件に従ったデータのみを表示するところまでを紹介します。

ここで言うクエリ API とは、以前の記事（Leaflet.js で空間フィルタリングをやってみる - Esri Leaflet Tips）で紹介した ArcGIS の REST API です。

ArcGIS にデータをアップロードするだけでサービスとしての配信ができるのでとても便利です。

ざっと手順をまとめてみました。

ArcGIS に GeoJSON をアップロード
REST エンドポイントを確認
Leaflet.js の地図上にデータを表示

ArcGIS に GeoJSON をアップロード

ArcGIS のクラウド（ArcGIS Online）に GeoJSON をアップロードするだけで、REST API としてデータにアクセス可能な状態で配信されます。

今回は OpenStreetMap（OSM）のデータを GeoJSON としてエクスポートしたものを使って ArcGIS に公開してみました。

OSM のエクスポートには overpass turbo を使いました。

GeoJSON データの公開は ArcGIS Online のマイコンテンツページから行います。

マイコンテンツは開発者アカウント※1 を作成すれば、サインインしてアクセスできます。

公開までの流れは以下のヘルプに詳しく載っているので試してみてください。

シェープファイルまたは GeoJSON ファイルの公開—ArcGIS Online ヘルプ | ArcGIS

REST エンドポイントを確認

GeoJSON を公開したら REST エンドポイントを確認しましょう。

公開すると下の画像のようにアイテムページが表示されます。

[レイヤー] セクションに REST エンドポイントを確認するためのページリンクがあります。

上の画像では「streets_0」です。

クリックすると下の画像のページに移動します。

ここには配信しているサービスの情報や、REST API のオペレーションを実行するためのインターフェイスが用意されています。

Leaflet.js ではエンドポイントとなるこのページの URL を使います。

Leaflet.js の地図上にデータを表示

ArcGIS REST API として配信したフィーチャレイヤーは GeoJSON 形式でデータを取得できます。

試しに以下の URL にアクセスしてみてください。

これは highway フィールドの値が motorway あるいは motorway_link のデータのみを GeoJSON で出力する URL です。

http://services1.arcgis.com/RVzd6I1g6h9fqyZM/arcgis/rest/services/streets/FeatureServer/0/query?wher...

では、これを Leaflet.js でどのように扱って、地図に表示させるのか。

GeoJSON で出力されますが、表示には L.GeoJson ではなく、 Esri Leaflet ※2 の L.esri.FeatureLayer を使います。

このクラスはクエリ API によるデータ取得と表示までの一連をラッピングしたレイヤークラスです。

以前の記事で実施した空間フィルタリングでは、L.esri.Query を使った検索結果の表示は L.GeoJson を使いましたが、今回はよりシンプルな手法になります。

// OSM 道路データ レイヤー
L.esri.featureLayer({
  url: 'https://services1.arcgis.com/RVzd6I1g6h9fqyZM/arcgis/rest/services/streets/FeatureServer/0'
}).addTo(map);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

L.esri.FeatureLayer には where というあらかじめ特定の条件に沿ったデータのみを表示するように指定できるコンストラクタオプションが用意されています。

where には SQL シンタックスで条件を記述します。

先に指定した条件を適用してみましょう。

上のコードに 1 行追加するだけです。

なお、setWhere() メソッドを使えば、レイヤーの初期化後も動的に条件を変更・反映することもできます。

// OSM 道路データ レイヤー
L.esri.featureLayer({
  url: 'https://services1.arcgis.com/RVzd6I1g6h9fqyZM/arcgis/rest/services/streets/FeatureServer/0',
  where: "highway='motorway' OR highway='motorway_link'"
}).addTo(map);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

デモサンプルを用意したので、where の 1 行を省いた結果もあわせて確認してみてください。

Esri Leaflet: FeatureLayer - JSFiddle

※1 テスト・開発目的あるいは非商用目的でのアプリ公開（個人/NPO/NGO/教育機関のみ）は無償でご利用いただけます

※2 Esri Leaflet は弊社での技術サポートは行っておりませんが、GitHub リポジトリにてバグ・課題の報告やプルリクエストによる改善が可能です

関連リンク

GeoJSON を REST API 配信して Leaflet.js で表示しよう - Esri Leaflet Tips