Используйте leaflet.canvaslayer.field. js в реакции - PullRequest
Новая
       7

Используйте leaflet.canvaslayer.field. js в реакции

0 голосов
/ 13 марта 2020

Я пытался работать с плагином leaflet.canvaslayer.field. js в стандартном html для отображения некоторого 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());

});

Спасибо

1 Ответ

0 голосов
/ 14 марта 2020

Обычно вам необходимо установить следующие зависимости через npm:

  • chroma. js

  • @ turf / insid

  • geotiff. js

  • d3js, которые требуются плагину, а затем импортируют их в ваш компонент.

Однако, как уже упоминалось здесь этот плагин должен быть включен через тег и его нелегко импортировать в современное связанное JS приложение через стандартный синтаксис import / require)

Импортируйте первые 3 зависимости с помощью тега скрипта в индексе. html, поскольку они необходимы для скрипта плагина. 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, поэтому вы можете загрузить сценарий асинхронно и получить к нему доступ при загрузке. 

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

Вы можете увидеть демо с этим примером, переписанным в React с официальной страницы.

...