如何在react 16.4.1中使用leaflet-polylinedecorator

我正在尝试在react 16.4.1中使用传单插件polylinedecorator（所以没有钩子）。然而，我能找到的关于如何在 React 中使用此插件的唯一示例是使用钩子（请参阅：如何将 Polylinedac​​orator 与 React leaflet 一起使用 https://stackoverflow.com/questions/56411133/how-to-use-polylinedacorator-with-react-leaflet/56431136#56431136），并且我不确定如何调整它以便能够在我的代码中使用它。

到目前为止我所拥有的是这个 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 <></>;
  }
}

我正在这样使用：

import React, { Component } from "react";
import { Polyline, LayerGroup } from "react-leaflet";
import PolylineDecorator from "./PolylineDecorator";

export default class RouteLayer extends Component {
  render() {
    const { beginLocations } = this.props;
    const locations = [];
    const differentLocations: [];

    beginLocations.forEach((location, index) => {
      // some filtering going on here and pushing the locations to one of the 
         two arrays (locations, differentLocations)
    });

    return (
      <LayerGroup>
        <PolylineDecorator
          map={this.props.map}
          positions={locations}
          color="#4e5c8d"
          interactive={false}
        />
        <PolylineDecorator
          map={this.props.map}
          positions={differentFloorLinesLocations}
          color="red"
          interactive={false}
        />
      </LayerGroup>
    );
  }
}

RouteLayer 嵌套在地图内，如下所示（为简单起见，省略了一些组件）：

 <LeafletMap
     ref={r => {
       this.map = r;
       if (this.props.setRefMap) {
         this.props.setRefMap(r);
       }
     }}>
     <RouteLayer
        map={this.map ? this.map.leafletElement : null}
        locations={locations}
      />
 </LeafletMap>

现在，折线已绘制，但并不完全符合预期，因为过滤似乎不起作用（当我只使用没有装饰器的折线时，此过滤工作正常）。 我试图用来装饰线条的箭头出现了，所以这很好。但是，我对 PolylineDecorator 类现在的外观不满意，这似乎不是执行此操作的正确方法。 我也不确定以我在这里所做的方式传递对地图的引用是否正确。 任何有关如何使这项工作正确进行的建议都将受到赞赏。

对于反应版本< 16.8以下组件演示了如何集成L.polylineDecorator https://github.com/bbecquet/Leaflet.PolylineDecorator with React-Leaflet https://react-leaflet.js.org/:

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

class PolylineDecorator extends Component {
  constructor(props) {
    super(props);
    this.polyRef = React.createRef();
  }
  componentDidMount() {
    const polyline = this.polyRef.current.leafletElement; //get native Leaflet polyline
    const { map } = this.polyRef.current.props.leaflet; //get native Leaflet map

    L.polylineDecorator(polyline, {
      patterns: this.props.patterns
    }).addTo(map);
  }

  render() {
    return <Polyline ref={this.polyRef} {...this.props} />;
  }
}

export default withLeaflet(PolylineDecorator);

Usage

export default class MyMap extends Component {
  render() {
    const { center, zoom } = this.props;

    const polyline = [[57, -19], [60, -12]];

    const arrow = [
      {
        offset: "100%",
        repeat: 0,
        symbol: L.Symbol.arrowHead({
          pixelSize: 15,
          polygon: false,
          pathOptions: { stroke: true }
        })
      }
    ];

    return (
      <Map center={center} zoom={zoom}>
        <TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
        <PolylineDecorator patterns={arrow} positions={polyline} />
      </Map>
    );
  }
}

这是一个演示 https://stackblitz.com/edit/react-q68g8p