展示GeoTiff图像Openlayers 3

Question

我需要显示一个QGIS进行地理编码的GeoTiff格式的光栅图像。看起来Openlayers 3.15不支持这种格式。你知道这方面的任何信息吗？

var agentUrl = 'http://localhost:9925/Wgis/assets/img/allertaMeteoGeo.tif';

    var bounds = [ 713101.704, 4044061.027, 713101.704, 4044061.027];



    var view2 = new ol.View({
        center : [ -87.7302542509315, 43.744459064634 ],
        projection : "EPSG:3857",
        zoom : 12
    });

    var sorgente = new ol.source.ImageMapGuide({
        projection : "EPSG:3857",
        url : agentUrl,
        metersPerUnit : 111319.4908,

        imageSize: [792, 452],
        ratio : 2
    });

    var raster = new ol.layer.Image({
        extent : bounds,
        source : sorgente
    });

    var map2 = new ol.Map({
        layers : [ raster ],
        target : 'map2',
        view : view2
    });

- Stefano Serviddio

---

我认为这是不可能的，可以参考GIS SE上的这些问题：http://gis.stackexchange.com/questions/15095/how-to-display-a-geotiff-image-with-openlayers-at-the-right-place http://gis.stackexchange.com/questions/97943/how-to-open-geotiff-as-base-layer-on-openlayers - chrki

这个在第四版中还可用吗？你找到解决方案了吗？ - Daniel Dudas

Answer 1

我同意chrki的观点，目前无法在OpenLayers地图中显示TIFF（或GeoTIFF），详情请见：https://gis.stackexchange.com/a/98029。浏览器不能原生显示TIFF图像。

作为一个实验，我从ArcGIS栅格图像中导出了TIFF和PNG文件。然后在OpenLayers地图（使用v3.18.2）中，我使用以下函数成功地将PNG添加为ol.layer.Image，但是对于TIFF它没有给出任何提示却失败了：

function addImage() {

    extent = [-13602803.9769, 4920816.12423, -13599949.5192, 4923458.74552]; // [left, bottom, right, top]

    var projection = new ol.proj.Projection({
        code: 'xkcd-image',
        units: 'pixels',
        extent: extent
    });

    var StaticImage = new ol.layer.Image({
        source: new ol.source.ImageStatic({
        attributions: 'yada yada',
        url: /robs/gis_data/LiDAR Elevations2.png',
        projection: projection,
        imageExtent: extent
        })
    });    

    map.addLayer(StaticImage);
    map.getView().fit(extent, map.getSize());    
} 

- Rob Irwin

---

这个在第四版中还可用吗？ - Daniel Dudas

是的，它在Openlayers ver. 4x中有效。 - Rob Irwin

Answer 2

实际上，您可以在之前对图像进行平铺，将其加载到IIS中，并从类似以下内容的位置获取它：

var newLayer = new ol.layer.Tile({
source: new ol.source.OSM({
        url: 'maps/{z}/{x}/{y}.png'
})});

- FriendsKenny