Question

我基本上与https://openlayers.org/en/latest/examples/mapbox-vector-tiles.html?q=mvt做同样的事情，除了我提供一个自定义地图，其中NodeJS网络服务器的数据集基于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数据的矢量源和矢量图层进行了一些破解。我有几个问题，OL3似乎正朝着新的方法发展：

如果我将其设置为缩放级别14作为最大值，那么当您平移时，它将仅请求缩放级别14而不是请求8，该请求8可能仅在该区域中可用。如果我尝试从Web服务器返回第8个缩放级别数据，那么显然x和y关闭并且您得到错误的数据。
我之前遇到的另一个问题是因为它是矢量数据并不是你放大了多少，它看起来还不错，我猜是重新渲染了。现在，如果我在没有超过该值的任何地方缩放超过缩放级别8（即使我将maxzoom设置为8），它也会像PNG图块那样变得模糊。看起来仍然应该有一种方法让它重绘相同的矢量数据。在使用矢量数据而不是PNG的一半之后。

Blurry Image with max zoom level 8

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

Answer 1

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

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

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

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

1 个答案: