当前位置：首页 > article >正文

vue+openlayers直接前端加载tif文件，不需要geoserver发布

article 2025/2/28 20:09:00

一、前端使用openlayers加载图层，一般先是通过geoserver发布tif文件为wms服务后进行加载，代码如下：

let layer1 = new TileLayer({
    source: new TileWMS({
      url: 'http://127.0.0.1:8080/geoserver/dunbanl/wms',
      params: {
        'LAYERS': 'dunbanl:dalicun',
            'FORMAT': 'image/jpeg',
            'VERSION': '1.1.1',
      },
      serverType: 'geoserver',
    }),
  });

二、geoserver部署发布流程用脚本比较方便，当前需求只有简单的几个图层，尝试直接前端渲染，使用GeoTIFF和WebGLTile

import GeoTIFF from 'ol/source/GeoTIFF';
import WebGLTile from 'ol/layer/WebGLTile';

首先是使用arcmap通过克里金插值导出tif栅格数据，然后使用geotiff和webgltile进行前端渲染，叠加图层即可。导出的文件是矩形，没有数据的地方叠加显示黑色，将nodata设置为0即可。

导出的栅格图像如上图所示

const source = new GeoTIFF({
  sources: [{
    url: '../../src/assets/layers/quanlin.tif',
    nodata: 0,
  }]
});
const layer = new WebGLTile({
  source: source
})
map.addLayer(layer)