Leaflet GeoJSON是否可以在到达目标之前裁剪线要素? [英] Leaflet GeoJSON is is possible to crop a line feature before it reaches its destination?
问题描述
是否有一种简单的方法可以缩短GeoJSON图层上的行?
Is there a simple way to shorten lines on a GeoJSON layer?
我有一条线，它从A点到B点.我希望这条线在距离终点不远的地方停止标记的半径.那可能吗?有点像线终点/起点的偏移量.
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.
这里是一个例子:
我有50 x 50的图标，但是是半透明的(请参见图片)，并且有一些行可以转到图标的纬度/经度，但是我想在行进入图标之前尝试对其进行裁剪或偏移，因此您看不到图标下方的线.这可能吗?
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.
推荐答案
可以使用dashArray和dashOffset选项来完成:
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>
这篇关于Leaflet GeoJSON是否可以在到达目标之前裁剪线要素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
