概要
- Node.js 用ライブラリの osm-static-maps を使って OpenStreetMap や地理院地図の画像を取得する
今回の環境
- macOS Catalina + Node.js v14.9.0
osm-static-maps のインストール
osm-static-maps パッケージをインストールする。
$ npm install osm-static-maps
OpenStreetMap の地図画像を取得する
ソースコード。
'use strict'constosmsm=require('osm-static-maps');constfs=require('fs');(async()=>{try{// 地図画像の Buffer オブジェクトを取得constimageBinaryBuffer=awaitosmsm({width:800,// 画像の横幅(ピクセル)height:600,// 画像の縦幅(ピクセル)center:'136.882090,35.170560',// 経度,緯度zoom:20,// ズームレベルtype:'png'// PNG 画像フォーマット})// 地図画像データをファイルに出力awaitfs.promises.writeFile('osm.png',imageBinaryBuffer)process.exit(0);}catch(err){console.error(err);process.exit(1);}})();
実行結果。
地理院地図の地図画像を取得する
ソースコード。
'use strict'constosmsm=require('osm-static-maps');constfs=require('fs');(async()=>{try{// 国土地理院の地理院タイルを使うconsttileserverUrl='https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'constattribution='osm-static-maps / 出典: 地理院タイル'// 地図画像の Buffer オブジェクトを取得constimageBinaryBuffer=awaitosmsm({tileserverUrl:tileserverUrl,attribution:attribution,width:800,// 画像の横幅(ピクセル)height:600,// 画像の縦幅(ピクセル)center:'136.882090,35.170560',// 経度,緯度zoom:14,// ズームレベルtype:'png'// PNG 画像フォーマット})// 地図画像データをファイルに出力awaitfs.promises.writeFile('chiriin.png',imageBinaryBuffer)process.exit(0);}catch(err){console.error(err);process.exit(1);}})();
実行結果。
参考資料
- GitHub - jperelli/osm-static-maps: Openstreetmap static maps is a nodejs lib, CLI and server open source inspired on google static map service
- Static map images - OpenStreetMap Wiki
- Tile servers - OpenStreetMap Wiki
- Zoom levels - OpenStreetMap Wiki
- Tile Usage Policy (OSMF Operations Working Group)
- 地理院地図|地理院タイルについて
- 地理院地図|地理院タイル一覧
- File system | Node.js v14.9.0 Documentation