在React中使用Leaflet js插件

Question

我想使用一个名为leaflet-geotiff（https://github.com/stuartmatthews/leaflet-geotiff）的传单插件，但是我正在使用Leaflet React。我可以将这个插件转换为单张反应版本吗？谢谢你们。

Answer 1

这是有关如何在leaflet-geotiff中使用react-leaflet库的说明：

1）安装leaflet-geotiff package

2）建议引入以下 custom 组件：

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>

Here is a demo

结果