Zenn
🪟

Mapbox Newsletter WEEKLY TIPSの解説 -「レイヤーの不透明度を調整」

2023/06/21に公開

はじめに

この記事は、本日配信されたMapbox NewsletterのWEEKLY TIPSで紹介されていた「レイヤーの不透明度を調整」についての解説です。また、Newsletterの購読はこちらからお申し込みいただけます。

このサンプルコードはsetPaintPropertyを使ってレイヤーのプロパティ値を変更する方法について例示しています。具体的にはラスターレイヤーのopacity(不透明度)を動的に変更するコードが実装されています。

コードを確認

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

日本語サイト

英語サイト

基本的に同じコードですが、英語版はスタイルがMapbox Light v11にアップグレードされているのでこちらを使用します。Mapbox Light v10ではデフォルトのプロジェクションがWebメルカトルであるのに対し、Mapbox Light v11ではGlobe(3D表示された地球)なので、印象がかなり異なります。

HTML

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

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

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

以下は不透明度を変更するスライダーを表示するエレメントです。<style>タグではこのエレメントに関するCSSが設定されています。

<div class="map-overlay top">
  <div class="map-overlay-inner">
    <label>Layer opacity: <span id="slider-value">100%</span></label>
    <input id="slider" type="range" min="0" max="100" step="0" value="100">
  </div>
</div>

Mapの作成

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

const map = new mapboxgl.Map({
  container: 'map',
  // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
  style: 'mapbox://styles/mapbox/light-v11',
  center: [-87.6321, 41.8362],
  minZoom: 9.5,
  maxZoom: 13,
  zoom: 9.5
});

不透明度を設定するスライダーおよび、現在の値を表示するラベルを取得します。

const slider = document.getElementById('slider');
const sliderValue = document.getElementById('slider-value');

map.on('load', ()=>{})ではスタイルがロードされたあとの処理を記述します。

まず、ソースを追加します。mapboxユーザーが管理するu8yyzaorというタイルセットをchicatoというidのソースとして登録しています。このタイルセットは公開されているのでMapboxアカウントをお持ちの方はここにアクセスすることでStudio上で内容が確認できます。

map.addSource('chicago', {
  'type': 'raster',
  'url': 'mapbox://mapbox.u8yyzaor'
});

次に登録したソースをもとにchicagoレイヤーを作成しています。

map.addLayer({
  'id': 'chicago',
  'source': 'chicago',
  'type': 'raster'
});

不透明度の変更

スライダーの値に変更があるたびにsetPaintPropertyを呼び出してchicagoレイヤーのraster-opacityの値を変更しています。opacityは0から1の値なので100で割っています。slidervalueの値がstringということでparseIntしてます。

slider.addEventListener('input', (e) => {
  // Adjust the layers opacity. layer here is arbitrary - this could
  // be another layer name found in your style or a custom layer
  // added on the fly using `addSource`.
  map.setPaintProperty(
    'chicago',
    'raster-opacity',
    parseInt(e.target.value, 10) / 100
  );
   
  // Value indicator
  sliderValue.textContent = e.target.value + '%';
});

他のプロパティも変えてみる

setPaintPropertyはレイヤーに存在するプロパティの値を変更できます。したがいまして、例えば指定しているプロパティをraster-brightness-maxに変更すると明るさを変えることができます。

map.setPaintProperty(
  "chicago",
  "raster-brightness-max",
  parseInt(e.target.value, 10) / 100
);

結果は以下のとおりです。

まとめ

setPaintPropertyを使ってレイヤーのプロパティ値を変更する方法を確認しました。

GitHubで編集を提案
マップボックス・ジャパン合同会社

Discussion

ログインするとコメントできます