单张折线消失在平底锅上 [英] 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/

推荐答案

为什么会这样?

Why does this happen?

性能.

使用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.SVG或L.Canvas)实例化L.Renderer，并使用

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屋！