LoginSignup
7
5

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-09-06

概要

  • 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);
  }
})();

実行結果。

osm.png

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

ソースコード。

'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);
  }
})();

実行結果。

chiriin.png

参考資料

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5