OpenLayers使用WMS加载GeoTiff数据源踩坑记录

原创

已于 2022-02-11 17:54:13 修改 · 4.4k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#gis

于 2022-01-14 16:22:27 首次发布

前言

OpenLayers最近版本（6.11.0）上看到了使用WebGLTile图层加载GeoTIFF的示例，功能强大，不仅可以在前端直接显示tif影像，还可以做分波段彩色合成，对比度拉伸等色彩上的调整。简单试了下，发现数据源上存在一定的限制
在这里插入图片描述
WebGLTile的source属性接受DataTileSource和TileImage两种source类型，结合示例里的数据源发现WebGLTile图层只接受单张tif或者XYZ切片格式数据源，目前还不支持WMS地图服务，虽然GeoServer的WMS服务支持输出image/tiff。
这时看着 #GeoTIFF tile pyramid这个示例的我灵光一闪，是不是可以正常地用TileWMS加载发布为WMS的影像，设置输出tif格式，同时设置 #tileLoadFunction截胡即将加载的瓦片，将tif瓦片用GeoTIFF tile pyramid里的方法加载到地图上，如下

构建map和source

// 设置瓦片格网
const tileGrid = new TileGrid({
   
   
  origin: [-180, 90],
  resolutions: [0.703125, 0.3515625, 0.17578125, 8.7890625e-2, 4.39453125e-2],
  tileSizes: [
    [512, 256],
    [1024, 512],
    [2048, 1024],
    [4096, 2048],
    [4096, 4096]
  ]
});
// 一些全局对象
const pyramid = new LayerGroup();
const layerForUrl: any = {
   
   };
const zs = tileGrid.getResolutions().length;
// 构建source
const source = new TileWMS({
   
   
  url: 'http://localhost:8081/geoserver/taihu/wms',
  params: {
   
   
    FORMAT: 'image/tiff',
    VERSION: '1.1.1',
    tiled: true,
    STYLES: '',
    LAYERS: 'workspace:layername'
  },
  tileLoadFunction: (imageTile, src) => {
   
   
  	// 这里截胡瓦片
    useLayer(src, imageTile.tileCoord);
  }
});
// 构建图层和map
const layer = new Layers.Tile({
   
   
 source: source
});
this.map = new Map({
   
   
  target: 'map',
  layers: [layer, pyramid],
  view: new View({
   
   
    projection: 'EPSG:4326',
    center: [0, 0],
    zoom: 0,
    showFullExtent: true
  })
});