Tweet about this on TwitterShare on FacebookShare on Google+

お問い合わせ

会社名任意
ご担当者様氏名必須
メールアドレス必須
お問合せ内容必須

個人情報保護方針

BLOG

OpenStreetMapで地図タイルサーバーを構築する(スタイル変更編)

osm

お礼: はてなブックマークやツイッターでたくさんの方に注目して頂きありがとうございました。
皆様の環境でもうまくインストールできたでしょうか?今回は先回の記事に続くお話を行いたいと思います。

OpenStreetMapはオープンソースの地理情報データを作成する事を目的としたプロジェクトで、
世界中の有志が地図を改善するために日々変更を加えています。

前回の記事ではOpenStreetMapを使って地図サーバーを構築するためのインストール方法をカバーしました。
オープンソースで便利・多機能とは言え、あまり注目されなかった理由の一つに見た目があります。

WS000169 WS000172
上記のようにデフォルトのスタイル(Mapnik-Style)ではズームインすると地図が見づらかったり、
Googleや他の地図と比べても見劣りするのは一目瞭然です。

そこで今回はMapQuest-Mapnik-Styleを導入し、見た目を改善していきます。
既に導入済の環境を前提としてお話しますので、まだOpenStreetMapが導入されていない方は、
前回の記事も参照しながら頑張ってください。

 

■ MapQuest-Mapnik-Styleの導入
ソースがGithubに公開されていますので、ダウンロード、インストールを行います。

git clone https://github.com/MapQuest/MapQuest-Mapnik-Style

・前提ファイルのダウンロード
MapQuest-Mapnik-Styleというフォルダが作成されていると思います。
その中にworld_boundariesを作成し中に以下のファイルをダウンロード、解凍します。
※既にmapnik-styleでworld_boundariesが作られていますので、それをcp -aでコピーし、最後のファイルだけダウンロードでもOKです。

wget http://tile.openstreetmap.org/world_boundaries-spherical.tgz
wget http://tile.openstreetmap.org/processed_p.tar.bz2
wget http://tile.openstreetmap.org/shoreline_300.tar.bz2
wget http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/10m/cultural/ne_10m_populated_places.zip
wget http://www.naturalearthdata.com/http//www.naturalearthdata.com/download/110m/cultural/ne_110m_admin_0_boundary_lines_land.zip
wget http://developer.mapquest.com/content/static/geotiffs/mercator_tiffs.tar

・設定用XMLの生成
設定用XMLを生成するため、前回の記事で構築したmapnik-stylesheetsの中にあるgenerate_xml.pyを
今回構築するMapQuest-Mapnik-Styleディレクトリの中にコピーし、その後以下のコマンドを実行します。

./generate_xml.py --host localhost --user postgres --dbname gis --inc ./mapquest_inc --symbols ./mapquest_symbols --world_boundaries ./world_boundaries --accept-none

以上でタイル生成の手順は終わりです。
続いて複数のレイヤー設定を行います。

 

■ 複数のレイヤー生成定義
前回はdefaultという定義で、osm_tiles2というディレクトリに地図タイルを生成する設定を行いました。
renderd.confでは複数のレイヤーを生成する事が可能ですので、
今回はeuという定義で、euというディレクトリに地図タイルを生成したいと思います。
指定するXMLファイルはGitからダウンロードした時に付属するmapquest-eu.xmlファイルを指定します。

vi /etc/renderd.conf
--------------------------------------------------
// 既存設定
[default]
URI=/osm_tiles2/
XML=/path_to_mapnik-style/osm.xml # mapnik-style内のosm.xmlを指定
HOST=localhost

// 今回の追加設定
[eu]
URI=/eu/
XML=/path_to_MapQuest_Mapnik-Style/mapquest-eu.xml # MapQuest_Mapnik_Style内にあるmapquest-eu.xmlを指定
HOST=localhost

・renderdとApacheの再起動
設定後はrenderdをkillコマンド等で停止させ、以下のコマンドで起動させます。
Apacheも設定を反映するために再起動が必要ですので忘れないようにしましょう。

/usr/local/bin/renderd -f > /var/log/renderd.log 2> /var/log/renderd.log &
/etc/init.d/httpd restart

・動作確認
前回は/var/www/html/index.htmlで地図にアクセスするためのHTMLファイルを作りましたが、
今回はindex2.htmlというファイルを作ります。以下をコピペしてください。

vi /var/www/html/index2.html
--------------------------------------------------
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
html, body, #basicMap {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34),
numZoomLevels: 20,
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.Permalink(),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.KeyboardDefaults()
 
]
};
map = new OpenLayers.Map("basicMap",options);
var newL = new OpenLayers.Layer.OSM("Default", "/eu/${z}/${x}/${y}.png", {numZoomLevels: 19});
map.addLayer(newL);
map.zoomIn();
}
</script>
</head>
<body onload="init();">
<div id="basicMap"></div>
</body>
</html>

 

■ 動作確認
それではブラウザーよりhttp://地図タイルサーバーのIPアドレス/index2.htmlを叩いてみてください。
以下の画面が表示されているかと思います。以前と比べると随分と地図の雰囲気が変わりましたね。

WS000178

それではズームインをしてみましょう。

WS000176 WS000177

確かに以前と比べると見栄えがよくなったような気がします。
しかし、これ少し前のiPhoneの地図にそっくりですね。そして情報量も少ないような・・・。

 

今回はMapQuest-Mapnik-Styleを導入し、標準とは異なるレイヤーによって見た目を改善させました。
ですが、情報量が少ないという問題が出てしまいましたので、
次回は情報量の改善と日本の仕様に合わせて県道と国道の表示を変えてみたいと思います。

ページの先頭へ