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

Document created by ayako_suzukiesrij-esridist Employee on Feb 27, 2018Last modified by masanobu_hiranoesrij-esridist on Apr 26, 2018
Version 3Show Document
  • View in full screen mode

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

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

 

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

 

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>

 

<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>

 

※ API は 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"
  });
});

 

ベースマップには、streets(道路地図)のほかに、satellite(衛星画像)、hybrid(ラベル付き衛星画像)、topo(地形図)、gray(キャンバス(ライト グレー))、dark-gray(キャンバス(ダーク グレー))などのいくつかの種類があり、地図の用途に合わせて最適なベースマップを選択します。

 

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 オブジェクトを参照
  });
});

 

上記のコードでは、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 に公開しています。

 

チャレンジ: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(/*...*/) {
  // 地図作成のコード
});

 

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

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

 

 

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

 

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

 

関連リンク

 

1 person found this helpful

Attachments

    Outcomes