OSM layer is blurry

Question

如果我将osm层添加到我的页面，它会很模糊。有人可以帮助我解决这个问题吗？我已经尝试过OL3的基本tuto http://openlayers.org/en/latest/examples/reprojection-wgs84.html

所以我的代码完全相同，我正在使用 Xampp，但仍然没有好的结果。有什么建议吗？

谢谢

Answer 1

它很模糊，而且会很模糊，因为您正在使用重新投影 - 您正在重新缩放磁贴(图片(。

没有重新缩放的相同示例很清晰：

var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
projection: 'EPSG:3857',
center: [0, 0],
zoom: 2
})
});

如果您确实需要 4326 中的瓷砖并希望它们清晰，您需要使用(创建您自己的(服务器，它将在此投影中提供瓷砖......或者切换到某种矢量格式(mbtiles(。

Answer 2

我发现了问题。这与我的互联网浏览器的缩放有关。因此，如果我将地图的像素比设置为 1，则可以解决问题。

var map = new ol.Map({  
pixelRatio: 1, ...});

Answer 3

添加此属性

L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>',
maxZoom: 18,
tileSize: 512,
zoomOffset: -1,
worldCopyJump: true,
retina: '@2x',
detectRetina: true
}).addTo(map);

Answer 4

尝试将缩放级别设置为限制为可用的图层分辨率，以便浏览器不需要重新缩放/插值磁贴图像：

var map = new ol.Map({
// ...
view: new ol.View({
// ...
constrainResolution: true
})
});