代码之家 › 专栏 › 技术社区 › stopopol

所有缩放级别上的WMS层未正确渲染

wms geoserver postgis openlayers javascript

stopopol · 技术社区 · 6 年前

我已经用postgis v2.4.2扩展配置了一个postgresql v9.5.12数据库。我使用geoserver v2.13.1将数据库的表呈现为wms层,并使用openlayers(v4.6.5)在webapp中可视化它们。使用的投影是 EPSG:31255 .

但是,WMS图层在所有缩放级别上都没有正确显示。有时瓷砖被切断(见屏幕截图1)或不是每一层中的每一点都被渲染(见屏幕截图2)。在某些级别上,尤其是放大时,根本不显示图层。这些图层在geoserver本身以及将其添加到qgis时都会正确显示。

我也为其他层使用这个设置和代码,它工作顺利,但是这些层使用不同的投影(espg:4326)。

我该怎么解决?

截图1(右侧部分轮廓被切断)

截图2(中间缺少绿点)

编辑: 下面是一个代码片段,它包含了epsg:31255的定义,而没有实际用于wmssource。

    // proj4js custom projection        
    proj4.defs("EPSG:31255","+proj=tmerc +lat_0=0 +lon_0=13.33333333333333 +k=1 +x_0=0 +y_0=-5000000 +ellps=bessel +towgs84=577.326,90.129,463.919,5.137,1.474,5.297,2.4232 +units=m +no_defs");
    var proj31255 = ol.proj.get('EPSG:31255');
    proj31255.setExtent([-115771.3204, 130037.7189, 115359.4571, 408002.5351]);

    var wmsSource = new ol.source.TileWMS({
        url: geoserver_getcapabilities_url + geoserver_workspace + '/wms?',
        params: {
            'LAYERS': wms_layer_name
        },
        serverType: 'geoserver',
        //projection: 'EPSG:31255'
    });

    var wmsLayer = new ol.layer.Tile({
        source: wmsSource,
        name: 'selected_wms_layer',
        visible: true
    }); 

    var osmLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var view = new ol.View({
        center: map_centre,
        zoom: initial_zoom_level,
        projection: 'EPSG:3857'
    });

    /** Set-up the map */
    var map = new ol.Map({
        target: 'map',
        layers: [osmLayer, wmsLayer, point_layer],
        overlays: [overlay],
        view: view,
        loadTilesWhileAnimating: true,
        loadTilesWhileInteracting: true,
        controls: ol.control.defaults().extend([
            new ol.control.OverviewMap()
        ])
    });

2 回复 | 直到 6 年前

Ian Turton 6 年前

出现这种问题的通常原因是使用标准wms作为 TileWMS 层。这会在客户端和服务器中引起各种各样的问题。

使用提供的wmts或tms端点从geoserver/geowebache请求tiles。例如这个 page 展示如何正确地做。

nioKi 6 年前

DR: An excellent working example is available on the OpenLayers WebSite

(在下面的例子中,我使用的位置应该在奥地利的某个地方)

首先,让我们确保epsg:31255设置正确。如评论中所说,我建议您使用proj4js,如果您必须处理预测,它将使您的生活更轻松。

将proj4js库导入应用程序后,将epsg:31255投影声明如下:

proj4.defs("EPSG:31255","+proj=tmerc +lat_0=0 +lon_0=13.33333333333333 +k=1 +x_0=0 +y_0=-5000000 +ellps=bessel +towgs84=577.326,90.129,463.919,5.137,1.474,5.297,2.4232 +units=m +no_defs");

(您可以使用 epsg.io 作为来源: https://epsg.io/31255.js )

提示:导入proj4js 之前 OpenLayers,它将在没有 OpenLayers中的额外工作。

第一种情况:处理所有层的一个投影

现在,我们需要创建或更新openlayers地图,其中包含一个考虑到这个新投影的视图。

let myMap = new ol.Map({
        target: myDOMElement,
        layers: [...],
        view: new ol.View({
            center: ol.proj.fromLonLat([50163.181015, 255280.097217]),
            zoom: 5,
            projection: 'EPSG:31255'
        })
    });

现在,设置正确的中心可能有些困难,因为必须在epsg:31255投影中设置其坐标。

为了更简单,我建议使用基于epsg:4326的转换。

view: new ol.View({
    // Converts from coordinates known in EPSG:4326 to coordinates in EPSG:31255
    center: ol.proj.transform([13.7548828125, 47.43896484375], 'EPSG:4326', 'EPSG:31255'),
    zoom: 5,
    projection: 'EPSG:31255' // Projection you want the map to use
})

第二种情况:处理不同的预测

如果你对不同的层有不同的投影呢?

只需在tilewms中指定它们(确保它们都已声明)。

let myWMSSource = new ol.source.TileWMS({
    url: myURL,
    params: {
        'LAYERS': 'myCustomLayer'
    },
    serverType: 'geoserver',
    projection: 'EPSG:31255' // Declare the projection the source is in.
});

OpenLayers应该在地图投影中自动重新投影它们。

具体示例:在OSM地图上使用图层

/** Set a source */
let myWMSSource = new ol.source.TileWMS({
    url: myURL,
    params: {
        'LAYERS': 'myCustomLayer'
    },
    serverType: 'geoserver',
    projection: 'EPSG:31255'
});

/** Create a custom tile layer */
let myLayerTile = new ol.layer.Tile({
    source: myWMSSource,
    name: 'MyTile',
    visible: true
});

/**
 * Create a layer using OSM.
 * Note that ol.source.OSM uses EPSG:3857
 */
let OSMLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

/** Set-up the map */
let myMap = new ol.Map({
    target: DOMElement,
    layers: [OSMLayer, myLayerTile],
    view: new ol.View({
        center: ol.proj.fromLonLat([1549123.872774, 6044640.196792]),
        zoom: 1,
        projection: 'EPSG:3857'
    }),
    loadTilesWhileAnimating: true,
    loadTilesWhileInteracting: true,
    controls: ol.control.defaults().extend([
        new ol.control.OverviewMap()
    ])
});