2017-10-05 5 views
0

Gibt es eine einfache Möglichkeit, Zeilen auf einer GeoJSON-Ebene zu kürzen?Prospekt GeoJSON ist es möglich, ein Linien-Feature zu beschneiden, bevor es sein Ziel erreicht?

Ich habe eine Linie, es geht von Punkt A nach Punkt B. Ich möchte, dass die Linie den Radius eines Markers kurz vor seinem Endpunkt stoppt. Ist das möglich? Ein bisschen wie ein Offset vom Zeilenende/Ursprung. Hier

ist ein Beispiel:

I-Symbole, die 50 x 50 sind, aber halbtransparent (siehe Bild) und ich habe Zeilen, die auf die Breite/Länge der Symbole gehen, aber ich will Zuschneiden versuchen oder die Linie vor dem Eingeben des Symbols verschieben, sodass Sie die Linie unter dem Symbol nicht sehen können. Ist das möglich?

Bitte kommentieren Sie, wenn diese Frage unklar ist.

enter image description here

Antwort

1

getan werden kann, um die dashArray und dashOffset Optionen:

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>

+0

Sieht aus wie Sie auch den Stil nach ' "zoomend"' Ereignisse aktualisieren sollen. – ghybs

+0

Einige Dinge müssen als Übung für den Leser offen gelassen werden;) @ghybs – iH8

+0

Wow. Eindrucksvoller Hack. – IvanSanchez

Verwandte Themen