0

我提供两种风格的 TMS 磁贴：256px 或 384px 通过渲染选项 scale=1.5。使用 Openlayers 3，我发现显示这些 384 像素图块的唯一方法是像这样转换画布上下文：

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

我认为这不是正确的方法，那么正确的方法是什么？

我玩了一些特殊的 ol.tilegrid 但没有成功，请参见此处： https ://jsfiddle.net/yvecai/owwc5bo8/8/

我的目标是在正确的地图上。

4

2 回答 2

0

无需创建特殊的平铺网格或应用任何画布缩放。您需要做的就是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-05T09:48:13.317 回答
0

总结一下：

  • 如果您想在移动设备上以良好的清晰度显示高 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-20T09:30:02.373 回答