带有XYZ源的Geowebcache + Openlayers3:缩放地图时出错 [英] Geowebcache + Openlayers3 with XYZ source: error by zooming the map
问题描述
我正在尝试执行与此处相同的地图:
I'm trying the do the same map as here:
Openlayers3:图块网格与pixelratio不正确= 3使用Geoserver/Geowebcache作为后端
，但使用 TMS 协议而不是
but using the TMS protocol instead of WMS.
该地图效果不错，但是通过放大(仅从4级缩放级别更改为5级)才有一点问题:该地图似乎向上跳跃".所有像素比率都会出现此问题.
The map works good but there is a little problem by zooming in, only by changing from zoom level 4 to zoom level 5: the map seems to "jump upwards". The problem occurs with all pixel ratio.
这是我的源代码.任何帮助表示赞赏:
This is my source code. Any help is appreciated:
<!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>
推荐答案
Usually this kind of problem comes from an incorrect extent. To get the correct extent, go to http://ssp.deepmap.de/geo/gwc/service/tms/1.0.0/unihd15:unihd15_0_basemap@EPSG:32632@png (currently not working on your GeoServer, but that's the URL), and use the <BoundingBox> from there.
这篇关于带有XYZ源的Geowebcache + Openlayers3:缩放地图时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
