reactjs - 如何在 React 16.4.1 中使用 leaflet-polylinedecorator

Question

我正在尝试在 React 16.4.1 中使用传单插件 polylinedecorator(因此没有钩子(Hook))。但是，我能够找到的关于如何在 React 中使用此插件的唯一示例是使用钩子(Hook)(请参阅:How to use polylinedacorator with react leaflet)，我不确定如何调整它以便能够在我的代码中使用它。

我目前拥有的是这个 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 嵌套在 map 中，如下所示(为简单起见，省略了一些组件):

 <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 类现在的样子不满意，这似乎不是执行此操作的正确方法。我也不确定以我在这里所做的方式将引用传递给 map 是否正确。任何关于如何使这项工作正常工作的建议都将受到赞赏。

Answer 1

对于 React 版本 < 16.8以下组件演示了如何集成 L.polylineDecorator 与 React-Leaflet :

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);

用法

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>
    );
  }
}

Here is a demo