はじめに
この記事は、本日配信された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で割っています。sliderのvalueの値が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を使ってレイヤーのプロパティ値を変更する方法を確認しました。
Discussion