Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

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

$
0
0

概要

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

実行結果。

osm.png

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

ソースコード。

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

実行結果。

chiriin.png

参考資料


Viewing all articles
Browse latest Browse all 8691

Trending Articles