带有OSM视网膜瓦片的Openlayers:文本太小

Question

我正在试验OSM视网膜瓷砖，总的来说一切都很好。然而，字幕似乎太小了。如何配置贴图以将平铺渲染得更大？

Answer 1

512px的视网膜瓦片可以用作256px瓦片中的视网膜瓦片，以在视网膜设备上(或在标准监视器上过度放大时(提供更清晰的结果，也可以用作512px瓦片中标准的512px瓦片，这将产生与放大256px瓦片相同的结果，但不会产生模糊。运行该片段并转到整页，查看放大时标准和视网膜之间的差异。缩小以查看在512px tilegrid中使用视网膜瓦片的放大效果。

var layer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var layer2 = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://tile.osmand.net/hd/{z}/{x}/{y}.png',
crossOrigin: null,
tilePixelRatio: 2,
maxZoom: 19,
attributions: ol.source.OSM.ATTRIBUTION,
attributionsCollapsible: false
})
});
var layer3 = new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://tile.osmand.net/hd/{z}/{x}/{y}.png',
crossOrigin: null,
maxZoom: 19,
tileSize: 512,
attributions: ol.source.OSM.ATTRIBUTION,
attributionsCollapsible: false
})
});
var view = new ol.View({
center: [-6655.5402445057125, 6709968.258934638],
zoom: 20,
multiWorld: true
});
var map1 = new ol.Map({
target: 'Standard',
layers: [layer],
view: view
});
var map2 = new ol.Map({
target: 'Retina',
layers: [layer2],
view: view
});
var map3 = new ol.Map({
target: 'x 2',
layers: [layer3],
view: view
});

.map {
width: 100%;
height:400px;
}
@media (min-width: 800px) {
.wrapper {
display: flex;
}
.half {
padding: 0 10px;
width: 33%;
float: left;
}
}

<link rel="stylesheet" href="https://openlayers.org/en/v6.3.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/v6.3.1/build/ol.js"></script>
<div class="wrapper">
<div class="half">
<h4>Standard</h4>
<div id="Standard" class="map"></div>
</div>
<div class="half">
<h4>Retina</h4>
<div id="Retina" class="map"></div>
</div>
<div class="half">
<h4>x 2</h4>
<div id="x 2" class="map"></div>
</div>
</div>