384x384px 타일에서 384x384 픽셀 (망막)

Question

나는 renderd 옵션 scale = 1.5를 통해 256px 또는 384px의 두 가지 맛의 TMS 타일을 제공합니다.

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

을 내가, 그래서 무엇이 올바른 것 갈 수있는 적절한 방법이 아니다 생각 : Openlayers 3, 내가 표시 할 수있는 유일한 방법으로 다음 384px 자신의 원래 크기는 다음과 같이 캔버스 컨텍스트를 변환하는 것입니다 타일 하나?

나는 특별한 ol.tilegrid와 약간을했다하지만 성공 여기를 참조 : 내가 목표로 https://jsfiddle.net/yvecai/owwc5bo8/8/

출력은 바로지도에 있습니다.

Answer 1

특별한 타일 격자를 만들거나 캔버스 크기 조정을 적용 할 필요가 없습니다. 당신이해야 할 모든 귀하의 경우 1.5 될 것이다, 제대로 소스의 tilePixelRatio을 설정 :

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

가 요약하면 :

• 당신이 좋은 선명도와 모바일 장치에서 높은 dpi의 타일을 표시 할 경우, 사용 tilePixelRatio : https://jsfiddle.net/owwc5bo8/9/

• 당신이 타일을 표시하려면 크기가 256x256보다 다른 경우 올바른 ol.tilegrid와 적절한 ol.view를 만드십시오.

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

  (210)

  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 
  });