reactjs - 在 React 中使用 Leaflet js 插件

Question

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

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 添加图层

<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

结果