はじめてのWeb マッピングアプリケーション開発 : グラフィック編
3786
0
12-04-2018 09:45 PM
この記事は「はじめてのWeb マッピングアプリケーション開発」のシリーズ記事として、はじめて地図アプリ開発を行う開発者の方に向けて、ArcGIS API for JavaScript を使用した Web アプリ開発の流れをシリーズで連載しています。
第 6 回目となる今回は、ArcGIS API for JavaScript の必須コンポーネントである グラフィック を紹介します。
グラフィックを使用して単純なシンボルでマップ上の場所を表示したり、クエリや他のタスクの結果を表示することが可能です。さらに使いこなすと、ジオメトリ、レイヤー、タスク、およびポップアップをより効果的に操作することも可能になります。
今回は今後シリーズ記事の中でも使うために、グラフィックの基礎部分を中心に紹介します。前回の記事と同様にソースコードは ESRIジャパンの GitHub で公開していますので、同時に参照いただきながら、本記事を読んでいただければ、より理解がすすむかと思います。
Web アプリ開発の実行環境をお持ちでない方は、JSBin を使用して、Web ブラウザー上でコードの入力・編集、アプリの実行を試すこともできます。
グラフィックを実装してみよう
1. 地図の表示
Map や View を定義して、地図を表示するまでのステップは、これまでの記事の中でも何度も取り上げているのでここでは省略します。
2. グラフィックの特性
グラフィック は、次のような４つのメインのプロパティがあります。
プロパティ 型 概要
| geometry | Geometry | 現実の座標でグラフィックのジオメトリまたは位置情報を定義します |
| symbol | Symbol | ビューでのグラフィックのシンボルを定義します |
| attributes | Object | グラフィックのデータの属性が含まれます |
| popupTemplate | PopupTemplate | グラフィックの属性をポップアップで表示するテンプレート を定義します |
以下に、各プロパティを使ったコードでの記述方法を見ていきましょう。
3. グラフィック の実装
1） ジオメトリ（ライン）を作成
reqiure で ポリライン モジュールを宣言し、位置を表す新しいポリライン ジオメトリを作成します。
ライン に頂点を追加するには、paths プロパティを使用します。
require([
"esri/Map",
"esri/views/MapView"
], function(
Map,
MapView
) {
//
// ここにはMapとMapViewの定義が入るが省略
//
// 緯度・経度座標でライン ジオメトリを作成
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
]
]
};
});
2）シンボル を作成
1) で山脈の位置の ジオメトリ が作成されました。ビューに線を描画するには シンボル が必要です。
シンプル ライン シンボル で山脈のライン シンボルを作成します。
require([
"esri/Map",
"esri/views/MapView"
], function(
Map,
MapView
) {
//
// ここにはMapとMapViewの定義と、上記のライン ジオメトリの作成のコードが入るが省略
//
// viewで描画するシンプル ライン シンボルを定義
const lineSymbol = {
type: "simple-line", // SimpleLineSymbol に自動的に型変換
color: [226, 119, 40], // RGB カラーの値を配列として定義
width: 4
};
});
3）属性を作成
属性は、グラフィックに関する重要な情報を提供し、アプリケーションの有用性を高めることができます。
このステップではラインのグラフィックに2つの属性（名称、備考）を追加します。
require([
"esri/Map",
"esri/views/MapView"
], function(
Map,
MapView
) {
//
// ここにはMapとMapViewの定義と、上記のライン ジオメトリの作成、
// シンボル定義のコードが入るが省略
//
// ライン オブジェクトの属性を定義
const lineAtt = {
名称: "日高山脈", // 山地・山脈名
備考: "北海道の背骨" // 備考
};
});
4）グラフィックを作成し、ジオメトリ、シンボル、属性を割り当て
require で グラフィック モジュールを宣言し、作成したグラフィックにジオメトリ、シンボル、属性を設定後、それを MapView に追加します。
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic"
], function(
Map,
MapView,
Graphic
) {
//
// ここにはMapとMapViewの定義と、上記のライン ジオメトリの作成、
// シンボル定義、属性定義のコードが入るが省略
//
// グラフィックを作成
const polylineGraphic = new Graphic({
geometry: polyline, // 前のステップまでで作成したジオメトリを追加
symbol: lineSymbol, // 前のステップまでで作成したシンボルを追加
attributes: lineAtt // 前のステップまでで作成した属性を追加
});
// グラフィックを viewの デフォルト グラフィック ビューへ追加
// 複数のグラフィックを追加する場合は、addManyメソッドへgraphicの配列を渡す
view.graphics.add(polylineGraphic);
});
5）PopupTemplate をグラフィックに割り当て
ポップアップを使用すると、ユーザーはグラフィックの属性にアクセスできます。単純な PopupTemplate を設定すると、ビューでクリックしたときにそのフィーチャの属性を表示できます。
Popups および PopupTemplate の操作方法の詳細については、Intro to popups tutorial およびその他の Popup サンプル、もしくは シリーズの第4回目の記事 を参照してください。
新しい PopupTemplate をグラフィックに追加します。この手順は、グラフィックのコンストラクタで行うか、GraphicsLayer にグラフィックを追加する前に行う必要があります。
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic"
], function(
Map,
MapView,
Graphic
) {
//
// ここにはMapとMapViewの定義と、上記のライン ジオメトリの作成、
// シンボル定義、属性定義のコードが入るが省略
//
// グラフィックを作成
const polylineGraphic = new Graphic({
geometry: polyline, // ジオメトリを追加
symbol: lineSymbol, // シンボルを追加
attributes: lineAtt, // 属性を追加
popupTemplate: {
title: "{名称}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "名称"
}, {
fieldName: "備考"
}]
}]
}
});
// グラフィックをデフォルトのグラフィック ビューに追加
view.graphics.add(polylineGraphic);
});
4. 結論
これで、山脈の位置を示す簡単なマップが作成されました。ラインをクリックして、グラフィックに追加した属性を表示することができます。
最終的な JavaScript コードは次のようになります。
require([
"esri/Map",
"esri/views/MapView",
"esri/Graphic"
], function(
Map,
MapView,
Graphic
) {
var map = new Map({
basemap: "hybrid"
});
var view = new MapView({
center: [135, 36],
container: "viewDiv",
map: map,
zoom: 5,
constraints: { // 山地山脈はアバウトなため拡大と縮小できるスケールを制限
minZoom: 4,
maxZoom: 7
}
});
// 緯度・経度座標でライン ジオメトリを作成
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
]
]
};
// viewで描画するシンプル ライン シンボルを定義
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: { // PopupTemplate に自動的に型変換
title: "{名称}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "名称"
},
{
fieldName: "備考"
}]
}]
}
});
// グラフィックを view の グラフィック レイヤー に追加
view.graphics.add(polylineGraphic);
});
まとめ
GraphicsLayer にグラフィックを追加すると、さまざまなジオメトリ タイプのフィーチャを使用するときに便利です。ただし、同じジオメトリ タイプの グラフィック でのみ動作する場合は、クライアント側の FeatureLayer を使用してレンダリング機能とクエリ機能を利用することをお勧めします。これを行う方法の例については、Create a FeatureLayer with client side graphics のサンプルを参照してください。
今回、GitHub 上で公開している最終的なサンプル コードは、中学生や高校生の地理の教科書に出てくる「日本の主な山地・山脈」、「主な活火山」をグラフィックとして座標を定義して追加してみました。 ポップアップで表示される名称、すべて回答できるでしょうか？ グラフィックについて学ぶついでに、日本の山地・山脈、活火山についても見直してみるとよいかもしれません。
【完成図イメージ】
今回作成したサンプルは以下で動作を確認することも可能です。
- グラフィックで学ぶ「日本の山地・山脈、活火山」：http://esrijapan.github.io/arcgis-samples-4.0-js/samples/startup_api/intro_graphics/intro-graphics.h...
次回はクエリ（属性検索）を行い、グラフィックに表示する方法をご紹介します。
関連リンク
- ArcGIS API for JavaScript（ArcGIS for Developers）：https://developers.arcgis.com/javascript/
