在React 16.4.1中如何使用letlet-polylinedecorator [英] How to use leaflet-polylinedecorator in react 16.4.1

问题描述

我正在尝试在react 16.4.1中使用传单插件polylinedecorator(因此没有钩子).但是，关于如何在react中使用此插件的唯一例子是使用钩子(请参阅:

I'm trying to use the leaflet plugin polylinedecorator in react 16.4.1 (so without hooks). However, the only example I have been able to find on how to use this plugin in react is using hooks (see: How to use polylinedacorator with react leaflet), and I am unsure how I can adapt this to be able to use it in my code.

到目前为止，我有了这个polylinedecorator组件:

What I have so far is this polylinedecorator component:

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如下嵌套在地图内(为简单起见，省略了一些组件):

The RouteLayer is nested inside the map as follows (for simplicity some components are left out):

 <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类的外观不满意，这似乎不是正确的方法. 我也不确定以我在这里所做的方式将引用传递给地图是否正确. 任何有关如何使其正常工作的建议都将受到赞赏.

Right now the polylines are drawn, however not quite as expected since the filtering doesn't seem to work (this filtering worked fine when I was just using polylines without the decorator). The arrows I am trying to decorate the lines with are showing up, so that's good. However, I'm not happy with how the PolylineDecorator class is looking right now, this doesn't seem like the correct way to do this. I'm also unsure if it is correct to pass the reference to the map in the way that I'm doing here. Any suggestions on how to make this work correctly are appreciated.

推荐答案

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

For React version < 16.8 the following component demonstrates how to integrate L.polylineDecorator with 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>
    );
  }
}

这是一个演示

这篇关于在React 16.4.1中如何使用letlet-polylinedecorator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！