Используя плагин Leaflet JS в реакции

Question

Я хочу использовать плагин листовки под названием leaflet-geotiff (https://github.com/stuartmatthews/leaflet-geotiff), но я использую реакцию листовки. Могу ли я преобразовать этот плагин в версию реакции листовки? Спасибо, ребята.

Answer 1

Ниже приведена инструкция по использованию библиотеки leaflet-geotiff в react-leaflet:

1) install leaflet-geotiff package

2) предлагаетсяпредставить следующие пользовательские компоненты:

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


import "leaflet-geotiff"
import "leaflet-geotiff/leaflet-geotiff-plotty"
import "leaflet-geotiff/leaflet-geotiff-vector-arrows"

class GeotiffLayer extends MapLayer {
  createLeafletElement(props) {
    const { url, options } = props;
    return L.leafletGeotiff(url, options);
  }

  componentDidMount() {
    const { map } = this.props.leaflet;
    this.leafletElement.addTo(map);
  }
}

export const PlottyGeotiffLayer = withLeaflet(props => {
  const { options, layerRef } = props;
  options.renderer = new L.LeafletGeotiff.Plotty(options);
  return <GeotiffLayer ref={layerRef} {...props} />;
});

export const VectorArrowsGeotiffLayer = withLeaflet(props => {
  const { options, layerRef } = props;
  options.renderer = new L.LeafletGeotiff.VectorArrows(options);
  return <GeotiffLayer ref={layerRef} {...props} />;
}); 

3) и, наконец, добавить слои на карту

<Map
    center={this.props.center}
    zoom={this.props.zoom}
    length={4}
>
    <TileLayer
          url="https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw"
          attribution='<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>'
          id="mapbox.streets"
    />

    <PlottyGeotiffLayer
       layerRef={this.windSpeedRef}
       url={windSpeedUrl}
       options={windSpeedOptions}
    />

    <VectorArrowsGeotiffLayer
      layerRef={this.windDirectionRef}
      url={windDirectionUrl}
      options={windDirectionOptions}
    />
 </Map>

Вот демонстрационная версия

Результат