React + maplibre-gl-jsで複数レイヤの表示・非表示を制御する

前回、PMTilesに複数のレイヤ 行政区画 ハザードマップ をまとめて、maplibre-gl-jsから表示するところまでやりました 今回は、表示するレイヤを制御する実装をしていきます 実装サンプルを調べるとプレーンなjsでの実装が多いのですが今回はReactを使います それと、複数レイヤを制御するにあたって実装を少しいじりました この実装であれば新しいレイヤを後で追加したいとなったときにもスムーズにできると思います 実装サンプル import React, { useRef, useEffect, useState } from 'react'; import maplibregl, { RasterSourceSpecification, VectorSourceSpecification, SourceSpecification } from 'maplibre-gl'; impo