leaflet tilelayer の再表示をスムーズに行いたい

Question

##leaflet の独自タイルレイヤーの表示方法で悩んでいます。

• 下記のようなコードにすると、一度imgレイヤーを消してから、再度imgレイヤーを加えるように

なるのですが、例えば、時間を進むボタンなどを押して、このfunctionを呼び出すと、その度
に一度レイヤーが消えるのでチカチカして見づらいです。

function addlayer(basetime,ft,valid,elem,l1,l2){
    ft =  ('00' + ft ).slice( -2 );
    if (ft == 0 ){ft="00"};

    var imgdir = "/home/test/img/"+elem;
    var jsondir = "/home/test/parse/json";

    //l1 = 1 (geojsom 表示)                                                                                                                                                                                                        
    //l2 = 1 (img表示)                                                                                                                                                                                                             

 // imgLayerの初期化                                                                                                                                                                                                            
    if (img != 0 ){
           map.removeLayer(img);
    }

    //imgタイルの追加                                                                                                                                                                                                              
    if (l2 == 1){
       img =  L.tileLayer(imgdir+"/"+basetime+"/"+ft+"/{z}/{x}/{y}.png",{
           maxZoom: 8,
           opacity:0.5,
       }).addTo(map);

   }
    if (l1 == 1){
        //geojson の読み込み（同期）                                                                                                                                                                                               
        $.getJSON(jsondir+"/"+valid+".json", function(data) {
            // geoJSONLayerの初期化                                                                                                                                                                                                
            if (geojson != 0){
                map.removeLayer(geojson);
            }
            geojson = L.geoJSON(data, {
                onEachFeature:function (feature, layer) {
                    var name = feature.properties.area_en;
                    name = name.charAt(0).toUpperCase() + name.slice(1);
                    layer.bindPopup(
                        "CMAID:"+feature.properties.localid+"("+name+")</br>"+elem+":"+feature.properties[elem]/10
                    )},
		pointToLayer: function (feature, latlng) {


               return new L.circleMarker(latlng,
                                              {radius: 8,
                                               fillOpacity: 0.8,
                                               color: 'black',
                                               fillColor: getColor(feature.properties[elem]/10,elem),
                                               weight: 0,});
                }
            });
            geojson.addTo(map);
        });
    }else{
        //geoJSONLayerの初期化                                                                                                                                                                                                     
        if (geojson != 0){
            map.removeLayer(geojson);
        }
    }
}

• tilelayerのpngが全てloadされた時に、layerを消すもしくは再描画する、みたいにするといいのだと

は思いますが、公式のdocを見てもうまくやり方がわかりません。

よろしくお願いします。

Answer 1

タイルレイヤーは複数登録できるので、消さずに処理するとか、どうでしょう。

【Leafletでちょっとカスタマイズしてみたメモ - Qiita】
https://qiita.com/ShingoOikawa/items/41a522c1361e33c3c3dd

Comments

[shiroikuma]

返答ありがとうございます。
説明不足でしたが、このレイヤーは、オーバーレイ用で、時系列ごとにタイルを格納していて、時間を進めると前の時間のやるは消して、その後に次の時間のやつを表示する、みたいにしています。

wms のサーバーから取ってくるタイルをTimeDemension なんかを与えて表示するサンプルならあるんですけど、それを自作タイルでやりたいな、って感じです。
wmsサーバーから取得するときのTimeDimension のサンプル。
https://github.com/socib/Leaflet.TimeDimension

[kei344]

その消すタイミングを遅らせればよいのでは。

[shiroikuma]

はい。そうしたいのです。
質問にも書いてますが、tilelayerのpngが全てloadされた時に、layerを消すもしくは再描画する、みたいにするといいのだとは思いますが、公式のdocを見てもうまくやり方がわかりません。。。

[kei344]

複数追加する⇒追加した物にメインのタイルを切り替える⇒次に追加するときに最初のタイルを消す、とかすればいいのでは？

[shiroikuma]

タイミングを調整しましたが、やはりチカチカ消えたり出たりします。
いくつか試しましたが、シームレスに表示るすには別の方法をとるしかないようです。

[kei344]

「別の方法」とは？

[shiroikuma]

タイル化して表示しているのは、時系列ごとのimage(サイズ大きい)でして、他のサイトを見てみると、そういう場合は、canvasに別に描画して（めんどくさいけど）それを表示させる、みたいにしているようです。geojsonの点データの表示はうまくいっているので、ベクターファイルだとうまくいくのかもしれませんね。

[kei344]

そうなのですね、知見の共有ありがとうございます。

以前GoogleMapsAPIで近い処理をした際には2つマップを重ねて表示し、要素自体の透明度を切り替えるような実装をしたことがあります。
切り替え用に2つマップを用意し、切り替えボタンをクリックしたタイミングで準備用マップのタイルを変更して座標を同期、透明にして前面に置いてフェードで表示、という処理をしました。