SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

スマホアプリ開発の最新トレンド! ぜったい外せない位置情報活用術

OpenGLを使った地図描画エンジンの作り方(2)

スマホアプリ開発の最新トレンド! ぜったい外せない位置情報活用術 番外編

  • このエントリーをはてなブックマークに追加

 本掲載ではOpenGLを使ったベクトル版地図エンジンの作り方を紹介しています。ベクトルエンジンでの地図描画は、前回ご紹介した「Android版Yahoo!地図アプリ」や、12月9日にフルリニューアルした「iPhone版Yahoo!地図アプリ」でも新たに採用されています。前回の記事では、基本を構成するクラスを作成しました。今回は、その中で『視点』について掘り下げていきたいと思います。

  • このエントリーをはてなブックマークに追加

はじめに

 Yahoo!地図アプリで使われている地図は、メルカトル図法で投影されたデータを使用しています。メルカトル図法は、地球を丸い筒上に投影したもので、緯度と経度が直交する平面の形で地球を表現できます。そのため、タイル上の地図を張り合わせて表現することが多いインターネット地図では、メルカトル図法を採用することが一般的です。今回のベクトル版地図エンジンでも、世界をXYでタイル上に区切ったデータ形式にしているため、メルカトル図法で投影されています。

図1(地図データはXYで分割されている)
図1(地図データはXYで分割されている)

視点について

 地図は、XYで構成される平面での表現となることを理解いただけたと思います。では、ベクトル版地図エンジンではそれをどのように表示しているかを説明します。ここで重要なのが、視点(カメラ)になります。従来のラスター版地図エンジンでは、Canvasに対してタイル画像を張り合わせる形で描画してきました。そのため、Canvasを真上から見るという視点で常に地図が描画されています。

図2(Canvasを真上からみている感じ)
図2(Canvasを真上からみている感じ)

 OpenGLの世界では、画面に対して平行投影された形で同様の表現が可能です。

図3(並行投影)
図3(並行投影)

 サンプルコードでは、以下の箇所でその設定が行われています。

GL20MyRenderer
public void onSurfaceChanged(GL10 arg0, int width, int height) {
	int size = (width <= height) ? width : height;

	//ビューポートの設定します。
	GLES20.glViewport((width - size) / 2, (height - size) / 2, size, size);

	//ビューボリュームを設定します。
	Matrix.orthoM(mProjMatrix, 0, -1000000.0f, 1000000.0f, -1000000.0f, 1000000.0f, 0.0f, 10000000.0f);
	GLES20.glUniformMatrix4fv(muProjMatrix, 1, false, mProjMatrix, 0);
}

 ビューポートの設定をGLES20.glViewportで行い、Matrix.orthoMを使って並行投影を指示しています。次に視点(カメラ)についてです。

GL20MyRenderer
public void onSurfaceCreated(GL10 arg0, EGLConfig arg1) {
	省略
	//視点(カメラ)の位置を設定します。
	Matrix.setLookAtM(mViewMatrix, 0, mEyeX, mEyeY, mEyeZ, mEyeX, mEyeY, 0.0f, 0.0f, 1.0f, 0.0f);
	GLES20.glUniformMatrix4fv(muViewMatrix, 1, false, mViewMatrix, 0);
}

 Matrix.setLookAtMを使って、視点の位置と方向と軸を設定します。サンプルでは、地図平面に対してY軸が上の状態で垂直に見下ろしている状態です。地図の位置を変えたい場合は、視点のXY軸と方向を並行移動させることで地図を移動する表現が実現できます。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
まとめ

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
スマホアプリ開発の最新トレンド! ぜったい外せない位置情報活用術連載記事一覧

もっと読む

この記事の著者

冨川 修広(ヤフー株式会社)(トミカワ ノブヒロ(ヤフーカブシキカイシャ))

2008年ヤフー入社。地図に関するシステム全般の設計・開発を担当。フルリニューアルしたAndroid版Yahoo!地図アプリでは、プロダクトマネージャとしてプロジェクト全体を統括。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7520 2013/12/11 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング