deck.glで地球儀を表示する

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

概要

deck.glはviewを変更することでデフォルトのWebメルカトル図法の地図以外の投影法を使って描画することができます。ここでは、新たに追加されたglobe viewを使って地球儀を表示します。

サンプルコード

解説

基本的には、deck.glコンポーネントのviewsプロパティにGlobeViewのインスタンスを渡して上げるだけで地球儀のようにベースマップやレイヤーを表示します。

ただし、GeoJSONレイヤーはそのままだとベースマップの裏側に回ってしまうことがあるので高さを指定しています。

また、ベースマップを表示しているtileLayerでは、サブレイヤーのBitmapLayerで新たに座標系を設定しています。

この設定をおこなわないと位置がズレてしまうので注意が必要です。

import React, { useEffect, useState } from "react";
import DeckGL, {
  MapController,
  //globviewを読み込む(まだexperimentalなのでアンダーバーがついています)
  _GlobeView as GlobeView
} from "deck.gl";

const App = () => {

  //レンダリング
  return (
      <DeckGL
        views={
          //GlobeViewを適用する
          new GlobeView()
        }
      />
  );
};

export default App;

import React, { useEffect, useState } from "react";

import DeckGL, {

MapController,

//globviewを読み込む(まだexperimentalなのでアンダーバーがついています)

_GlobeView as GlobeView

} from "deck.gl";

const App = () => {

//レンダリング

return (

<DeckGL

views={

//GlobeViewを適用する

new GlobeView()

}

);

};

export default App;

import {
  COORDINATE_SYSTEM //ビルトインされている座標系を読み込み
} from "deck.gl";

export function renderLayers(props) {
  //県境界データを可視化
  const geoJSONlayer = new GeoJsonLayer({
    id: "geojson-layer",
    data: "./data/countries-mini.geojson",
    pickable: true,
    stroked: true,
    filled: true,
    wireframe: true,
    lineWidthMinPixels: 5,
    extruded: true,
    getElevation: 30000, //高さを設定しないとタイルの裏に回ってしまう。
    getFillColor: [0, 160, 0, 180],
    getLineColor: [0, 0, 0, 255]
  });


  //OSMタイルを読み込みベースマップとして表示
  const tileLayer = new TileLayer({
    data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",
    minZoom: 0,
    maxZoom: 19,
    tileSize: 256,

    renderSubLayers: (props) => {
      const {
        bbox: { west, south, east, north }
      } = props.tile;

      return new BitmapLayer(props, {
        data: null,
        image: props.data,
        //画像(タイル)を直交座標系で配置する
        _imageCoordinateSystem: COORDINATE_SYSTEM.CARTESIAN,
        bounds: [west, south, east, north]
      });
    }
  });

  return [tileLayer, geoJSONlayer];
}

import {

COORDINATE_SYSTEM //ビルトインされている座標系を読み込み

} from "deck.gl";

export function renderLayers(props) {

//県境界データを可視化

const geoJSONlayer = new GeoJsonLayer({

id: "geojson-layer",

data: "./data/countries-mini.geojson",

pickable: true,

stroked: true,

filled: true,

wireframe: true,

lineWidthMinPixels: 5,

extruded: true,

getElevation: 30000, //高さを設定しないとタイルの裏に回ってしまう。

getFillColor: [0, 160, 0, 180],

getLineColor: [0, 0, 0, 255]

});

//OSMタイルを読み込みベースマップとして表示

const tileLayer = new TileLayer({

data: "https://c.tile.openstreetmap.org/{z}/{x}/{y}.png",

minZoom: 0,

maxZoom: 19,

tileSize: 256,

renderSubLayers: (props) => {

const {

bbox: { west, south, east, north }

} = props.tile;

return new BitmapLayer(props, {

data: null,

image: props.data,

//画像(タイル)を直交座標系で配置する

_imageCoordinateSystem: COORDINATE_SYSTEM.CARTESIAN,

bounds: [west, south, east, north]

});

}

});

return [tileLayer, geoJSONlayer];

}

概要

サンプルコード

解説

投稿者: shimizu