嗨，谁能解释一下如何使用ol ?GeoTIFF层?我尝试了这个教程https://openlayers.org/workshop/en/cog/true-color.html
OL版本:6.14.1我试着像这样加载图层:
const geoTiffLayer = new ol.layer.WebGLTile({
id: `geoTiffs`,
zIndex: 3,
source: new ol.source.GeoTIFF({
sources: [
{
url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/TCI.tif'
}
]
})
});
olMap.addLayer(geoTiffLayer);
如果您使用的是最新的ol.js并且您的olMap设置正确，则应该可以工作:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/main/build/ol.js"></script>
</head>
<body>
<div id="map-container" class="map"></div>
<script type="text/javascript">
const projection = new ol.proj.Projection({
code: 'EPSG:32721',
units: 'm',
});
const sourceExtent = [300000, 6090260, 409760, 6200020];
const olMap = new ol.Map({
target: 'map-container',
view: new ol.View({
projection: projection,
center: ol.extent.getCenter(sourceExtent),
extent: sourceExtent,
zoom: 1,
})
});
const geoTiffLayer = new ol.layer.WebGLTile({
id: `geoTiffs`,
zIndex: 3,
source: new ol.source.GeoTIFF({
sources: [
{
url: 'https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/21/H/UB/2021/9/S2B_21HUB_20210915_0_L2A/TCI.tif'
},
],
}),
});
olMap.addLayer(geoTiffLayer);
</script>
</body>
</html>