Leafletで画像をon、offさせる方法について

Leafletで画像をon、offさせる方法について知りたいです。

現在、画像を表示させる際にはGeotiff画像からpng画像に変換した後に

var image1 = "./png/test.png";
var bounds1 = L.latLngBounds(
[36 ,138],
[37,139]
);
L.imageOverlay(image1, bounds1, { opacity: 1.0 }).addTo(map);

var image2 = "./png/test2.png";
var bounds2 = L.latLngBounds(
[36 ,138],
[37,139]
);
L.imageOverlay(image2, bounds2, { opacity: 1.0 }).addTo(map);



のように表示しているのですが、上記の書き方ですと同じ領域に複数枚の画像がある時に、
最後に指定された画像のみが表示されてしまいます。上記ですと、image2の画像が最上位に来てしまいます。
L.control.layers
を使用して、任意の画像のon、offをさせていきたいのですが、どのように制御したら良いのか教えて頂きたいです。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2022/11/01 19:24

No1です。

No1の回答中、画像のアドレスでご提示の「./png/～～」の部分を「./img/～～」としてしまいました。
訂正しておきます。


また、画像ディレクトリの「./png/」部分が共通なら、いちいち個別に記述しなくてもよいので、ついでにNo1をコンパクトにした例を以下に・・

//画像名をカンマ区切りで列挙（スペース等いれないこと）
const data = "test.png, test2.png,test3.png,test4.png";

const disp = (s => {
const bound = L.latLngBounds([36 ,138], [37,139]),
imgs = s.split(',').map(d => L.imageOverlay('./png/'+d, bound).addTo(map));
return n => {imgs.forEach((d, i)=>d.setOpacity(i==(n-1)?1:0))};
})(data);

disp(2);

※ 表示したい画像番号（＝1始まりです）を指定して「 disp(1); 」のようにすることで、その順の画像が表示されるようになります。

No.1 回答者： fujillin 回答日時： 2022/11/01 17:30

こんにちは

Leafletを使ったことはありませんので、Documentを見ただけですが・・

＞L.control.layersを使用して、任意の画像のon、offを～
複数の画像等をまとめておいて、制御するのにはlayerGroup化して制御するのは有効だと思いますが。
https://leafletjs.com/examples/layers-control/

一方で、画像単体を個々に「表示/非表示」だけの制御をしたいのなら、グループ化する必要もないのではないでしょうか？
直接、対象の画像の表示非表示を制御してしまった方が簡単な気がします・
（layerGroupで制御しても結果的には同様ですが・・）
また、ご質問の例で言えば、表示/非表示は opacityの1, 0に置換えてしまうのが、メソッドが用意されているようなので簡単そうです。
複数の画像セットを組み合わせたものを、セットで切り替えるような場合にはグループ化を利用したほうがよさそうですけれど・・


方法はいろいろあると思いますが、複数画像を同じ位置に表示しておいて入れ替えるということで良いのなら、配列を利用してまとめてしまう方がやりやすいと思います。
例えば、
const images = {
bound: L.latLngBounds([36 ,138], [37,139]),
src : ["./img/test.png", "./img/test2.png", "./img/test3.png", "./img/test4.png"],
elements: []
};
などと定義しておいて、mapに追加するには、
images.src.forEach( d=> {
images.elements.push( L.imageOverlay(d, images.bound).addTo(map));
});
で、まとめて追加できます。

表示の制御には
const dispImage = n => {
images.elements.forEach( (d, i) => {d.setOpacity(i==n?1:0)});
}
のような関数を用意しておいて、必要に応じて、
dispImage(2);
のように呼び出せば、指定した3番目（indexは0始まり）の画像だけが表示されます。

※ もしも、画像がご提示の2個だけならば、配列にせずに直接制御したほうが簡単かもしれません。