Mapbox Newsletter WEEKLY TIPSの解説 -「陰影処理を追加」

はじめに

この記事は、先日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「陰影処理を追加」についての解説です。このサンプルではhillshadeレイヤーの使い方について例示しています。また、Newsletterの購読はこちらからお申し込みいただけます。

以下が本サンプルのデモです。

コードを確認

まずExamplesのコードを見に行きましょう。

日本語サイト

英語サイト

基本的に同じコードですが、英語版はMapbox Light v11スタイルを使用しているのでこちらを参照します。また、英語版はMapbox GL JS v3が使用されています。

HTML/CSS

まずHTMLを見ていきましょう。

以下は地図を表示するエレメントです。

<div id="map"></div>

Mapの作成

次にJavaScriptのコードを見ていきます。以下のコードはいつも通り、Mapオブジェクトを作成しています。containerで地図を表示するHTMLエレメントのidを指定します。

const map = new mapboxgl.Map({
  container: 'map',
  // The Mapbox Light style doesn't contain hillshading.
  // You could also add it in Mapbox Studio.
  style: 'mapbox://styles/mapbox/light-v11',
  center: [-119.55, 37.71],
  zoom: 9
});

ソースとレイヤーの作成

ソースとレイヤーを追加するので、map.on('load', ()=> {/*ここ*/})の中に処理を書きます。

まずはソースです。Mapbox Terrain-DEM v1を使用します。DEM (Digital Elevation Model) は各ピクセルの標高を色情報にエンコードしたものです。以前はMapbox Terrain-RGB v1を使用していましたが、今はMapbox Terrain-DEM v1の使用が推奨されます。ソースのtypeはraster-demを指定します。

map.addSource('dem', {
  'type': 'raster-dem',
  'url': 'mapbox://mapbox.mapbox-terrain-dem-v1'
});

次はレイヤーです。先程のソースを使用します。レイヤーのtypeはhillshadeを指定します。

map.addLayer(
  {
    'id': 'hillshading',
    'source': 'dem',
    'type': 'hillshade'
  },
  // Insert below land-structure-polygon layer,
  // where hillshading sits in the Mapbox Streets style.
  'land-structure-polygon'
);

まとめ

このサンプルではhillshadeレイヤーの使い方について確認しました。またMapbox Light v11スタイルはもともと以下のようにhillshadeがありません。

hillshadeをつけることで山の起伏がはっきりとわかりますね。ちなみに、Streets v12, Outdoors v12, Standard等のスタイルはhillshadeがあります。