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在地图上（视网膜）

回答

相关问题