传单折线在平底锅上消失 [英] Leaflet polyline disappears on pan

问题描述

我有一张带有折线和一大堆图标的传单地图.当我沿线平移地图时，图标始终可见，但线消失了.这发生在地图被拖动时(如果我正在缓慢平移)，或者在地图移动时(如果我快速抓住地图并以轻弹动作释放).有或没有 { renderer: L.canvas() } 的折线行为是相同的.

I have a Leaflet map with a polyline and a whole bunch of icons. When I pan the map along the line, the icons are always visible but the line disappears. This happens while the map is being dragged (if I am panning slowly), or while the map is moving (if I quickly grab the map and release with a flicking motion). The polyline behavior is the same with or without { renderer: L.canvas() }.

为什么会发生这种情况?如何在平移时使线条可见?

Why does this happen and how can I make the line be visible while panning?

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/

And the same demo, as a JSFiddle: https://jsfiddle.net/xbxrtx50/1/

推荐答案

为什么会这样?

性能.

使用 SVG 或 Canvas 绘制东西的计算量很大，并且会阻塞 UI 线程，因此 Leaflet 会尽可能少地这样做.这意味着仅在没有进行缩放或平移交互时重绘.

Drawing things with SVG or Canvas is computationally expensive, and blocks the UI thread, so Leaflet does it as few times as possible. This means redrawing only when there is no zoom or pan interaction going on.

如何在平移时使线条可见?

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

手动实例化您的 L.Renderer(L.SVG 或 L.Canvas)，并使用 它的 padding 选项 使其远大于地图的可见尺寸.这将减轻渲染伪影.

Instantiate your L.Renderer manually (either L.SVG or L.Canvas), and use its padding option to make it much larger than the visible size of the map. That will alleviate the rendering artifacts.

您可能还想尝试 Leaflet.VectorGrid.Slicer，它应该在地图被平移时以平铺方式呈现几何图形.

You might also want to try out Leaflet.VectorGrid.Slicer, which should render the geometries in a tiled manner while the map is being panned around.

这篇关于传单折线在平底锅上消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！