Плитка 384x384px для воспроизведения на 384x384px на карте (сетчатка)

Question

Я работаю с TMS плиткой в ​​двух вариантах: 256px или 384px через optiond scale scale=1.5. В Openlayers 3 единственный способ отобразить эти плитки размером 384 пикселя - это преобразовать контекст холста следующим образом:

map.getViewport().getElementsByTagName('canvas')[0].getContext("2d").setTransform(1.5, 0, 0, 1.5, -w, -h);

Я думаю, что это не правильный путь, так что будет правильным?

Я немного поиграл со специальным ol.tilegrid, но безуспешно, смотрите здесь: https://jsfiddle.net/yvecai/owwc5bo8/8/

Результат, к которому я стремлюсь, находится на правой карте.

Answer 1

Нет необходимости создавать специальную сетку плиток или применять масштабирование холста. Все, что вам нужно сделать, это установить tilePixelRatio источника, который будет 1.5 в твоем случае:

  source: new ol.source.XYZ({
    url: "http://www5.opensnowmap.org/base_snow_map_high_dpi/{z}/{x}/{y}.png?debug",
    attributions: [/* ... */],
    tilePixelRatio: 1.5
  })

Также обратите внимание, что ваше ожидание результата неверно. Я обновил вашу скрипку, чтобы сравнить стандартные плитки размером 256px (справа) с hidpi 384px плитки (слева). Если вы просматриваете скрипку на дисплее hidpi, вы заметите разницу. https://jsfiddle.net/owwc5bo8/9/

Answer 2

Подвести итоги:

• Если вы хотите отображать тайлы с высоким разрешением на мобильном устройстве с хорошей резкостью, используйте tilePixelRatio: https://jsfiddle.net/owwc5bo8/9/

• Если вы хотите отобразить плитки с размером, отличным от 256x256, создайте правильный ol.tilegrid и правильный ol.view:

  https://jsfiddle.net/owwc5bo8/12/

  var extent = ol.proj.get('EPSG:3857').getExtent();
  var tileSizePixels = 384;
  var tileSizeMtrs = ol.extent.getWidth(extent) / 384;
  var resolutions = [];
  for (var i = -1; i <= 20; i++) {
  resolutions[i] = tileSizeMtrs / (Math.pow(2, i));
  }
  
  var tileGrid = new ol.tilegrid.TileGrid({
  extent: extent,
  resolutions: resolutions,
  tileSize: [384, 384]
  });
  
  var center = ol.proj.fromLonLat(
  ol.proj.toLonLat([2, 49], 'EPSG:4326'),
  'EPSG:3857');
  var zoom = 5;
  
  var view1 = new ol.View({
  center: center,
  zoom: zoom,
  maxResolution: 40075016.68557849 / 384
  });