Открытые слои с плитками сетчатки OSM: слишком маленький текст - PullRequest
Новая
       42

Открытые слои с плитками сетчатки OSM: слишком маленький текст

0 голосов
/ 11 апреля 2020

Я экспериментирую с плитками сетчатки OSM, и все в целом работает нормально. Однако кажется, что подписи слишком малы. Как я могу настроить карту для рендеринга тайлов большего размера?

1 Ответ

1 голос
/ 11 апреля 2020
Фрагменты сетчатки

512 пикселей можно использовать в качестве плиток сетчатки в сетке листов 256 пикселей для получения более четких результатов на устройстве сетчатки (или при чрезмерном увеличении на стандартном мониторе) или в качестве стандартных плиток 512 пикселей в сетке плиток 512 пикселей, что приведет к тому же результату, что и увеличение плитка 256px, но без размытия. Запустите фрагмент и go на полную страницу, чтобы увидеть разницу между стандартным и сетчатки при чрезмерном увеличении. Уменьшите масштаб, чтобы увидеть эффект увеличения при использовании тайлов сетчатки в 512px тайлах. 

      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>
...