16openlayers加载COG（云优化Geotiff）

lightgis2025-11-12 2:06

1.前言

当在内网，没有GIS Server的时候，又想加载底图，一个办法就是使用COG。

2.实战

先用地图下载器，市面上有很多。下载一张geotiff。

将其使用GDAL命令处理成cog，命令如下：

bash 复制代码

gdal_translate z:\data\a.tif  z:\data\acog.tif -of COG  -co COMPRESS=JPEG

将其发布到nginx上，nginx的配置片段：

bash 复制代码

 location /tif {
            alias   "z:\\data\\";
            index  index.html index.htm;
  }

启动nginx，就可以用http://localhost/tif/acog.tif 访问了。

开始写前端代码：

main.js

bash 复制代码

import Map from 'ol/Map.js';
import TileLayer from 'ol/layer/WebGLTile.js';
import GeoTIFF from 'ol/source/GeoTIFF.js';

const source = new GeoTIFF({
  sources: [
    {
      url: 'http://localhost/tif/acog.tif',
    },
  ], 
  convertToRGB:true
});

引入GeoTIFF的source、TileLayer，创建一个GeoTIFF source的对象。

convertToRGB:true，将其他色彩空间的颜色转换成RGB，即所见和用地图工具直接打开的效果一致。

bash 复制代码

var tileLayer = new TileLayer({
      source: source,
    })

创建一个TileLayer的图层对象，将tileLayer使用Map的addLayer方法添加进map对象中。