带有 OSM 视网膜图块的 Openlayers：文本太小

Question

我正在试验 OSM 视网膜图块，总之一切正常。但是，字幕似乎太小了。如何配置地图以将图块渲染得更大？

Answer 1

512px 视网膜图块可用作 256 像素图块网格中的视网膜图块，以在视网膜设备上提供更清晰的结果（或在标准显示器上过度缩放时）或作为标准 512 像素图块在 512 像素图块网格中产生相同的结果就像放大 256 像素的图块但没有模糊一样。运行片段并转到整页以查看过度缩放时标准和视网膜之间的区别。缩小可以看到在512px tilegrid中使用retina tile的放大效果。

      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>

带有 OSM 视网膜图块的 Openlayers：文本太小

Openlayers with OSM retina tiles: text too small

tiles

openlayers