Leaflet GeoJSON可以在到達目的地之前裁剪線條特徵嗎？

有沒有縮短GeoJSON圖層上線條的簡單方法？Leaflet GeoJSON可以在到達目的地之前裁剪線條特徵嗎？

我有一條線，它從A點到B點。我希望線能夠停止標記的半徑，而不是它的終點。那可能嗎？有點像線路終點/起點的偏移量。

下面是一個例子：

我有一個50×50的圖標，但半透明（見圖片），我有去的圖標的緯度/龍線，但我想嘗試種植或者在線條進入圖標之前偏移線條，因此您無法在圖標下看到線條。這可能嗎？

如果這個問題不清楚，請發表評論。

2017-10-05 Arel

，可以使用dashArray和dashOffset選項來完成：

var map = new L.Map('leaflet', { 
 
    center: [0, 0], 
 
    zoom: 0 
 
}); 
 

 
new L.CircleMarker([0, 90], {radius: 30}).addTo(map); 
 
new L.CircleMarker([0, -90], {radius: 30}).addTo(map); 
 

 
var polyline = new L.Polyline([[0, -90], [0, 90]]).addTo(map); 
 

 
// Get length of the line 
 
var totalLength = polyline.getElement().getTotalLength(); 
 

 
polyline.setStyle({ 
 
    // Set dashArray to the length of the line minus radius * 2 
 
    dashArray: totalLength - 60, 
 
    // Offset by radius 
 
    dashOffset: -30 
 
});

body { 
 
    margin: 0; 
 
} 
 

 
html, body, #leaflet { 
 
    height: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Leaflet 1.2.0</title> 
 
     <meta charset="utf-8" /> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
     <link type="text/css" rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" /> 
 
    </head> 
 
    <body> 
 
     <div id="leaflet"></div> 
 
     <script src="//unpkg.com/[email protected]/dist/leaflet.js"></script> 
 
    </body> 
 
</html>

來源

2017-10-06 12:16:15 iH8

看起來你也應該更新' 「zoomend」'事件之後的風格。 – ghybs

有些事情必須作爲練習給讀者開放;）@ghybs – iH8

哇。令人印象深刻的黑客。 – IvanSanchez

Leaflet GeoJSON可以在到達目的地之前裁剪線條特徵嗎？

回答

相關問題