はじめての Web マッピングアプリケーション開発 : 地図表示編

9640
0
02-27-2018 12:51 AM

はじめての Web マッピングアプリケーション開発 : 地図表示編

はじめての Web マッピングアプリケーション開発

はじめて地図アプリ開発を行う開発者の方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れをシリーズで紹介していきます。

 

  1. はじめての Web マッピングアプリケーション開発:地図表示編
  2. はじめての Web マッピングアプリケーション開発:レイヤー表示編
  3. はじめての Web マッピングアプリケーション開発:レイヤーの可視化編
  4. はじめての Web マッピングアプリケーション開発:ポップアップの設定編
  5. はじめての Web マッピングアプリケーション開発:Web マップの作成・表示編
  6. はじめての Web マッピングアプリケーション開発:グラフィック編
  7. はじめての Web マッピングアプリケーション開発:クエリ編
  8. 続編 はじめてのWeb マッピングアプリケーション開発:ウィジェット編
  9. 続編 はじめての Web マッピングアプリケーション開発:印刷ウィジェット編
  10. 続編 はじめての Web マッピングアプリケーション開発:編集ウィジェット編
  11. 続編 はじめての Web マッピングアプリケーション開発:ナビゲーション ウィジェット編
  12. 続編 はじめてのWeb マッピングアプリケーション開発:OAuth 2.0編
  13. 番外編 はじめてのWeb マッピングアプリケーション開発:多言語のべースマップ活用編
  14. はじめてのWeb マッピングアプリケーション開発:最新化&ポップアップの設定編その2

 

ArcGIS API for JavaScript とは?

 

ArcGIS API for JavaScript は、Web ブラウザーから GIS 機能を利用するための API です。

簡単な地図を既存の Web ページに組み込んだり、地図上にさまざまな表現方法を用いて位置情報を可視化したり、検索や解析などの豊富な GIS 機能を実装したりするなど、Web マッピングアプリケーション開発をサポートします。

 

このシリーズ記事では、ArcGIS API for JavaScript を使用して、Web マッピングアプリケーション開発の流れをご紹介していきます。

第 1 回目となる今回は、地図を表示するところまでをご紹介します。

 

Web ブラウザーに地図を表示してみよう!

 

1. ArcGIS API for JavaScript の参照

まず、地図を表示する Web ページの HTML を作成して、以下を入力します。

 

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

JSBin を開くと左側に HTML、右側に実行結果が表示されるので、あらかじめ入力されている HTML を削除し、以下を入力してください。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Web ブラウザーに地図を表示してみよう!</title>
</head>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

<head> タグ内に以下のコードを追加し、API を参照します。

<link rel="stylesheet" href="https://js.arcgis.com/4.6/esri/css/main.css">
<script src="https://js.arcgis.com/4.6/"></script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。

 

<link rel="stylesheet" href="https://js.arcgis.com/4.22/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.22/"></script>

 

<link> タグは、ウィジェットやコンポーネントといった UI を定義するスタイルが含まれるスタイルシートを参照します。

<script> タグは、CDN から API を読み込みます。

 

2. モジュールの読み込み

続いて、API からアプリで使用するモジュールを読み込みます。今回、読み込むのは以下のモジュールです。

  • esri/Map :マップを作成するコードを読み込みます
  • esri/views/MapView :2D でマップを描画するコードを読み込みます
  • dojo/domReady! :作成した全体のコードを実行する前に DOM が読み込まれたことを確認します

 

<head> タグ内に <script> タグを追加し、読み込むモジュールを設定します。

<script>
require([
 "esri/Map",
 "esri/views/MapView",
 "dojo/domReady!"
], function(Map, MapView) {
 // 地図作成のコード
});
</script>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。

 

<script>
require([
  "esri/Map",
  "esri/views/MapView"
],(Map, MapView) => {
  // 地図作成のコード
});
</script>

 

※ API は Dojo をベースにしており(※2021年12月追記:ArcGIS API for JavaScript の近代化の取り組みの中で、バージョン 4.16 以降、Dojo に依存しなくなりました)、Dojo が取り入れているモジュール システムを活用したアプリ開発を実現しています。モジュール システムの詳細は以下の記事をご参照ください。

 

3. Map の作成

esri/Map モジュールから読み込まれた Map クラスを参照する Map を使用して、新しいマップを作成します。マップには、地図の背景に表示するベースマップを定義する basemap などのプロパティを設定できます。

require([
 "esri/Map",
 "esri/views/MapView",
 "dojo/domReady!"
], function(Map, MapView) {
 var map = new Map({
 basemap: "streets"
 });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。

 

require([
 "esri/Map",
 "esri/views/MapView"
], (Map, MapView) => {
 const map = new Map({
 basemap: "streets"
 });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

ベースマップには、streets(道路地図)のほかに、satellite(衛星画像)、hybrid(ラベル付き衛星画像)、topo(地形図)、gray(キャンバス(ライト グレー))、dark-gray(キャンバス(ダーク グレー))などのいくつかの種類があり、地図の用途に合わせて最適なベースマップを選択します。※2021年12月追記:ArcGISブログ 廃止されるベクター ベースマップとラスター ベースマップのお知らせ でお知らせしたように、ラスターベースマップのいくつかは2021年で更新が停止される予定ですが、それの代替となる、streets-vector(道路地図)、topo-vector(地形図)、gray-vector(キャンバス(ライトグレー))、dark-gray-vector(キャンバス(ダーク グレー))などの、ベクターベースマップが用意されています。その他にも、利用可能なベースマップの詳細は、Map のbasemap プロパティをご参照ください。

 

4. View の作成

View は、HTML ページ内でマップを表示する DOM ノードを参照し、マップを描画します。

MapView を作成して、プロパティを設定してみましょう。

require([
 "esri/Map",
 "esri/views/MapView",
 "dojo/domReady!"
], function(Map, MapView) {
 var map = new Map({
 basemap: "streets"
 });

 var view = new MapView({
 container: "viewDiv", // View を表示する DOM ノードを参照
 map: map // ステップ 3 で作成した map オブジェクトを参照
 });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

※2021年12月追記:2021年12月以降に試す場合は以下のコードを追加してください。

 

require([
 "esri/Map",
 "esri/views/MapView"
], (Map, MapView) => {
 const map = new Map({
 basemap: "streets"
 });

 const view = new MapView({
 container: "viewDiv", // View を表示する DOM ノードを参照
 map: map // ステップ 3 で作成した map オブジェクトを参照
 });
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

上記のコードでは、container プロパティにマップを表示する DOM ノードの名前を設定しています(DOM ノードはステップ 5 で定義します)。map プロパティは、ステップ 3 で作成した map オブジェクトを参照します。

MapView には、このほかにも、View の表示範囲を設定する center(描画するマップの中心地点)zoom(描画するマップのズームレベル)などのプロパティも含まれます。

 

これで Map と View の作成は完了です。次のステップは、地図を表示する HTML 要素の追加です。

 

5. 要素の定義

<body> タグを作り、View を表示する <div> 要素を入れます。

<body>
 <div id="viewDiv"></div>
</body>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

<div> は、ステップ 4 で作成した MapView の container プロパティへ渡した id とマッチする “viewDiv” という id を持っています。マップは、この DOM ノードに描画されます。

 

6. スタイルの設定

<head> タグ内に <style> タグを使い HTML 要素のスタイルを定義します。

ブラウザー ウィンドウいっぱいにマップを表示させるため、以下の CSS を <style> に追加します。

<style>
 html, body, #viewDiv {
 padding: 0;
 margin: 0;
 height: 100%;
 width: 100%;
 }
</style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

これで、地図の作成は完了です。作成した地図を表示させてみましょう。

JSBin を使用している場合は、[Run with JS] ボタンをクリックすると、実行結果が右側に表示されます。

JSBin

 

今回作成したサンプルは Esriジャパンの GitHub に公開しています(※2021年12月追記:”ファイル名.html” が2018年時のサンプル、”ファイル名_2021.html” が2021年に書き換えしたサンプルです)。

 

チャレンジ:3D 地図を作成してみよう!

 

マップを描画する View には、2D で描画する MapView のほかに 3D で描画する SceneView が用意されており、View を切り替えることで、2D 地図と 3D 地図を簡単に変更できます。

 

API からマップを 3D で描画する esri/views/SceneView モジュールを読み込み、3D 地図を作成してみましょう 。

 

ここまでのステップで作成したサンプルを使い、読み込むモジュールを esri/views/MapView から esri/views/SceneView に変更してみてください。

 

変更前

require([
 // モジュールの読み込み
 "esri/views/MapView",
], function(/*...*/) {
 // 地図作成のコード
});
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

変更後

require([
 // モジュールの読み込み
 "esri/views/SceneView",
], function(/*...*/) {
 // 地図作成のコード
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

※2021年12月追記:2021年12月以降に試す場合は以下のコードです。

 

require([
 // モジュールの読み込み
 "esri/views/SceneView",
], (/*...*/) => {
 // 地図作成のコード
});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

 

View を変更することで、簡単に 3D 地図を作成できます。

さらに、同じ Map を 2D(MapView)、3D(SceneView)で描画する、ということも可能です。

 

 

このように、API では、6つのステップで簡単に地図を作成できます。さらに描画方法を切り替えることで、Map を 2D で描画するか、3D で描画するか、変更可能です。

 

今回作成したサンプルは以下で動作を確認できます。

※ 2021年12月追記:2021年12月以降は、以下で動作を確認できます。

 

次回は、作成した地図に位置情報を表示する方法をご紹介します。

 

関連リンク

 

Version history
Last update:
‎01-17-2022 11:49 PM
Updated by: