标签: polyline-decorator

我正在尝试使用PolylineDecorator制作传单。我打算在每行的末尾绘制一条带有箭头的折线。我有以下代码：

var somePoints = [];
for (var rowIndex in rows) {
    somePoints.push(L.latLng(rows[rowIndex].Lat, rows[rowIndex].Lon));
}
var pl = L.polyline(somePoints);
pl.addTo(map);
var decorator = L.polylineDecorator(pl, {
    patterns: [
        // defines a pattern of 10px-wide dashes, repeated every 20px on the line
        {offset: 0, repeat: 50, symbol: L.Symbol.arrowHead({pixelSize: 8, polygon: false, pathOptions: {stroke: true}})}
    ]
}).addTo(map);

产生这个

我的意图是在行的每一端（标记位置）都放一个箭头。如果我改变offset来"100%"和repeat到0，然后我有这样的：

我们在最后一个标记处有一个箭头，但其他标记没有箭头。我知道我们可以通过将每条线绘制为带有offsetof "100%"和repeatof 的单独的折线来实现我想要的功能0，但是我想知道是否可以使用在参数中具有两个以上点的单条折线来实现decorator。这是可能的还是我应该修改我的代码以使n-1条带有箭头的折线？

我正在尝试在 react 16.4.1 中使用传单插件 polylinedecorator（所以没有钩子）。但是，我能够找到的关于如何在 react 中使用此插件的唯一示例是使用钩子（请参阅：如何将 polylinedac​​orator 与 react 传单一起使用），我不确定如何调整它以便能够在我的代码。

到目前为止，我拥有的是这个 polylinedecorator 组件：

import React, { Component } from "react";
import { Polyline } from "react-leaflet";
import L from "leaflet";
import "leaflet-polylinedecorator";

export default class PolylineDecorator extends Component {
  componentDidUpdate() {
    if (this.props.map) {
        const polyline = L.polyline(this.props.positions).addTo(this.props.map);

        L.polylineDecorator(polyline, {
            patterns: [
                {
                  offset: "100%",
                  repeat: 0,
                  symbol: L.Symbol.arrowHead({
                    pixelSize: 15,
                    polygon: false,
                    pathOptions: { stroke: true }
                  })
                }
              ]
        }).addTo(this.props.map);
    }
  }

  render() {
    return …