続編 はじめてのWeb マッピングアプリケーション開発:ナビゲーション ウィジェット編

Document created by koki_kuniharaesrij-esridist Employee on Apr 22, 2020Last modified by shinji_katayaesrij-esridist on Jun 1, 2020
Version 8Show Document
  • View in full screen mode

1. はじめに

この記事は、[続編 はじめてのWeb マッピングアプリケーション開発] のシリーズ記事として、はじめて地図アプリの開発を行う開発者の方に向けて、ウィジェットを使ったアプリ開発についてシリーズで紹介しています。

  1. 続編 はじめてのWeb マッピングアプリケーション開発:ウィジェット編
  2. 続編 はじめての Web マッピングアプリケーション開発:印刷ウィジェット編
  3. 続編 はじめての Web マッピングアプリケーション開発:編集ウィジェット編
  4. 続編 はじめての Web マッピングアプリケーション開発:ナビゲーション ウィジェット編
  5. 続編 はじめてのWeb マッピングアプリケーション開発:OAuth 2.0編

 

前回の記事では、編集機能を実装するうえで、便利な編集ウィジェットを紹介しました。今回は、手軽にルート検索機能を実装できるナビゲーション ウィジェットを紹介いたします。

 

これまでの記事と同様に、ソースコードは ESRIジャパンの GitHub で公開していますので、ご覧ください。Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。

 

2. ナビゲーション ウィジェットとは

ナビゲーション ウィジェットとは、シリーズ最初のウィジェット編の記事で紹介した、ArcGIS API for JavaScript が提供する UI コンポーネント群の一つです。

 

 

ArcGIS API for JavaScript で提供されているナビゲーション ウィジェットは ArcGIS World Routing Service というサービスを使用するウィジェットで、このウィジェットを使うことによって、数行のコードでルート検索機能をGIS アプリケーションに実装することができ、目的地までの最適なルートと所要時間を計算することができます(上記サービスの利用には ArcGIS Online のサービス クレジットが必要になります)。

 

3. ウィジェットの実装

ナビゲーション ウィジェットの実装は前回までの記事で紹介した方法とほとんど変わりません。 

 

① Direction モジュールの追加

 

※前回の記事、編集ウィジェット編で作成したコードにナビゲーション ウィジェットを追加していきます。

初めに、require ステートメントで Directions を追加します。

 

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/widgets/Search",
    "esri/widgets/BasemapGallery",
    "esri/widgets/Print",
    "esri/widgets/Expand",
    "esri/widgets/Editor",
    "esri/widgets/Directions"
], function(Map, MapView, Search, BasemapGallery, Print, Expand, Editor, Directions) {

 

② ナビゲーション ウィジェットの作成

 

require で追加した Directions モジュールを使用して、Directions クラスから directions オブジェクトを作成します。directions オブジェクトの view プロパティに view を設定します。

 

/************************************************************
* 省略
************************************************************/

// ナビゲーション ウィジェット
var directions = new Directions ({
    view: view
});

 

Expand ウィジェットに追加

 

前回の記事でも紹介しましたが、Expand ウィジェットを活用することによってより洗練されたUI を持つ地図アプリを作成することができるので、今回作成するDirections ウィジェットも Expand ウィジェットに追加します。

 

/************************************************************
* 省略
************************************************************/

view.when(function() {
    view.ui.add(createExpandWidgets([search, basemapGallery, print, editor, directions]), ‘top-right’);
});

function createExpandWidgets(widgets){
  return widgets.map(widget => new Expand({
      view: view,
      content: widget,
      expanded: false,
      group: ‘top-right’
  }))
}

 

4. ナビゲーション ウィジェットの使い方と機能

 

ナビゲーション ウィジェットでは、以下項目の設定をすることができます。

 

・出発地

・目的地/経由地

・移動モード(運転時間優先でのルート検索や運転距離優先でのルート検索など)

・出発時間

 

そして、ルート検索後、目的地までのルートの詳細を確認することができます。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

また、移動モードの変更や出発地と目的地の入れ替えなども簡単に実行することが可能です。

 

 

5. シンボル設定

 

出発地と目的地/経由地にプロットされるポイントとルートのラインシンボルの設定をすることができます。

 

① SympleMarkerSymbolモジュールの追加

 

require ステートメントで SimpleMarkerSymbol を追加します。

 

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/widgets/Search",
    "esri/widgets/BasemapGallery",
    "esri/widgets/Print",
    "esri/widgets/Expand",
    "esri/widgets/Editor",
    "esri/widgets/Directions",
    "esri/symbols/SimpleMarkerSymbol"
], function(Map, MapView, Search, BasemapGallery, Print, Expand, Editor, Directions, SimpleMarkerSymbol) {

 

ポイント用シンボル作成

SimpleMarkerSymbol 型のインスタンスを戻り値とする「createStopSymbol」メソッドを作成し、directionsオブジェクトのstopSymbols の各プロパティにセットします。

 

function createStopSymbol(color, size) {
  return new SimpleMarkerSymbol({
    style: "simple-marker",
    size: size,
    outline: {
      width: "2px",
      color: "white"
  },
    color: color
  });
}

// ポイントシンボル設定
directions.stopSymbols.first = createStopSymbol("green","14px");
directions.stopSymbols.middle = createStopSymbol("black","10px");
directions.stopSymbols.last = createStopSymbol("red","14px");

 

③ ライン用シンボル作成

 

directionsオブジェクトの stopSymbols の各プロパティにラインシンボル用の値をセットします。

 

// ラインシンボル設定
directions.routeSymbol.width = "2";
directions.routeSymbol.color = [0, 0, 0, 0.75];
directions.routeSymbol.style = "short-dot";

 

以下の動画のようにシンボルが設定されます。

 

 

6. チャレンジ:ウィジェットを組み合わせて使ってみよう!

シリーズ第二弾の印刷ウィジェット編で印刷ウィジェットの実装について紹介しましたが、ナビゲーション ウィジェット使用後に印刷ウィジェットを使用することで、簡単に目的地までの道順付きの地図を出力することができます。

 

ウィジェット単体でも便利ですが、ウィジェットを組合せて使用することでより便利なアプリケーションを開発することができます。ArcGIS API for JavaScript には本シリーズで紹介したウィジェット以外にも様々なウィジェットが搭載されています。業務に合わせて最適なウィジェットの組合せを考えてみてください。

 

7. まとめ

今回はルート検索機能を手軽に実装できるナビゲーション ウィジェットを紹介しました。ナビゲーション ウィジェットを使えばたった数行のコードで、汎用的に使えるルート検索機能を実装できます。本シリーズで今まで紹介したウィジェットも含めて、活用ください。

 

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

 

● ナビゲーション ウィジェット:https://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/widget-directions/widget-directions.html 

 

次回はセキュアなログイン認証機能を実装する上で便利な、OAuth 2.0についてご紹介します。

 

8. 関連リンク

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

  1. はじめての Web マッピングアプリケーション開発:地図表示編
  2. はじめてのWeb マッピングアプリケーション開発:レイヤー表示編
  3. はじめての Web マッピングアプリケーション開発:レイヤーの可視化編
  4. はじめての Web マッピングアプリケーション開発:ポップアップの設定編
  5. はじめての Web マッピングアプリケーション開発:Web マップの作成・表示編
  6. はじめてのWeb マッピングアプリケーション開発:グラフィック編
  7. はじめてのWeb マッピングアプリケーション開発:クエリ編
  8. 続編 はじめての Web マッピングアプリケーション開発:ウィジェット シリーズ編
  9. 続編 はじめての Web マッピングアプリケーション開発:印刷ウィジェット編
  10. 続編 はじめての Web マッピングアプリケーション開発:編集ウィジェット編

● ArcGIS API for JavaScript

● ArcGIS for Developer 開発リソース集

Attachments

    Outcomes