目に見えないdivにlealetjsマップを作成する

Question

leafletjsマップをスライドショーremarkjsに追加しています。 Webページの初期ロード時にマップdivを含むスライドが表示されていれば、マップは正常に動作します。ただし、マップdivのスライドが表示されていないスライドの場合、マップdivは表示されないため、divにすべてのタイルがロードされないため、リーフレットマップは正しく機能しません。私がしたいのは、どのスライドに関係なく、スライドショーのすべてのマップdivをロードしてから、地図を含むスライドが表示されたら正しく表示されるようにすることです。

更新：それは私の質問に答える必要がありますように提案答えは思えんが、私は正しい軌道に乗っていた場合、私はまだ立ち往生して確認していません。以下は詳細です。

私はスライドショーに多くのマップを追加することができたので、マップのdivのクラス名を使用しています。

// css 
.map { width: 100vh; height: 100vh; } 

// html 
<div class="map" data-lat="47" data-lon="106"></div> 
<div class="map" data-lat="0" data-lon="0"></div> 
<!-- possibly on a different slide --> 
<div class="map" data-lat="30" data-lon="28"></div> 

// js 
var maps = []; // for storing map elements 
var mapDivs = document.getElementsByClassName('map'); 

for (var i=0, j=mapDivs.length; i<j; i++) { 
    var map = L.map(mapDivs[i]).setView(
     [mapDivs[i].dataset.lat, mapDivs[i].dataset.lon], 
     13 
    ); 

    // store map for later 
    maps.push(map); 
    L.tileLayer(…).addTo(map); 
} 

slideshow.on('showSlide', function (slide) { 
    for (var i=0, j=maps.length; i<j; i++) { 
     maps[i].invalidateSize(); 
    } 
}); 

ロジックによれば、上記はうまくいくはずですが、そうではありません。私は間違って何をしていますか？

更新2：map.invalidateSize()の回答は確かに解決策の一部でした。私のせいで、私はslideshow.on('showSlide', fn)と呼んでいたが、実際にはslideshow.on('afterShowSlide', fn)と呼んでいるはずだった。後者はremarkjsにマップdivを持つ現在のスライドを実際に作成する機会を与え、map.invalidateSize()はマップを正しく作成して再描画できます。

Answer 1

leafletjsには、必要なマップタイルをダウンロードして地図を表示するには、widthとheight> 0pxのdivが存在する必要があります。 remarkjsスライドショーにマップdivを追加すると、スライドショーの開始時に1つまたは複数のdivが非表示になります。その結果、leafletjsは、ブラウザがサイズ変更されてleafletjsが地図のdivsのサイズを再計算し、正しいタイルをダウンロードするまで、それらのdivの地図を表示できません（ランダムタイルが欠落する）。解決策は、マップdivのあるスライドが表示されたときにmap.invalidateSize()メソッドを起動することです。ここで私はそれをやった方法ですついに

/* css ******************************/ 
.map { width: 100vh; height: 100vh; } 


<!--------------------------------------------- 
html 
map divs possibly on different slides, with a 
`map: true` property on each slide with a map 
-----------------------------------------------> 

--- 
map: true 
<div class="map" data-lat="47" data-lon="106"></div> 
--- 
map: true 
<div class="map" data-lat="0" data-lon="0"></div> 
--- 
map: true 
<div class="map" data-lat="30" data-lon="28"></div> 

// js ///////////////////////////////////////// 
var maps = []; // for storing leaflet map elements 
var mapDivs = document.getElementsByClassName('map'); 

for (var i=0, j=mapDivs.length; i<j; i++) { 

    // store map for later 
    maps.push(L.map(mapDivs[i]).setView(
     [mapDivs[i].dataset.lat, mapDivs[i].dataset.lon], 
     zoomLevel 
    )); 

    // add map to the tileLayer 
    L.tileLayer(…).addTo(maps[i]); 
} 

// use the 'afterShowSlide' event to ensure the 
// map div has been created 
slideshow.on('afterShowSlide', function (slide) { 

    // only if the slide has a 'map' property 
    if (slide.properties.map) { 
     for (var i=0, j=maps.length; i<j; i++) { 
      maps[i].invalidateSize(); 
     } 
    } 
});