Javascript 在react中使用传单.canvaslayer.field.js

我曾尝试使用标准html中的插件来显示一些GeoTiff，现在我想了解如何将代码移植到react组件中

我的javascript代码是：

d3.请求：http://localhost:4000/map_tif/?band=223）.responseType（'arraybuffer'）。获取(
函数（错误、数据）{
console.log（tiffData.response）；
设ndvi=L.ScalarField.fromGeoTIFF（tiffData.response）；
ndvi.isContinuous=假
ndvi.longitudeNeedsToBeWrapped=假
控制台日志（ndvi）
设图层=L.canvasLayer.scalarField（ndvi{
颜色：色度.scale（'光谱'）.domain（ndvi.range.reverse（）），
不透明度：1，
填充器：（v）=>v！==0
}).addTo（地图）；
层上（'点击'，功能（e）{
如果（例如，值！==null）{
设v=e.value.toFixed（2）；
设html=（`Temperature${v}°C`）；
让popup=L.popup（）
.setLatLng（即latlng）
.setContent（html）
.openOn（地图）；
}
});
map.fitBounds（layer.getBounds（））；
});

---

谢谢

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

• chroma.js

• @草皮/内部

• geotiff.js

• d3js 插件所需的，然后将它们导入组件

但是，如前所述，该插件必须通过标签包含，并且不能通过标准导入/要求语法轻松导入到现代捆绑的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>
...

---

您可以在官方页面的React中看到一个重写了的示例。

谢谢，我稍后会测试它并返回YouTunks。谢谢您的建议，我在Map.js中已经有了一些其他图层，希望将此Geotiff作为覆盖。你知道我该怎么做吗？对不起，我对这个世界真的很陌生这是另一个问题，我的朋友。你应该在另一个线程中发布它。如果答案对你有帮助，请接受。你是对的！然后我将提出另一个问题：）是的，这对我帮助很大

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());
      });
  };