如何在 openlayers 6 中叠加 TIF 图像？答案

【问题标题】：How to overlay a TIF image in openlayers 6?如何在 openlayers 6 中叠加 TIF 图像？
【发布时间】：2021-06-07 07:16:35
【问题描述】：

我正在使用 openlayers 6 来渲染地图。我的地图有一些图层，我想将 TIF 图像动态添加到地图中作为叠加层。我正在使用 mapnik 和 mappoxy 进行切片缓存。我试过这个https://gis.stackexchange.com/questions/97943/how-to-open-geotiff-as-base-layer-on-openlayers 但没有用。我的代码是：

var map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      title: 'OSM',
      source: new OSM(),
      opacity: 0.5,
    }),
    new TileLayer({
       title: 'District',
       source: new XYZ({
           url: "http://127.0.0.1:8080/tms/1.0.0/dist/distgrid" + "/{z}/{x}/{-y}.png",
           crossOrigin: "anonymous",
           projection:projection,
           tileGrid: createXYZ({
                  extent: extent,
                  maxResolution: 2605.2421875,
                  tileSize: [256, 256],
                  maxZoom: 13,
                }),
       }),
    }),
  ],
view: new View({
    projection: projection,
    units:"metric",
    extent: extent,
    zoom:0,
    maxZoom:13,
    minZoom:0,
    maxResolution:2605.2421875,
    center:[654496.136597752,1155181.26900064],
    numZoomLevels:13,
  })
});

我有一张名为analysis_result.tif 的tif 图像，我想将其叠加到地图上。当我使用 qgis 添加它时，它会覆盖在正确的位置。

【问题讨论】：

标签： openlayers tiff openlayers-6 geotagging

【解决方案1】：

你可以将它托管在geoserver中，然后使用URL来显示它。

 tiffRaster = new ol.layer.Image({
        title: 'anyName',
        source: new ol.source.ImageWMS({
            url: 'http://urlOrLocalHost:8080/geoserver/faml/wms',
            params: {
                'LAYERS': 'faml:' + f
            },
            ratio: 1,
            serverType: 'geoserver'
        })
    });

在LAYERS 中将您的名称层与 Openlayers 中托管的名称 tiff 进行比较

【讨论】：