我正在开发一个使用Openlayers3和geoserver / geowebcache作为后端的小型webmap .
我的目标是支持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 Openlayers生成这样的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)适用于所有3个网格集 .
我正在使用geoserver 2.10和谷歌浏览器 . 到目前为止这是我的代码 . 后端中的所有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>
1 回答
您的代码可能存在一些问题,可能是罪魁祸首:
projection
必须在ol.source.TileWMS
实例上配置,而不是在ol.layer.Tile
上配置 .要限制
ol.layer.Tile
的范围,请使用extent
选项,而不是extend
.修复上述两个可能会使您的应用程序工作,但有一些警告:
如果要确保始终使用缓存切片,则必须将应用程序限制为某些像素比率 . 在您的情况下为1,2和3.当使用带有选项
serverType: 'geoserver'
的ol.source.TileWMS
时,将始终使用确切的设备像素比率进行请求,该比率也可以是1.33,1.5,6或许多其他您没有的值瓷砖 .要解决此问题,您需要使用
tilePixelRatio
配置源,而不是使用serverType
选项 - 如果继续使用WMS .tilePixelRatio
可以像这样计算:我建议改用TMS或WMTS . 对于TMS,事情看起来像这样:
以上假设您的网格集名为
grid_256
,grid_512
和grid_768
,并且都使用相同的tile矩阵集 . 因此,它们仅在像素宽度和高度上有所不同(256,512和768) .