如何在React单张上使用polylinedac​​orator [英] How to use polylinedacorator with react leaflet

问题描述

我已经用react-leaflet创建了折线，我想用polylinedac​​orator显示折线上的反应，但是我不知道如何用react-leaflet来做.我发现了多个带有传单的示例，但没有找到带有react-leaflet的示例

I have created polyline using react-leaflet, I want to show direaction on polyline using polylinedacorator.But I don't know how to do that with react-leaflet. I found multiple examples with leaflet, but not with react-leaflet

const polyline = [[51.505, -0.09], [51.51, -0.1], [51.51, -0.12]]

export default class VectorLayersExample extends Component<{}> {
  render() {
    return (
      <Map center={center} zoom={13}>
       <TileLayer
          attribution='&amp;copy <a 
            href="http://osm.org/copyright">OpenStreetMap</a> 
            contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    <Polyline color="lime" positions={polyline} />
    </Map>
 )
 }

任何人都可以告诉我如何在上面的代码中使用多行修饰符

Can any one tell me how to use polylinedacorators with above code

推荐答案

Leaflet.PolylineDecorator 可以与React-Leaflet集成如下:

a)安装leaflet和leaflet-polylinedecorator软件包:npm i leaflet leaflet-polylinedecorator

a) install leaflet and leaflet-polylinedecorator packages: npm i leaflet leaflet-polylinedecorator

b)安装后，以下组件演示了如何将Polyline组件与L.polylineDecorator一起使用:

b) once installed, the following component demonstrates how to utilize Polyline component with L.polylineDecorator:

import React, { useRef, useEffect } from "react";
import { Map, TileLayer, Polyline, withLeaflet } from "react-leaflet";
import L from "leaflet";
import "leaflet-polylinedecorator";

const PolylineDecorator = withLeaflet(props => {
  const polyRef = useRef();
  useEffect(() => {
    const polyline = polyRef.current.leafletElement; //get native Leaflet polyline
    const { map } = polyRef.current.props.leaflet; //get native Leaflet map

    L.polylineDecorator(polyline, {
        patterns : props.patterns
    }).addTo(map);
  }, []);
  return <Polyline ref={polyRef} {...props} />;
});

用法

function MyMap(props) {
  const { center, zoom } = 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单张上使用polylinedac​​orator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！