在反应中使用 Leaflet js 插件

Question

我想使用一个名为 leaflet-geotiff (https://github.com/stuartmatthews/leaflet-geotiff) 的传单插件，但我正在使用传单反应。我可以将此插件转换为传单反应版本吗？谢谢各位。

Answer 1

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

1) 安装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>

Here is a demo

结果