Gis Openlayers3:使用Geoserver/Geowebcache作为后端时,pixelratio=3的平铺网格不正确
我正在使用Openlayers3和geoserver/geowebcache作为后端开发一个小型网络地图 我的目标是支持pixelratio=1、pixelratio=2和pixelratio=3的浏览器/显示器 为此,我在geoserver后端3个网格集中定义了大小为256x256、512x512和768x768的分幅。 我假设:Gis Openlayers3:使用Geoserver/Geowebcache作为后端时,pixelratio=3的平铺网格不正确,gis,openlayers-3,geoserver,wms,Gis,Openlayers 3,Geoserver,Wms,我正在使用Openlayers3和geoserver/geowebcache作为后端开发一个小型网络地图 我的目标是支持pixelratio=1、pixelratio=2和pixelratio=3的浏览器/显示器 为此,我在geoserver后端3个网格集中定义了大小为256x256、512x512和768x768的分幅。 我假设: pixelratio=1需要具有大小为256x256的平铺的网格集 pixelratio=2需要一个分片大小为512x512的网格集 pixelratio=3需要
- pixelratio=1需要具有大小为256x256的平铺的网格集
- pixelratio=2需要一个分片大小为512x512的网格集
- pixelratio=3需要一个分片大小为768x768的网格集
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个网格集
我正在使用Geoserver2.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>
WMS瓷砖
log(“DOMContentLoaded”);
试一试{
变量配置={
“界限”:{
“左”:536319.7238079988,
“底部”:5278944.822948656,
“右”:540150.3790103362,
“顶部”:5282223.663765706
}
};
var bounds=[config.bounds.left,config.bounds.bottom,config.bounds.right,config.bounds.top];
var分辨率=[2.519999996,
1.2599999999999998,
0.6299999999999999,
0.31499999999999995,
0.15749999999999997,
0.07874999999999999,
0.03937499999999999
];
var投影=新的ol.proj.projection({
代码:“EPSG:32632”
});
变量参数={
“版本”:“1.1.1”,
“图层”:“最惠国待遇mwb17:最惠国待遇mwb17\U 0\U底图”,
“平铺”:正确,
“透明”:false
};
var tileGrid=新的ol.tileGrid.tileGrid({
范围:界限,
决议:决议,
原点:[config.bounds.left,config.bounds.bottom],
瓷砖尺寸:[256,256]
});
变量视图=新的ol.view({
缩放:0,
中心:ol.extent.getCenter(边界),
投影:投影,
决议:决议
});
var map=新ol.map({
控件:ol.control.defaults(
{
旋转:假,
属性选项:{
可折叠:错误
}
}
),
视图:视图,
图层:[
新ol.layer.Tile({
来源:新ol.source.TileWMS({
url:“http://localhost:8082/wms",
params:params,
tileGrid:tileGrid,
服务器类型:“地理服务器”
}),
投影:投影,
扩展:边界
})
],
目标:“地图”
});
console.log(“无错误”);
}捕获(错误){
控制台日志(“错误”);
console.log(错误);
}
您的代码中有一些问题可能是罪魁祸首:
ol.source.TileWMS
实例上配置,而不是在ol.layer.Tile
上配置ol.layer.Tile
的范围,请使用范围
选项,而不是扩展
ol.source.TileWMS
并配置了serverType:“geoserver”
选项时,将始终使用精确的设备像素比率发出请求,该比率也可以是1.33、1.5、6或许多其他没有瓷砖的不同值
要解决此问题,您需要使用tilePixelRatio
来配置源代码,如果继续使用WMS,则不要使用serverType
选项。tilePixelRatio
可以这样计算:
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 layerName = 'mfn_mwb17:mfn_mwb17_0_basemap';
var gridset = 'grid_' + (tilePixelRatio * 256);
var layer = new ol.layer.Tile({
extent: bounds,
source: new ol.source.XYZ({
projection: 'EPSG:32632',
tileGrid: tileGrid,
tilePixelRatio: tilePixelRatio,
url: '/geoserver/gwc/service/tms/1.0.0/' + layerName +
'@' + gridset + '@png/{z}/{x}/{-y}.png'
})
});
我建议改用TMS或WMT。对于TMS,情况如下所示:
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 layerName = 'mfn_mwb17:mfn_mwb17_0_basemap';
var gridset = 'grid_' + (tilePixelRatio * 256);
var layer = new ol.layer.Tile({
extent: bounds,
source: new ol.source.XYZ({
projection: 'EPSG:32632',
tileGrid: tileGrid,
tilePixelRatio: tilePixelRatio,
url: '/geoserver/gwc/service/tms/1.0.0/' + layerName +
'@' + gridset + '@png/{z}/{x}/{-y}.png'
})
});
以上假设您的网格集命名为
grid\u 256
、grid\u 512
和grid\u 768
,并且都使用相同的平铺矩阵集。因此,它们的平铺宽度和高度仅以像素(256、512和768)为单位有所不同。谢谢,它很管用tilePixelRatio:tilePixelRatio
成功了。但是现在我用TMS协议测试同样的东西。我在这里问了一个新问题:。也许你能看看。