带有 XYZ 源的 Geowebcache + Openlayers3：缩放地图时出错

Question

我正在尝试制作与此处相同的地图：

但使用 TMS protocol instead of WMS。

地图效果不错，但放大时有一点问题，只有从缩放级别 4 更改为缩放级别 5：地图似乎 "jump upwards"。所有像素比率都会出现问题。

这是我的源代码。感谢任何帮助：

<!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>

Answer 1

这种问题一般是由于范围不正确引起的。要获得正确的范围，请转到 http://ssp.deepmap.de/geo/gwc/service/tms/1.0.0/unihd15:unihd15_0_basemap@EPSG:32632@png（当前无法在您的 GeoServer 上工作，但那是 URL），然后从那里使用 <BoundingBox>。

带有 XYZ 源的 Geowebcache + Openlayers3：缩放地图时出错

Geowebcache + Openlayers3 with XYZ source: error by zooming the map

gis

geoserver

openlayers-3