Geowebcache + Openlayers3 with XYZ source：缩放地图出错答案

【问题标题】：Geowebcache + Openlayers3 with XYZ source: error by zooming the mapGeowebcache + Openlayers3 with XYZ source：缩放地图出错
【发布时间】：2016-12-09 09:01:29
【问题描述】：

我正在尝试做与这里相同的地图：

Openlayers3: tile grid incorrect with pixelratio=3 using Geoserver/Geowebcache as backend

但使用TMS 协议而不是WMS。

地图效果很好，但放大时有一点问题，只能从缩放级别 4 更改为缩放级别 5：地图似乎“向上跳跃”。所有像素比率都会出现问题。

这是我的源代码。任何帮助表示赞赏：

<!DOCTYPE html>
<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>
<style type="text/css">
    body { font-family: sans-serif; font-weight: bold; font-size: .8em; }
    body { border: 0px; margin: 0px; padding: 0px; }
</style>
<body>
<div id="map" class="map" style="width: 85%; height: 85%;border: 0px; padding: 0px"> </div>
<script>
    console.log("DOMContentLoaded");
    try {
        var config = {
            "bounds": {
                "left" : 475279.2689196961,
                "bottom" : 5473193.572300382,
                "right" : 476655.1750108673,
                "top" : 5474594.636365802
            }
        };

        var bounds = [config.bounds.left, config.bounds.bottom, config.bounds.right, config.bounds.top];
        var resolutions = [
            1.4,
            0.7,
            0.35,
            0.175,
            0.0875,
            0.04375,
    ];

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

        var matrixSet = 'unihd15';
        // available gridsets in backend: unihd15, unihd15_512 and unihd15_768            
        if (tilePixelRatio > 1){
          matrixSet = matrixSet + '_' + (256 * tilePixelRatio).toString();
        }


        var res_length = resolutions.length;
        var matrixIds = new Array(res_length );
        for (var z = 0; z < res_length ; ++z) {
            matrixIds[z] = matrixSet + ':'+ z;
        }

        console.log('matrixSet is: ' + matrixSet);
        console.log(matrixIds);
        console.log(matrixIds[0] + ' '+ resolutions[0]);
        console.log('Center: ' + ol.extent.getCenter(bounds));
        console.log('Pixel ratio: ' + window.devicePixelRatio);
        console.log('Bounds: ' + bounds);
        console.log('TopLeft: ' + ol.extent.getTopLeft(bounds));

        var projection = new ol.proj.Projection({
            code: 'EPSG:32632',
            units: 'm',
            extent: [166021.4431, 0.0000, 833978.5569, 9329005.1825]
        });

        var tileGrid = new ol.tilegrid.TileGrid({
            extent: bounds,
            resolutions: resolutions,
            origin: ol.extent.getTopLeft(bounds),
            tileSize: [256, 256]
        });

        var view = new ol.View({
            extent: bounds,
            zoom: 0,
            center: ol.extent.getCenter(bounds),
            projection: projection,
            resolutions: resolutions
        });

        var layerName = 'unihd15:unihd15_0_basemap';

        var tms_source = new ol.source.XYZ({
            projection: projection,
            tileGrid: tileGrid,
            tilePixelRatio: tilePixelRatio,
            url: 'http://ssp.deepmap.de/geo/gwc/service/tms/1.0.0/' + layerName + '@' + matrixSet + '@png/{z}/{x}/{-y}.png'
        });

        var layer = new ol.layer.Tile({
            source: tms_source,
            extent: bounds
        });

        var map = new ol.Map({
            projection: projection,
            controls: ol.control.defaults(
                {
                    rotate: false,
                    attributionOptions: {
                        collapsible: false
                    }
                }
            ),
            view: view,
            layers: [layer],
            target: 'map'
        });
        console.log("no error");
    } catch (error) {
        console.log("error");
        console.log(error);
    }
</script>
</body>
</html>

【问题讨论】：

您的 tileGrid 对我来说看起来不正确。尝试将origin 设置为ol.extent.getBottomLeft(bounds)，或者完全删除origin 配置。
无效...问题一定与缩放级别有关，因为它仅在从缩放级别 4 切换到 5 时才会发生。
PS：我修复了源代码中的一个错误，现在你可以运行sn-p了。
这种问题通常来自不正确的extent。要获得正确的范围，请转到 ssp.deepmap.de/geo/gwc/service/tms/1.0.0/…（目前不在您的 GeoServer 上，但那是 URL），然后从那里使用 <BoundingBox>。
嘿，它有效！非常感谢你。如果您添加答案，我会接受。

标签： gis openlayers-3 geoserver

【解决方案1】：

这种问题通常来自不正确的程度。要获得正确的范围，请转至 http://ssp.deepmap.de/geo/gwc/service/tms/1.0.0/unihd15:unihd15_0_basemap@EPSG:32632@png（目前不在您的 GeoServer 上，但那是 URL），然后从那里使用 <BoundingBox>。

【讨论】：

你能帮忙解决一下究竟是什么