Openlayers加载在线的TIFF图片

由于ImageStatic不支持添加栅格数据作为图层源，所以使用Openlayers的GeoTIFF接口作为栅格数据源，
加载图层的类型为WebGLTile， 相较于使用canvans添加Tiff的方法来说，这种方法可以随着底图一起缩放。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var tlayer  // 创建tiff图层的全局变量
function addTiffLayer(){
    //tiff图层的数据源
    var tiffsource = new ol.source.GeoTIFF({
        sources: [{
                url: 'url_of_tiff'  //开发者所要加的Tiff图层的url地址，如https://tiffsource.com/example.tif
            },
        ],
    });
    //实例化Tiff图层
    tlayer = new ol.layer.WebGLTile({
        source:tiffsource,
        opacity:0.9 //透明度
    })
    //往map对象中添加图层
    this.map.addLayer(tlayer);
    //更新视图范围
    map.getView().fit(
        extent, //此处的extent为开发者自己设计
        {
            size:map.getSize(),
            padding: [10, 10, 10, 10]
        }
    )
    console.log('add successfully');
}

运行结果: