使用D3在路径中添加三角形

Question

我正在尝试使用OpenLayers和D3.js复制下面的图像。

我尝试使用getPointAtLength（）在路径中添加三角形，并将它们添加为SVG元素，但这并不考虑线的方向。为了实现这一点，我需要找到斜率并旋转每个三角形。

我还看了一下StackOverflow的答案： How to place arrow head triangles on SVG lines?

这看起来很棒但不幸的是它只适用于折线。但是，由于我将D3.js与OpenLayers一起使用，似乎我必须使用路径而不是折线，因为我需要d3.geo.path函数来转换地图上的所有要素。

至于现在，我似乎有以下选择：

1. 通过计算每个点的斜率，沿路径添加三角形。有没有一种简单的方法来计算沿路径的斜率？
2. 以某种方式组合D3.js og和OpenLayers并使用折线而不是路径。这可能吗？
3. 以某种方式将我的路径转换为折线并绘制一条而不是路径。这样做有功能吗？

我还可以测试其他选项吗？

Answer 1

您可以在以delta分隔的两个点上调用getPointAtLength。如果Δ足够小，则两点的斜率将是路径的斜率。