当前位置：首页 > news >正文

OpenLayers 加载GeoTIFF影像

news 来源：原创 2025/6/19 9:52:09

前言

GeoTIFF是开放地理控件联盟（OGC）实施标准，在TIFF的基础上，嵌入了地理空间元数据，也就是说，GeoTIFF是带有地理空间参考和地理数据的TIFF文件。其中GeoTIFF元数据包括坐标系、地图投影以及特定位置信息等。GeoTIFF格式广泛应用于航空影像、卫星影像以及数字高程模型中。

1. 下载`GeoTIFF`数据

下载GeoTIFF数据，请参考GIS 影像数据源介绍
[https://www.yuque.com/u37362584/pg4zca/nmw9pt7fgzkbfx3h#Geag9](https://www.yuque.com/u37362584/pg4zca/nmw9pt7fgzkbfx3h#Geag9)

2. 添加`geotiff.js`库

在OpenLayers中加载GeoTIFF影像之前，需要先引入geotiff.js库。cdn 地址：[https://www.jsdelivr.com/package/npm/geotiff](https://www.jsdelivr.com/package/npm/geotiff)

3. `IIS`部署`GeoTIFF`文件

在本机测试可以采用windows自带的web服务器iis部署GeoTIFF文件，然后通过http进行访问

4. 加载`GeoTIFF`文件

const source = new ol.source.GeoTIFF({sources: [{// url: "http://localhost/GeoTIFF/tci.tif"url: "http://localhost/GeoTIFF/GLOBCOVER_L4_200901_200912_V2.3.tif"// url: "http://localhost/GeoTIFF/LC08_L1TP_130042_20210212_20210304_01_T1_B1.TIF"}]
})
// 加载GeoTIFF影像数据
const tiffLayer = new ol.layer.WebGLTile({source: source,convertToRGB: true // 将色彩系统转换为RGB
})
map.addLayer(tiffLayer)

5. 完整代码

其中libs文件夹下的包需要更换为自己下载的本地包或者引用在线资源。本示例引用了layui组件，请自行替换。

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>加载GeoTIFF影像</title><meta charset="utf-8" /><script src="../../../js/ol9.2.4.js"></script><script src="../../../libs/layui/layui.js"></script><link rel="stylesheet" href="../../../css/ol9.2.4.css"><link rel="stylesheet" href="../../../libs/layui/css/layui.css"><script src="https://cdn.jsdelivr.net/npm/geotiff@2.1.3/dist-browser/geotiff.min.js"></script><style>* {padding: 0;margin: 0;font-size: 14px;font-family: '微软雅黑';}html,body {width: 100%;height: 100%;}#map {position: absolute;top: 50px;bottom: 0;width: 100%;}#top-content {position: absolute;width: 100%;height: 50px;line-height: 50px;background: linear-gradient(135deg, #ff00cc, #ffcc00, #00ffcc, #ff0066);color: #fff;text-align: center;font-size: 32px;}#top-content span {font-size: 32px;}</style>
</head><body><div id="top-content"><span>加载GeoTIFF影像数据</span></div><div id="map" title="地图显示"></div></body></html><script>const source = new ol.source.GeoTIFF({sources: [{url: "http://localhost/GeoTIFF/tci.tif"// url: "http://localhost/GeoTIFF/GLOBCOVER_L4_200901_200912_V2.3.tif"// url: "http://localhost/GeoTIFF/LC08_L1TP_130042_20210212_20210304_01_T1_B1.TIF"}],convertToRGB: true // 将色彩系统转换为RGB})// 加载GeoTIFF影像数据const tiffLayer = new ol.layer.WebGLTile({source: source})const map = new ol.Map({target: "map",loadTilesWhileInteracting: true,view: source.getView(),// layers: [],// 地图默认控件controls: ol.control.defaults.defaults({zoom: false,attribution: true,rotate: true})})map.addLayer(tiffLayer)
</script>