MapLibreのレイヤー不透明度
はじめに
Terrain機能が実装されたのを機に、MapLibreを試しています(もともとLeafletをメインに使っていました)。普段からレイヤーを重ねて(背景地図にオーバーレイを半透過で)表示することが多いのですが、MapLibreの挙動で納得いかない部分(バグ?)がありました。識者の方に解決策をご教示いただきたく質問を投稿しました。
解決したいこと
Terrain設定中にsetPaintPropertyを変更しても即座に反映されません。
codepenにコードを掲載しました。
https://codepen.io/UsagiLabo/pen/QWVJddE
MapLibreのExamplesで3D Terrainを使っています。
左上に「test」と表示したボタンを配置し、それをクリックすると背景地図のOpenStreetMapの不透明度を0.1にする、という記述にしているつもりです(クリックされたことを確認するためconsoleにclickと出力しています)。
ボタンをクリックするだけでは不透明度が全く変わりません。
しかし、ボタンクリック後に地図を移動させると設定した不透明度が反映されるようです。ボタンクリックで即座に不透明度を反映させたい(不要なコードを書かずに)のですが、解決策を教えていただきたいです。
環境等
MacのFirefox、Chrome、Safariで確認しました。
MapLibreの現時点での最新版(2.4.0)で症状が発生しています。
該当する部分
document.getElementById( 'debug' ).addEventListener( 'click', () => {
map.setPaintProperty( 'osm','raster-opacity',0.1 );
//以下の記述でも同じ状況でした
//map.setPaintProperty( 'osm','raster-opacity',0.1 ).redraw();
console.log( 'clicked' );
});
自分で試したこと
Terrain未設定で試すと即座に反映されることは確認しており、MapLibreに問題があるのでは、と考えております。
0