在反应中使用 leaflet.canvaslayer.field.js

Question

我尝试使用标准 html 中的 leaflet.canvaslayer.field.js 插件来显示一些 GeoTiff，现在我需要一些帮助来了解如何将代码移植到反应组件中。

我的javascript代码是：


d3.request('http://localhost:4000/map_tif/?band=223').responseType('arraybuffer').get(
 function(error, tiffData) {
   console.log(tiffData.response);
   let ndvi = L.ScalarField.fromGeoTIFF(tiffData.response);
   ndvi.isContinuous = false
   ndvi.longitudeNeedsToBeWrapped = false
   console.log(ndvi)
   let layer = L.canvasLayer.scalarField(ndvi, {
   color: chroma.scale('Spectral').domain(ndvi.range.reverse()),
   opacity: 1,
   inFilter: (v) => v !== 0
   }).addTo(map);

   layer.on('click', function(e) {
   if (e.value !== null) {
   let v = e.value.toFixed(2);
   let html = (`<span class = "popupText"> Temperature ${v} °C</span>`);
   let popup = L.popup()
   .setLatLng(e.latlng)
   .setContent(html)
   .openOn(map);
   }
   });
   map.fitBounds(layer.getBounds());

});

谢谢

Answer 1

通常你必须通过 npm 安装以下依赖项：

chroma.js
@turf/insid
geotiff.js
d3js 这是插件需要的，然后将它们导入到您的组件中。

但是，如前所述，here 该插件必须通过标签包含，并且不能通过标准 import/require 语法轻松导入到现代捆绑的 JS 应用程序中）

通过 index.html 上的脚本标签导入前 3 个依赖项，因为插件脚本需要它们。 index.html:

...
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script src="https://npmcdn.com/geotiff@0.3.6/dist/geotiff.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.0/chroma.min.js"></script>
...

由于某些原因，Script 标记在 React 项目中不起作用，因此您可以异步加载脚本并在加载时访问它。

const mapRef = useRef();

  useEffect(() => {
    const map = mapRef.current.leafletElement;

    const script = document.createElement("script");
    script.src =
      "https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/dist/leaflet.canvaslayer.field.js";
    script.async = true;
    script.onload = () => loaded(map);

    document.body.appendChild(script);
  }, []);

  const loaded = map => {
    var tiff =
      "https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/data/tz850.tiff";
    fetch(tiff)
      .then(r => r.arrayBuffer())
      .then(function(buffer) {
        var s = L.ScalarField.fromGeoTIFF(buffer);
        let layer = L.canvasLayer.scalarField(s).addTo(map);
        layer.on("click", function(e) {
          if (e.value !== null) {
            L.popup()
              .setLatLng(e.latlng)
              .setContent(`${e.value}`)
              .openOn(map);
          }
        });

        map.fitBounds(layer.getBounds());
      });
  };

您可以在官方页面看到一个 demo with this 用 React 重写的例子。

在反应中使用 leaflet.canvaslayer.field.js

Use leaflet.canvaslayer.field.js in react

javascript

leaflet

reactjs

react-leaflet