Geowebcache + Openlayers3 with XYZ source：缩放地图出错
Posted
技术标签:
【中文标题】Geowebcache + Openlayers3 with XYZ source：缩放地图出错【英文标题】：Geowebcache + Openlayers3 with XYZ source: error by zooming the map 【发布时间】：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>。
嘿，它有效！非常感谢你。如果您添加答案，我会接受。
【参考方案1】：
这种问题通常来自不正确的程度。要获得正确的范围，请转至 http://ssp.deepmap.de/geo/gwc/service/tms/1.0.0/unihd15:unihd15_0_basemap@EPSG:32632@png（目前不在您的 GeoServer 上，但那是 URL），然后从那里使用 <BoundingBox>。
【讨论】：
你能帮忙解决一下究竟是什么以上是关于Geowebcache + Openlayers3 with XYZ source：缩放地图出错的主要内容，如果未能解决你的问题，请参考以下文章
015Geoserver中使用GeoWebCache(GWC))