maemaewaterの日記スマートフォン用の表示で見るmaemaewaterの日記PHP/Python/JavaScript/C#/C++などによるプログラムに関することを主に書いています。PostgreSQLOpenStreetMapというプロジェクトがあることを知り、綺麗な地図だなと思っていたらMapnikを使ってレンダリングしているよということが書かれており地図画像が出力できたら面白いなということで試してみました。(WSL)で試してみました。全体の流れですが、まずは元となる地図のデータを用意する必要があります。そのあとにその地図をレンダリングするMapnikの準備をしていきます。Mapnikで地図をレンダリングするときには、地図のスタイルを指定するXMLファイルを用意するのですが、OpenStreetMapで使われているものを今回は利用していく形にします(ものすごく細かい定義が多くされているので最初からつくると本当に大変なことになると思います)。地図データを用意する地図データですが、OpenStreetMapによるとミラーサイトからダウンロードして下さいねと書かれているのでミラーサイトからOSM形式のファイルをダウンロードします。形式のものをダウンロードしてきました。容量も大きいのでまず試すという目的では一部だけでも大丈夫だと思います。ここでダウンロードしたファイルは解凍する必要はないのでそのままにしておきます(この後利用するツールで自動的に解凍してくれます)。形式のファイルを直接レンダリングすることができるのですが、OpenStreetMapで使用している地図のスタイルの方でPostgreSQLからデータを呼び出すような記述がされています。そのようなことからここでダウンロードしたファイルを直接利用するのではなく、一度PostgreSQLにデータをインポートしていきます。PostgreSQLのインストールとセットアップaptを使ってインストールしていきます。PostGISも使用しているのでこちらもインストールしていきます。postgis完了したら起動(起動していなければ再起動)します。restartpostgresユーザーとして新しくユーザーとgisという名前のDBを作成します。gis次にDBにプラグイン(PostGISとhstore)を導入します。これで、gisのDBでPostGISなどが利用できるようになります。hstore;これでPostgreSQL関連の作業はおしまいです。地図データの取り込み地図を取り込む際にスタイルを定義しているプロジェクト(openstreetmap-carto)のスクリプトを利用しているようですので、まずスタイルのプロジェクトファイルを取得します。https://github.com/gravitystorm/openstreetmap-carto.git次に実際にOSM形式のファイルを取り込むためのプログラムであるosm2pgsqlを導入します。aptでインストールができるので、こちらを利用します。osm2pgsqlインストールができたら次のコマンドでPostgreSQLにデータを取り込みします。時間がかかりますので待ちます。オプションもつけると良いそうです。これで地図データの用意はおしまいです。Mapnikのスタイルファイルを用意するスタイルファイルの変換OpenStreetMapで使用されているスタイルファイルを作成しているプロジェクトが、実は先ほどのopenstreetmap-cartoになります。ここで作成されているものをMapnikで読み込めるように変換を行う必要があります。このプログラムがcartoになりますが、node.jsのnpm経由でインストールできます。aptでnode.jsをインストールします。npm(WSLの場合はhomebrew経由でインストールした方がパスの問題などが起こらないので楽かもしれません)npmでcartoをインストールします。cartoインストールが終わったらopenstreetmap-cartoのパスに移動して変換を実行します。(nodemodulesの場所は環境に合わせて変える)フォントのインストールaptでインストールします。実は、変換されたmapnik.xmlの中で.shpファイルの参照が行われています。(他にもopenstreetmap-cartoにあるsymbolsのパスの中のファイルも参照しているのでmapnik.xmlを別のパスで利用するときには注意が必要です。)このため、mapnik.xmlが置いてあるパスにdataディレクトリを作成してその中にファイルをダウンロードして解凍していきます。ダウンロードするファイルはこちらopensteetmap-cartoのインストールのドキュメントに書かれています。)Mapnikの導入からレンダリングいよいよMapnikを導入します。試したところnode.js版が一番楽なのではないかと思いますので、node.js版の説明になります。node.jsのインストール(インストールを行っていない場合のみ)aptでインストールします。npm(WSLの場合はhomebrew経由でインストールした方がパスの問題などが起こらないので楽かもしれません)mapnikのインストールnpm経由でインストールします。mapnikMapnikを使用してレンダリング(全体)mapnikを使用して地図全体をレンダリングするコードは次のようになります。いうファイル名で保存します。次のコマンドで実行します。出力されていれば動作しています。いうファイルで次のようなコードを書きます。));map.renderFileSync('map_zoom.png');同じように実行します。ex2.jsmap_zoom.pngが出力されていれば完了です。Serviceを試してみたりしています。EC2でDynamoDBをPHPから使うまでの道のりです。はてなブログProPHP/Python/JavaScript/C#/C++などによるプログラムに関することを主に書いています。読者になるはてなブログをはじめよう!maemaewaterさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。