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

柴火棒_

已于 2024-08-13 15:13:36 修改

阅读量211

点赞数 3

分类专栏： arcgis 文章标签： arcgis vue.js 前端

于 2024-08-13 11:39:10 首次发布

本文链接：https://blog.csdn.net/qq_35283993/article/details/141159378

版权

arcgis 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、前端使用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)