パンのリーフレットのポリラインが消えます

Question

私はポリラインとたくさんのアイコンのリーフレットマップを持っています。私が線に沿って地図をパンすると、アイコンは常に見えますが線は消えます。これは、マップがドラッグされている間（私がゆっくりとパンニングしている場合）、またはマップが動いている間に発生します（マップをすばやく取得して、フリック動作でリリースする場合）。ポリラインの動作は{ renderer: L.canvas() }の有無にかかわらず同じです。

なぜこのようなことが起こりますか、パンニング中にラインを見えるようにするにはどうすればよいですか？

var mymap = L.map('mapid').setView([51.505, -0.09], 10); 
 

 
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', { 
 
    maxZoom: 18, 
 
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
 
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
 
    'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
 
    id: 'mapbox.streets' 
 
}).addTo(mymap); 
 

 
var array = []; 
 
for (var counter = 0; counter < 100; counter++) { 
 
    array[counter] = [51.505 - counter * 0.1, -0.09 - counter * 0.1] 
 
} 
 

 
L.polyline(array, { 
 
    renderer: L.canvas() 
 
}).addTo(mymap); 
 
for (var index = 0; index < array.length; index++) { 
 
    var latlng = array[index]; 
 
    L.marker(latlng).addTo(mymap); 
 
}

#mapid { 
 
    height: 90vh; 
 
}

<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script> 
 
<link href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" rel="stylesheet" /> 
 

 
<div id="mapid"></div>

そしてJSFiddleと同じデモ、：https://jsfiddle.net/xbxrtx50/1/

Answer 1

これはなぜ起こるのでしょうか？

パフォーマンス。

SVGやキャンバスで描画するのは計算コストが高く、UIスレッドをブロックするため、リーフレットではできるだけ少ない回数だけ描画します。これは、ズームまたはパンの相互作用が行われていない場合にのみ再描画を意味します。

パンニング中にラインを見えるようにするにはどうすればよいですか？

はあなたのL.Renderer手動（L.SVGまたはL.Canvasのいずれか）をインスタンス化して、マップの表示サイズよりもそれがはるかに大きくするits padding optionを使用しています。それはレンダリング成果物を軽減します。

Leaflet.VectorGrid.Slicerを試してみてください。マップをパンしている間にジオメトリをタイル状にレンダリングする必要があります。