如何在缺少縮放級別的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示例中。 您的圖塊網格配置將有所不同。