指定 tilegrid 时 Openlayers 4 地图模糊
Openlayers 4 map is blurry when specifying tilegrid
我正在从 OL2 升级到 OL4。
OL2 版本 运行ning 在 vegkart.no。
我遇到了 运行 一个问题,即在指定 tileGrid 时地图变得模糊。没有 tileGrid 地图看起来很清晰,但绘制的要素有偏移。
Here是有比较的最小版本。
ol.proj.setProj4(proj4);
proj4.defs('EPSG:25833', '+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs');
const EPSG25833 = new ol.proj.Projection({
code: 'EPSG:25833',
extent: [-25e5, 35e5, 3045984, 9045984]
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: EPSG25833,
url: 'https://m{1-9}-nvdbcache.geodataonline.no/arcgis/rest/services/Trafikkportalen/GeocacheTrafikkJPG/MapServer/tile/{z}/{y}/{x}',
maxZoom: 16,
minZoom: 3,
tileGrid: new ol.tilegrid.TileGrid({
extent: [-3438648.9692659, -2500000, 9984632.9692659, 9045984],
resolutions: [21674.7100160867, 10837.35500804335, 5418.677504021675, 2709.3387520108377, 1354.6693760054188, 677.3346880027094, 338.6673440013547, 169.33367200067735, 84.66683600033868, 42.33341800016934, 21.16670900008467, 10.583354500042335, 5.291677250021167, 2.6458386250105836, 1.3229193125052918, 0.6614596562526459, 0.33072982812632296],
origin: [-2500000, 9045984]
})
})
})
],
view: new ol.View({
projection: EPSG25833,
center: [600000,7225000],
zoom: 3
})
});
Here 是瓷砖的概览。
我找到了一个计算分辨率的例子。
const projectionExtent = EPSG25833.getExtent();
const size = ol.extent.getWidth(projectionExtent) / 256;
const resolutions = new Array(17);
const matrixIds = new Array(17);
for (let z = 0; z < 17; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
使用它时地图清晰,但移动了。
https://jsfiddle.net/computerlove/t3afh9v9/
我是不是遗漏了什么,或者这是一个错误?
与 v2 不同,视图分辨率不是从 v4 中的基础层获取的。如果您希望视图使用与您的图块层相同的分辨率,则必须使用
配置视图
new ol.View({
resolutions: tileSource.getTileGrid().getResolutions()
})
我正在从 OL2 升级到 OL4。 OL2 版本 运行ning 在 vegkart.no。
我遇到了 运行 一个问题,即在指定 tileGrid 时地图变得模糊。没有 tileGrid 地图看起来很清晰,但绘制的要素有偏移。
Here是有比较的最小版本。
ol.proj.setProj4(proj4);
proj4.defs('EPSG:25833', '+proj=utm +zone=33 +ellps=GRS80 +units=m +no_defs');
const EPSG25833 = new ol.proj.Projection({
code: 'EPSG:25833',
extent: [-25e5, 35e5, 3045984, 9045984]
});
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.XYZ({
projection: EPSG25833,
url: 'https://m{1-9}-nvdbcache.geodataonline.no/arcgis/rest/services/Trafikkportalen/GeocacheTrafikkJPG/MapServer/tile/{z}/{y}/{x}',
maxZoom: 16,
minZoom: 3,
tileGrid: new ol.tilegrid.TileGrid({
extent: [-3438648.9692659, -2500000, 9984632.9692659, 9045984],
resolutions: [21674.7100160867, 10837.35500804335, 5418.677504021675, 2709.3387520108377, 1354.6693760054188, 677.3346880027094, 338.6673440013547, 169.33367200067735, 84.66683600033868, 42.33341800016934, 21.16670900008467, 10.583354500042335, 5.291677250021167, 2.6458386250105836, 1.3229193125052918, 0.6614596562526459, 0.33072982812632296],
origin: [-2500000, 9045984]
})
})
})
],
view: new ol.View({
projection: EPSG25833,
center: [600000,7225000],
zoom: 3
})
});
Here 是瓷砖的概览。
我找到了一个计算分辨率的例子。
const projectionExtent = EPSG25833.getExtent();
const size = ol.extent.getWidth(projectionExtent) / 256;
const resolutions = new Array(17);
const matrixIds = new Array(17);
for (let z = 0; z < 17; ++z) {
// generate resolutions and matrixIds arrays for this WMTS
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = z;
}
使用它时地图清晰,但移动了。 https://jsfiddle.net/computerlove/t3afh9v9/
我是不是遗漏了什么,或者这是一个错误?
与 v2 不同,视图分辨率不是从 v4 中的基础层获取的。如果您希望视图使用与您的图块层相同的分辨率,则必须使用
配置视图new ol.View({
resolutions: tileSource.getTileGrid().getResolutions()
})