Question

我以两种方式提供TMS磁贴：256px或384px通过renderd选项scale = 1.5。使用Openlayers 3，我发现将这些384px图块显示为原始大小的唯一方法是转换画布上下文，如下所示：

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

总结：

如果要在具有良好清晰度的移动设备上显示高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
});

384x384px瓷砖在地图上显示384x384px（视网膜）

2 个答案: