mle 0270 - izudon/izudon.github.io GitHub Wiki

0270 Change a layer's color with buttons

１．じわっと色変え Map.setPaintProperty()

このメソッドを単に呼んでやればじわっと変わるらしい。

map.setPaintProperty( layerId, "fill-color", "#00ffff" );

２．単なる塗りか建物かで区別

立体化させた建物の色を変える場合は色のプロパティ名が違うので考慮する。

layer.value === 'water' ? 'fill-color' : 'fill-extrusion-color'

３．ボタンの click イベントに関数を登録

色別の１０コマのボタンを forEach で生成させるとともに、色変えする関数をイベントリスナに登録。

const colors = [
    '#ffffcc',
    '#a1dab4',
    // ...
];

colors.forEach((color) => {
    // ボタンの生成
    // ボタンへのイベントの登録
    swatch.addEventListener('click', () => {
        map.setPaintProperty(
            layer.value,
            layer.value === 'water' ? 'fill-color' : 'fill-extrusion-color',
            color
        );
    });
    // ボタンをDOMへ追加
});