Leaflet-geotiff 在 Angular 6 应用程序中的使用

Question

我遇到了无法在地图上显示任何 .tif 图像的问题。我正在使用 leaflet-geotiff plugin for my map. I downloaded the file (for example from gis-lab.info, here is link to download) 并尝试粘贴并显示在我的地图上。但我总是得到 Custom Mask is off screen.

这是我如何使用它的示例：

import * as geotiff from 'leaflet-geotiff/leaflet-geotiff';
import * as plotty from 'leaflet-geotiff/leaflet-geotiff-plotty';

export class MapComponent {

    ngOnInit() {
        this.map.on('load', () => {
            const options = {
                band: 0,
                name: 'Custom Mask',
                opacity: 1,
                renderer: new plotty.Plotty({
                    colorScale: 'greys'
                })
            };
            new geotiff.LeafletGeotiff('assets/uploads/clearcuts_174016_20101018_clip.tif', options).addTo(this.leafletMap);
        });
    }
}

还有我在浏览器控制台中的内容（我在 leaflet-geotiff 库中添加了一些 console.log 以确保在那里解析了 tif 文件）：

似乎在 leaflet-geotiff 的代码中它发生在 plotHeight 和 plotWidth 具有负值时。我的图层仍然没有显示在地图上。我究竟做错了什么？以及如何正确显示自定义 tif 文件？

Answer 1

显然错误 Custom Mask is off screen. 自 provided file is represented in WGS 84 / UTM zone 39N 投影

发生

而 geotiff.js library 仅支持 EPSG:4326 个文件（依赖于 leaflet-geotiff）。

来自 leaflet-geotiff 自述文件：

url - GeoTIFF file URL. Currently only EPSG:4326 files are supported.

一旦重新投影到（例如使用 this tool）到 EPSG:4326，它可以通过 leaflet-geotiff 像这样显示

Leaflet-geotiff 在 Angular 6 应用程序中的使用

Leaflet-geotiff usage in Angular 6 application

angular

typescript

leaflet

geotiff