Leaflet GeoJSON is is possible to crop a line feature before it reaches its destination?

前端未结

关注

 1  1580

感情败类

Is there a simple way to shorten lines on a GeoJSON layer?

I have a line, it goes from point A to point B. I want the line to stop the radius of a marker short of it\'s

相关标签:

1条回答

一整个雨季

2021-01-24 09:48

That can be done using the dashArray and dashOffset options:

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/leaflet@1.2.0/dist/leaflet.css" />
    </head>
    <body>
        <div id="leaflet"></div>
        <script src="//unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
    </body>
</html>

0 讨论(0)