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屋！
