384x384px瓷磚diplay在384x384px在地圖上（視網膜）

我服務TMS瓷磚有兩種風格：256px或384px通過renderd選項scale = 1.5。用的OpenLayers 3，我發現顯示的唯一途徑，這些384px瓷磚原來的大小是轉變畫布背景是這樣的：384x384px瓷磚diplay在384x384px在地圖上（視網膜）

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

我認爲這是不走正確的路，所以這將是正確的一？

我打得有點用特殊ol.tilegrid但沒有成功，在這裏看到： https://jsfiddle.net/yvecai/owwc5bo8/8/

我瞄準的輸出是正確的地圖上。

來源

2017-02-04 yvecai

沒有必要創建特殊的平鋪網格或應用任何畫布縮放。所有你需要做的是設置源的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/

來源

2017-02-05 09:48:13 ahocevar

不要說我對結果的預期是錯誤的，我可能只是表示不好自己:) 我想用戶有可能選擇無論是X1或X1.5放大的地圖，不管他/她的設備像素是多少。也許這是一個有問題或不常見的設計選擇，但它是我的。我沒有在這裏清晰。我試着更新jsfiddle與pixelratio = 2或鉻開發工具與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/

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瓷磚diplay在384x384px在地圖上（視網膜）

回答

相關問題