传单折线在平底锅上消失

Question

我有一张带有折线和一大堆图标的传单 map 。当我沿着线平移 map 时，图标始终可见，但线消失了。这种情况发生在 map 被拖动时(如果我缓慢平移)，或者 map 移动时(如果我快速捕获 map 并通过轻弹 Action 释放)。无论有没有 { 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

Why does this happen?

性能。

使用 SVG 或 Canvas 绘制内容的计算成本很高，并且会阻塞 UI 线程，因此 Leaflet 会尽可能少地执行此操作。这意味着仅当没有进行缩放或平移交互时才重绘。

and how can I make the line be visible while panning?

手动实例化您的L.Renderer(L.SVG或L.Canvas)，并使用its padding option使其比 map 的可见尺寸大得多。这将减轻渲染伪影。

您可能还想尝试 Leaflet.VectorGrid.Slicer ，本地图被平移时，它应该以平铺的方式渲染几何图形。