如何使用JavaScript根据ShapeFile剪辑Geotiff？

Question

情况：我正在使用ReactJS和Geotiff.js在地图上的Geotiff文件中绘制数据。我正在使用的geotiff文件的一个示例是以下链接：

我想做的：当用户单击特定状态（区域或任何特定形状）时，TIFF文件中提供的数据仅适用于该形状。基本上，我想根据给定的形状将数据夹在Geotiff文件中（假设我具有形状边界定义。进一步的形状边界的投影系统和Geotiff文件是相同的）。

请建议使用Georaster，Leflet，Georaster-Layer-For-For-for Leaflet或其他一些库。

这是目前的代码，可以在地图上显示整个TIFF数据。

代码：

import { useEffect, useRef } from "react";
import proj4 from "proj4";
import { useLeafletContext } from "@react-leaflet/core";
import { useMap } from "react-leaflet";
import parseGeoraster from "georaster";
import GeoRasterLayer from "georaster-layer-for-leaflet";

window.proj4 = proj4;

const GeotiffLayer = ({ url, options }) => {
const geoTiffLayerRef = useRef();
const context = useLeafletContext();
const map = useMap();

useEffect(() => {
    const container = context.layerContainer || context.map;

    fetch(url)
        .then((response) => response.arrayBuffer())
        .then((arrayBuffer) => {
            console.log(arrayBuffer);
            parseGeoraster(arrayBuffer).then((georaster) => {
                console.log("georaster:", georaster.values[0][1]);
                options.georaster = georaster;
                geoTiffLayerRef.current = new GeoRasterLayer(options);
                container.addLayer(geoTiffLayerRef.current);

                map.fitBounds(geoTiffLayerRef.current.getBounds());
            });
        });

    // return () => {
    //     container.removeLayer(geoTiffLayerRef.current);
    // };
}, [context, url, map, options]);

return null;
};

export default GeotiffLayer;

输出：

图1说明了地图上显示的整个TIFF文件。

图2说明了单击特定状态后的输出。

我想做的事情：当用户点击特定状态时，只能显示TIFF数据，而不是针对其他形状显示形状。

请建议使用Georaster，Leflet，Georaster-Layer-For-For-for Leaflet或其他一些图书馆建议任何方法。