Node.js + osm-static-maps で OpenStreetMap や地理院地図の画像を取得する

9324 ワード
地理院地図 地理院タイル OpenStreetMap Node.js Node.js テキストリンク

概要

  • 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'

const osmsm = require('osm-static-maps');
const fs = require('fs');

(async () => {

  try {

    // 地図画像の Buffer オブジェクトを取得
    const imageBinaryBuffer = await osmsm({
      width:  800, // 画像の横幅(ピクセル)
      height: 600, // 画像の縦幅(ピクセル)
      center: '136.882090,35.170560', // 経度,緯度
      zoom: 20, // ズームレベル
      type: 'png' // PNG 画像フォーマット
    })

    // 地図画像データをファイルに出力
    await fs.promises.writeFile('osm.png', imageBinaryBuffer)
    process.exit(0);

  } catch (err) {
    console.error(err);
    process.exit(1);
  }
})();

実行結果。

地理院地図の地図画像を取得する

ソースコード。

'use strict'

const osmsm = require('osm-static-maps');
const fs = require('fs');

(async () => {

  try {
    // 国土地理院の地理院タイルを使う
    const tileserverUrl = 'https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png'
    const attribution = 'osm-static-maps / 出典: 地理院タイル'

    // 地図画像の Buffer オブジェクトを取得
    const imageBinaryBuffer = await osmsm({
      tileserverUrl: tileserverUrl,
      attribution: attribution,
      width:  800, // 画像の横幅(ピクセル)
      height: 600, // 画像の縦幅(ピクセル)
      center: '136.882090,35.170560', // 経度,緯度
      zoom: 14, // ズームレベル
      type: 'png' // PNG 画像フォーマット
    })

    // 地図画像データをファイルに出力
    await fs.promises.writeFile('chiriin.png', imageBinaryBuffer)
    process.exit(0);

  } catch (err) {
    console.error(err);
    process.exit(1);
  }
})();

実行結果。

参考資料