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

Question

我基本上与https://openlayers.org/en/latest/examples/mapbox-vector-tiles.html?q=mvt相同，只是我正在使用带有数据的NodeJS Web服务器提供自定义地图设置基于OSM。

我已经合并了数据，所以我得到了0-8缩放级别的整个世界以及0-14缩放级别更重要的世界部分。 这是我的基本图层定义：

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数据的矢量层使用了一些技巧。 OL3似乎正在朝着这种新方法提出一些问题：

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

2. 我遇到的另一个问题是以前，因为它是矢量数据，所以放大多少都没有关系，看起来还是可以的，我想是重新渲染了。 现在，如果我缩放到第8级缩放以上的位置（即使将maxzoom设置为8），它也会像PNG瓦片那样变得模糊。 似乎仍然应该有办法重绘相同的矢量数据。 毕竟，这是使用矢量数据而非PNG的一半。

最大缩放级别8的模糊图像

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

Answer 1

要解决您的第一个问题，针对不同缩放级别重复使用图块的关键是使用new ol.tilegrid.TileGrid()而不是ol.tilegrid.createXYZ()定义自定义图块网格。 这取决于你如何组织你的缩放级别，您可能还需要自定义tileUrlFunction上配置ol.source.VectorTile ，翻译tile网格缩放级别（这始终是0,1,2，...）的缩放级别您瓷砖设置用途。

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

两种技术都显示在https://openlayers.org/en/latest/examples/mapbox-vector-tiles-advanced.html示例中。 您的图块网格配置将有所不同。