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

问题

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 terminus. Is that possible? Kind of like an offset from the line terminus/origin.

Here is an example:

I have icons that are 50 x 50, but semi transparent (see image) and I have lines that go to the Lat/Long of the icons, but I want to try cropping or offsetting the line before it enters the icon, so you can't see the line under the icon. Is this possible?

Please comment if this question is unclear.

回答1:

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>

来源：https://stackoverflow.com/questions/46593925/leaflet-geojson-is-is-possible-to-crop-a-line-feature-before-it-reaches-its-dest

标签

leaflet

geojson