我有一张带有折线和一大堆图标的Leaflet地图。当我沿着线平移地图时,图标始终可见但线条消失。拖动地图时(如果我正在缓慢平移),或者地图移动时(如果我快速抓住地图并以轻弹动作释放),就会发生这种情况。无论是否有{ 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 © <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/
答案 0 :(得分:6)
为什么会这样?
性能。
使用SVG或Canvas绘制内容是计算上昂贵的,并且阻止了UI线程,因此Leaflet尽可能少地执行它。这意味着只有在没有缩放或平移交互时才重绘。
如何在平移时让线条可见?
手动实例化L.Renderer
L.SVG
或L.Canvas
),并使用its padding
option使其大于地图的可见尺寸。这将减轻渲染工件。
您可能还想尝试Leaflet.VectorGrid.Slicer
,它应该在平移地图时以平铺的方式渲染几何图形。