Как использовать polylinedacorator с листовкой реакции

Я создал полилинию с помощью реактивной листовки, я хочу показать направление на полилинии с помощью полилинедакоратора. Но я не знаю, как это сделать с помощью реактивной листовки. Я нашел несколько примеров с листовкой, но не с реактивной листовкой.

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

Может ли кто-нибудь сказать мне, как использовать polylinedacorators с приведенным выше кодом

Любое решение для этого?

— 02.06.2019 07:48

reactjs leaflet react-leaflet

02.06.2019 01:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 441

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Leaflet.PolylineDecorator можно интегрировать с React-Leaflet следующим образом:

а) установить пакеты leaflet и leaflet-polylinedecorator: npm i leaflet leaflet-polylinedecorator

б) после установки следующий компонент демонстрирует, как использовать компонент Polyline с 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>
  );
}

Любые предложения о том, как это сделать, если вы не используете хуки? У меня с этим проблемы.

— 22.07.2019 11:21

Я сделал отдельный вопрос по этому поводу: stackoverflow.com/questions/57143284/…. Любая помощь будет оценена по достоинству :)

— 22.07.2019 11:46

Ошибка при попытке импорта: «withLeaflet» не экспортируется из «реагировать-листовка».

— 29.08.2021 04:41

03.06.2019 18:20