文章/答案/技术大牛

发布

社区首页 >问答首页 >Openlayers3:使用Geoserver/Geowebcache作为后端的pixelratio=3不正确的网格

问Openlayers3:使用Geoserver/Geowebcache作为后端的pixelratio=3不正确的网格
EN

Stack Overflow用户

提问于 2016-12-07 08:16:56

回答 1查看 1.2K关注 0票数 1

我正在开发一个使用Openlayers3和geoserver/geowebcache作为后端的小型and地图。

我的目标是支持带有pixelratio=1、pixelratio=2和pixelratio=3的浏览器/显示器。

为此，我在geoserver后端定义了3个网格集，其瓷砖大小分别为256x256、512x512和768x768。我假定：

pixelratio=1需要一个瓷砖大小为256x256的网格集。
pixelratio=2需要一个具有大小为512x512的网格集。
pixelratio=3需要一个带有瓷砖大小768x768的网格集。

现在，我的代码只适用于pixelratio=1和pixelratio=2。但是如果pixelratio=3 geowebcache返回一个错误：

geowebcache-cache-result:MISS
geowebcache-miss-reason:request does not align to grid(s) 'grid_512' 'grid_768' 'grid_256'

如果pixelratio=3 Open层生成这样的URL：

http://localhost:8082/wms?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetMap&FORMAT=image%2Fpng&TRANSPARENT=false&layers=mfn_mwb17%3Amfn_mwb17_0_basemap&TILED=true&WIDTH=768&HEIGHT=768&SRS=EPSG%3A32632&STYLES=&FORMAT_OPTIONS=dpi%3A270&BBOX=536964.8438079988%2C5280880.182948656%2C537609.9638079988%2C5281525.3029486565

Openalayers将瓷砖尺寸更改为768x768，DPI更改为270，但显然没有正确计算网格。

Geoserver中的演示地图(基于Openlayers2)适用于所有三个网格集。

我正在使用geoserver 2.10和google chrome。到目前为止这是我的密码。对于后端的所有3个网格集，分辨率和界限是相同的。如有任何帮助，我们将不胜感激：

<html>
<head>
    <title>WMS Tiles</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v3.19.1/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v3.19.1/build/ol.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<script>
    console.log("DOMContentLoaded");
    try {
        var config = {
            "bounds": {
                "left": 536319.7238079988,
                "bottom": 5278944.822948656,
                "right": 540150.3790103362,
                "top": 5282223.663765706
            }
        };

        var bounds = [config.bounds.left, config.bounds.bottom, config.bounds.right, config.bounds.top];
        var resolutions = [2.5199999999999996,
            1.2599999999999998,
            0.6299999999999999,
            0.31499999999999995,
            0.15749999999999997,
            0.07874999999999999,
            0.03937499999999999
        ];

        var projection = new ol.proj.Projection({
            code: 'EPSG:32632'
        });

        var params = {
            'VERSION': '1.1.1',
            'layers': "mfn_mwb17:mfn_mwb17_0_basemap",
            'TILED': true,
            'TRANSPARENT': false
        };

        var tileGrid = new ol.tilegrid.TileGrid({
            extent: bounds,
            resolutions: resolutions,
            origin: [config.bounds.left, config.bounds.bottom],
            tileSize: [256, 256]
        });
        var view = new ol.View({
            zoom: 0,
            center: ol.extent.getCenter(bounds),
            projection: projection,
            resolutions: resolutions
        });

        var map = new ol.Map({
            controls: ol.control.defaults(
                {
                    rotate: false,
                    attributionOptions: {
                        collapsible: false
                    }
                }
            ),
            view: view,
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                        url: "http://localhost:8082/wms",
                        params: params,
                        tileGrid: tileGrid,
                        serverType: 'geoserver'
                    }),
                    projection: projection,
                    extend: bounds
                })
            ],
            target: 'map'
        });
        console.log("no error");
    } catch (error) {
        console.log("error");
        console.log(error);
    }
</script>
</body>
</html>

geoserver

wms

gis

openlayers-3

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-12-08 08:52:20

代码中有几个问题可能是罪魁祸首：

projection必须在ol.source.TileWMS实例上配置，而不是在ol.layer.Tile上配置。
要限制ol.layer.Tile的范围，请使用extent选项，而不是extend。

修复上述两个问题可能会使您的应用程序正常工作，但是有一些注意事项：

如果要确保始终使用缓存的块，则必须将应用程序限制为特定的像素比率。在您的示例1、2和3中，当使用配置了选项ol.source.TileWMS的serverType: 'geoserver'时，请求总是使用确切的设备像素比来进行，这也可以是1.33、1.5、6，或者其他许多没有瓷砖的不同值。

要解决这个问题，您需要使用tilePixelRatio来配置源代码，而不是使用serverType选项-如果您继续使用WMS。可以这样计算tilePixelRatio：

var tilePixelRatio = 1;
if (ol.has.DEVICE_PIXEL_RATIO > 2.5) {
  tilePixelRatio = 3;
} else if (ol.has.DEVICE_PIXEL_RATIO > 1.5) {
  tilePixelRatio = 2;
}

我建议使用TMS或WMTS代替。对于TMS来说，事情会是这样的：

var layerName = 'mfn_mwb17:mfn_mwb17_0_basemap';
var gridset = 'grid_' + (tilePixelRatio * 256);
var layer = new ol.layer.Tile({
  extent: bounds,
  source: new ol.source.XYZ({
    projection: 'EPSG:32632',
    tileGrid: tileGrid,
    tilePixelRatio: tilePixelRatio,
    url: '/geoserver/gwc/service/tms/1.0.0/' + layerName +
        '@' + gridset + '@png/{z}/{x}/{-y}.png'
  })
});

以上假设您的网格集名为grid_256、grid_512和grid_768，并且都使用相同的块矩阵集。因此，它们仅在像素(256、512和768)的宽度和高度上存在差异。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41012401

复制

相似问题

问Openlayers3:使用Geoserver/Geowebcache作为后端的pixelratio=3不正确的网格
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Openlayers3:使用Geoserver/Geowebcache作为后端的pixelratio=3不正确的网格EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Openlayers3:使用Geoserver/Geowebcache作为后端的pixelratio=3不正确的网格
EN