OpenLayers 加载GeoTIFF影像

前言

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`文件

php 复制代码

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组件，请自行替换。

xml 复制代码

<!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>

❝

OpenLayers示例数据下载，请回复关键字：ol数据

全国信息化工程师－GIS 应用水平考试资料，请回复关键字：GIS考试
❝

【GIS之路】 已经接入了智能助手，欢迎关注，欢迎提问。

欢迎访问我的博客网站-长谈GIS ：http://shanhaitalk.com

都看到这了，不要忘记点赞、收藏 + 关注哦！

本号不定时更新有关 GIS开发 相关内容，欢迎关注 !

OpenLayers 加载GeoTIFF影像

前言

1. 下载GeoTIFF数据

2. 添加geotiff.js库

3. IIS部署GeoTIFF文件

4. 加载GeoTIFF文件

5. 完整代码

1. 下载`GeoTIFF`数据

2. 添加`geotiff.js`库

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

4. 加载`GeoTIFF`文件