Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

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

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

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

 本掲載では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軸と方向を並行移動させることで地図を移動する表現が実現できます。


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

著者プロフィール

バックナンバー

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

もっと読む

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5