在Angular 6应用程序中使用小叶geotiff [英] Leaflet-geotiff usage in Angular 6 application

问题描述

我遇到了无法在地图上显示任何.tif图片的问题.我在地图上使用 leaflet-geotiff 插件.我下载了文件(例如，从 gis-lab.info 下载，这是下载链接)，并尝试粘贴并显示在我的地图上.但是我总是得到Custom Mask is off screen.

I faced with problem that I can't to display any .tif image on my map. I'm using leaflet-geotiff plugin for my map. I downloaded the file (for example from gis-lab.info, here is link to download) and tried to paste and display on my map. But I always get 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文件):

And also here what I have in browser console (I added some console.log in leaflet-geotiff lib to be sure that tif file parsed there):

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

Seems in code in leaflet-geotiff it happens when plotHeight and plotWidth has negative values. And my layer still not showing on map. What am I doing wrong? And how can I display custom tif file correctly?

推荐答案

显然，由于提供的文件在 WGS 84 / UTM zone 39N 投影

Apparently the error Custom Mask is off screen. occurs since the provided file is represented in WGS 84 / UTM zone 39N projection

，而 geotiff.js库仅支持EPSG:4326文件(leaflet-geotiff).

来自leaflet-geotiff自述文件:

url-GeoTIFF文件的URL.当前仅支持EPSG:4326文件.

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

重新投影到(例如，使用此工具)到EPSG:4326 ，它可以通过leaflet-geotiff这样显示

Once reprojected to (e.g. using this tool) to EPSG:4326, it could be displayed via leaflet-geotiff like this

这篇关于在Angular 6应用程序中使用小叶geotiff的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！