前言
❝
GeoTIFF是开放地理控件联盟（OGC）实施标准，在TIFF的基础上，嵌入了地理空间元数据，也就是说，GeoTIFF是带有地理空间参考和地理数据的TIFF文件。其中GeoTIFF元数据包括坐标系、地图投影以及特定位置信息等。GeoTIFF格式广泛应用于航空影像、卫星影像以及数字高程模型中。
在上节介绍了OpenLayers加载iis部署的GeoTIFF影像.
本节主要介绍采用Blob的方式加载GeoTIFF影像。OpenLayers加载iis部署的GeoTIFF影像链接：
1. 下载GeoTIFF影像数据
下载GeoTIFF数据，请参考GIS 影像数据源介绍。https://www.yuque.com/u37362584/pg4zca/nmw9pt7fgzkbfx3h#Geag9
2. 添加geotiff.js库
在OpenLayers中加载GeoTIFF影像之前，需要先引入geotiff.js库。cdn 地址： https://www.jsdelivr.com/package/npm/geotiff
3. IIS部署GeoTIFF文件
在本机测试可以采用windows自带的web服务器iis部署GeoTIFF文件，然后通过http进行访问
4. 加载GeoTIFF影像
查看GeoTIFF元数据信息，明确影像坐标系统。可以通过影像元数据文件进行查看，也可以通过GIS软件如ArcMap查看。
- 元数据信息
- ArcMap属性信息
从元数据信息中看到该影像坐标系为WGS 84 / UTM zone 48N，EPSG代码为32648。因为OpenLayers默认只支持4326和3857坐标系，所以需要自定义坐标系。如何自定义坐标系请查看之前的文章插入自定义坐标系的文章
const def = '+proj=utm +zone=48 +datum=WGS84 +units=m +no_defs +type=crs'
proj4.defs('EPSG:32648', def)
ol.proj.proj4.register(proj4)
const EPSG32648 = new ol.proj.Projection({
code: "EPSG:32648",
units: 'm',
extent: [166021.44, 0.0, 833978.56, 9329005.18], // 投影坐标系范围
worldExtent: [102.0, 0.0, 108.0, 84.0] // 世界坐标系范围
})
在epsg网站中可以看到目标坐标系的详细信息，其中Projected bounds对应extent参数，为投影坐标系范围；WGS84 bounds对应worldExtent参数，为世界坐标系范围。在视图对象中使用自定义坐标系。
// 方式一：定义view对象
view: new ol.View({
center: [654900, 2945100],
zoom: 10,
projection: EPSG32648
}),
// 方式二：使用source获取view对象
view: source.getView()
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="../../../libs/proj4.js"></script>
<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/LC08_B7.tif"
// url: "http://localhost/GeoTIFF/s1a_clip.tif"
// url: "http://localhost/GeoTIFF/LC08_B1.tif"
// url: "http://localhost/GeoTIFF/LE07_clip.tif"
url: "http://localhost/GeoTIFF/T48RXQ_20230314T032511_TCI_20m.tif"
}
],
nodata: 0, // 设置无效数据为0
opaque: true, // 开启透明
convertToRGB: true // 将色彩系统转换为RGB
})
// 加载GeoTIFF影像数据
const tiffLayer = new ol.layer.WebGLTile({
source: source
})
// 查看元数据信息
source.getView().then(res => {
console.log(res)
})
const def = '+proj=utm +zone=48 +datum=WGS84 +units=m +no_defs +type=crs'
proj4.defs('EPSG:32648', def)
ol.proj.proj4.register(proj4)
const EPSG32648 = new ol.proj.Projection({
code: "EPSG:32648",
units: 'm',
extent: [166021.44, 0.0, 833978.56, 9329005.18],
worldExtent: [102.0, 0.0, 108.0, 84.0]
})
const map = new ol.Map({
target: "map",
loadTilesWhileInteracting: true,
// view: source.getView(),
view: new ol.View({
center: [654900, 2945100],
zoom: 10,
projection: EPSG32648
}),
// 地图默认控件
controls: ol.control.defaults.defaults({
zoom: false,
attribution: true,
rotate: true
})
})
map.addLayer(tiffLayer)
</script>
