單張折線消失在平底鍋上

我有一個折線圖和一大堆圖標的單張地圖。當我沿着線平移地圖時，圖標始終可見，但線條消失。地圖拖動時（如果我慢慢地平移）或地圖移動時（如果我快速抓住地圖並以輕彈動作釋放），就會發生這種情況。折線行爲與{ 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/[email protected]/dist/leaflet.js"></script> 
 
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet" /> 
 

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

而同樣的演示，爲的jsfiddle：https://jsfiddle.net/xbxrtx50/1/

來源

2017-02-03 user2441511

爲什麼會出現這種情況？

表現。

使用SVG或Canvas繪製東西的計算量很大，並且會阻塞UI線程，所以Leaflet儘可能少地執行它。這意味着僅在沒有縮放或平移交互時才進行重繪。

我該如何在平移時使線條可見？

實例化L.Renderer手動（或L.SVG或L.Canvas），並使用its padding option，使其遠遠超過了地圖的可視尺寸。這將緩解渲染僞像。

您也可能想嘗試Leaflet.VectorGrid.Slicer，這應該呈現幾何平鋪的方式而地圖被周圍平移。

來源

2017-02-03 19:38:56 IvanSanchez

謝謝。我改變了'padding'選項，並且修復了它的漂亮。我會經常更新折線幾何;這會是'Leaflet.VectorGrid.Slicer'的問題嗎？ – user2441511

是的，這可能是一個問題。 'Leaflet.VectorGrid.Slicer'並非設計用於可能改變數據;切片數據是昂貴的操作。 – IvanSanchez

單張折線消失在平底鍋上

回答

相關問題