时间戳

首页 > 解决方案 > 在使用 openlayer 显示地理服务器 tiff 期间出现一些问题

openlayers - 在使用 openlayer 显示地理服务器 tiff 期间出现一些问题

问题描述

我尝试使用 openlayer 显示 geoserver tif，但显示不正确。以下是我的步骤：
1. 我从本地地理服务器中选择一个 tif，例如（topp:states）
2. 然后尝试使用 openlayer api 加载它

const tifMap = (target) => {

new Map({
    target,
    pixelRatio: 1,
    layers: [
      new TileLayer({
        source: new TileWMS({
            url: 'http://localhost:8080/geoserver/topp/wms',
            params: {'LAYERS': 'topp:states',  
                'BBOX': '-124.73142200000001,24.955967,-66.969849,49.371735', 
                'CRS': 'EPSG:4326', 
                'FORMAT': 'image/jpeg',
                'VERSION': '1.1.0'
            },
            serverType: 'geoserver'  
        })

      })
    ],
    view: new View({
      center: [741189, -3741196],
      zoom: 4
    })
  })
};

3.不幸的是，div上显示了几个相同的图像，我不知道为什么，实际上我试图通过浏览器打开链接（openlayer试图获取），它显示正常。 在此处输入图像描述

标签： openlayersgeoserver

解决方案

OpenLayers 根据源选项中设置的投影和 TileWMS 的平铺网格或 ImageWMS 的视口自动创建 BBOX 和 CRS 参数。最大范围可以在 tilegrid（在服务器投影单元中）或层（在视图投影单元中）中设置。假设服务器仅支持 EPSG:4326，并且您希望将平铺输出显示为 EPSG:3857，这些都可以：

  new TileLayer({
    source: new TileWMS({
        url: 'http://localhost:8080/geoserver/topp/wms',
        params: {'LAYERS': 'topp:states',  
            'FORMAT': 'image/jpeg',
            'VERSION': '1.1.0'
        },
        serverType: 'geoserver',
        projection: 'EPSG:4326' 
    }),
    extent: transformExtent([-124.73142200000001,24.955967,-66.969849,49.371735], 'EPSG:4326', 'EPSG:3857')
  })

.

  new TileLayer({
    source: new TileWMS({
        url: 'http://localhost:8080/geoserver/topp/wms',
        params: {'LAYERS': 'topp:states',  
            'FORMAT': 'image/jpeg',
            'VERSION': '1.1.0'
        },
        serverType: 'geoserver',  
        projection: 'EPSG:4326', 
        tilegrid: createXYZ({extent: [-124.73142200000001,24.955967,-66.969849,49.371735]})
    })
  })

推荐阅读