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

나는 renderd 옵션 scale = 1.5를 통해 256px 또는 384px의 두 가지 맛의 TMS 타일을 제공합니다.384x384px 타일에서 384x384 픽셀 (망막)

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/

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

출처

2017-02-04 yvecai

특별한 타일 격자를 만들거나 캔버스 크기 조정을 적용 할 필요가 없습니다. 당신이해야 할 모든 귀하의 경우 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/

가

출처

2017-02-05 09:48:13 ahocevar

결과 내 기대가 잘못 말하지 말라, 난 그냥 심하게 1 개 또는 1.5 배 중 하나를 선택하기 위해 자신 :) 내가있는 가능성을 가지고 사용자가 원하는 을 표명 할 수있다 그/그녀의 장치의 픽셀 비율이 무엇이든, 확대 된지도. 어쩌면 의심 스럽거나 흔치 않은 디자인 선택일지도 모르지만 그것은 내 것입니다. 나는 여기 선명도가 아니야. 업데이트 된 jsfiddle을 pixelratio = 2 또는 chromat dev 도구로 pixelratio 1.5와 함께 사용했습니다. 실제 가시 눈금의 차이는 없지만 화면의 길이는 동일합니다. – yvecai

픽셀 비율이 1 인 384 * 384 픽셀 타일 1 : 1을 표시 할 방법이 있습니까? – yvecai

가능하지만 맞춤 타일 그리드 및보기 구성이 필요합니다. – ahocevar

가 요약하면 :

당신이 좋은 선명도와 모바일 장치에서 높은 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 
});

출처

2017-02-20 09:30:02 yvecai

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

답변

관련 문제