deck.glで衛星写真(画像)を地図に掲載する

この記事はdeck.gl Advent Calendar 2021 参加記事です。

概要

先日、大きな竜巻被害のあったケンタッキー州メイフィールドの衛星写真を地図に掲載したところ、反響をいただけたので、deck.glで地図上に画像を表示する方法を記載しておきます。

ケンタッキー州メイフィールドを襲った竜巻。
12/11に撮影された衛星写真を地図に重ねてみた。
かなりの規模で被害が発生しているよう。https://t.co/yRXjTLqaWc pic.twitter.com/WltkgMDm79
— 清水正行 (@_shimizu) December 12, 2021

サンプルコード

解説

基本的には画像の左上の座標と右下の座標(boundsBox/bbox)を調べてBitmapLayerを使って表示するだけです。

衛星写真の場合は、購入したさいのメタデータにbboxの値が含まれていることが多いのでのでそちらを指定するだけです。

また、bboxfinderのようなサービスを使うことでbboxの値を調べる事ができます。

import { BitmapLayer } from "deck.gl";

export function renderLayers(props) {
  
  
  const imgLayer = new BitmapLayer({
    id: "bitmap-layer",
    //画像の左上、右下の座標を指定
    bounds: [-88.64538, 36.73265, -88.62293, 36.75064],
    //表示する画像を指定
    image: "img/mayfield-2021-12-11.jpg"
  });


  return [imgLayer];
}

import { BitmapLayer } from "deck.gl";

export function renderLayers(props) {

const imgLayer = new BitmapLayer({

id: "bitmap-layer",

//画像の左上、右下の座標を指定

bounds: [-88.64538, 36.73265, -88.62293, 36.75064],

//表示する画像を指定

image: "img/mayfield-2021-12-11.jpg"

});

return [imgLayer];

}

BitmapLayerは画像を表示するためのシンプルなレイヤーですが、imageプロパティには画像の他にcanvas要素やvideo要素を指定することができます。

video要素を使って地図上に動画をオーバーレイする方法については、12/20に掲載する予定の「deck.glで地図上に動画を表示する」にて解説します。

概要

サンプルコード

解説

投稿者: shimizu