如何在缺少缩放级别的 OL3 中最好地映射矢量图块？

Question

我基本上和https://openlayers.org/en/latest/examples/mapbox-vector-tiles.html?q=mvt 做同样的事情，除了我使用 NodeJS Web 服务器和基于 OSM 的数据集提供自定义地图。

我已经合并了数据，因此我拥有 0-8 缩放级别的整个世界和 0-14 缩放级别更重要的世界部分都作为 mbtiles。这是我的基本层定义：

new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
      overlaps: false,
      attributions: "© <a href='https://www.openstreetmap.org/copyright'>" +
        "OpenStreetMap contributors</a>",
      format: new ol.format.MVT(),
      tileGrid: ol.tilegrid.createXYZ({maxZoom: 14}),
      tilePixelRatio: 16,
      url: "/maptiles/osm/{z}/{x}/{y}.vector.pbf"
    }),
    style: createMapboxStreetsV6Style()
  });

之前我使用了一些带有矢量源和带有 GEOjson 数据的矢量层的 hack。我对 OL3 似乎正在走向的新方法有几个问题：

1. 如果我将其设置为最大缩放级别 14，那么当您平移它时只会请求缩放级别 14 而不会请求可能仅在该区域可用的 8。如果我尝试从 Web 服务器返回第 8 个缩放级别的数据，那么显然 x 和 y 是关闭的，你会得到错误的数据。

2. 我之前遇到的另一个问题是，因为它是矢量数据，所以无论你放大多少，它看起来仍然没问题，我猜是重新渲染的。现在，如果我在不超过 8 级的地方放大到 8 级（即使我将 maxzoom 设置为 8），它也会像 PNG 平铺一样变得模糊。似乎仍然应该有一种方法可以让它重绘相同的矢量数据。毕竟这是使用矢量数据而不是 PNG 的一半。

Blurry Image with max zoom level 8

任何帮助和想法将不胜感激。谢谢。

Answer 1

要解决您的第一个问题，为不同缩放级别重复使用磁贴的关键是使用new ol.tilegrid.TileGrid() 而不是ol.tilegrid.createXYZ() 定义自定义磁贴网格。根据您组织缩放级别的方式，您可能还需要在ol.source.VectorTile 上配置自定义tileUrlFunction，以将平铺网格缩放级别（始终为 0、1、2、...）转换为您的缩放级别瓦片集使用。

您的第二个问题可以通过将ol.layer.VectorTile 配置为renderMode: 'vector' 来解决。

https://openlayers.org/en/latest/examples/mapbox-vector-tiles-advanced.html 示例中显示了这两种技术。不过，您的平铺网格配置会有所不同。