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

【问题标题】：Leaflet-geotiff usage in Angular 6 applicationLeaflet-geotiff 在 Angular 6 应用程序中的使用
【发布时间】：2019-04-10 10:16:38
【问题描述】：

我遇到了无法在地图上显示任何.tif 图像的问题。我正在为我的地图使用leaflet-geotiff 插件。我下载了文件（例如来自gis-lab.info，这里是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 lib 中添加了一些 console.log 以确保 tif 文件在那里解析）：

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

【问题讨论】：

标签： angular typescript leaflet geotiff

【解决方案1】：

显然Custom Mask is off screen. 出现错误，因为provided file 表示在WGS 84 / UTM zone 39N 投影中

虽然geotiff.js library 仅支持EPSG:4326 文件（leaflet-geotiff 的依赖项）。

来自leaflet-geotiff自述文件：

url - GeoTIFF 文件 URL。目前仅支持 EPSG:4326 文件。

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

【讨论】：