Openlayers 6 离线本地矢量 pbf 文件 "Unimplemented type: 6" 错误

Question

我正在尝试将 OpenStreetMap 数据（osm.pbf 文件）转换为 "z/x/y.pbf" folder/file 结构并使用 Openlayers 6 和 Ionic 离线显示地图。

到目前为止我所做的是：

已下载 osm.pbf 个文件 (https://download.geofabrik.de/europe/netherlands/flevoland.html)
使用Maperitive打开osm.pbf并使用generate-mbtiles [minzoom=0 maxzoom=16]生成mbtiles
使用 mbutil (https://github.com/mapbox/mbutil) 和 mb-util --image_format=pbf input_folder output_folder 命令。在此之后，我最终在适当的文件夹结构中得到了 pbfs - so far so great。
使用 openlayers 显示 pbfs（请注意，我使用的是 Ionic，所以这里有一些 Angular 代码）

this.map = new Map({
layers: [
        new VectorTileLayer({
          declutter: true,
          source: new VectorTileSource({
            format: new MVT(),
            url: 'http://localhost:8100/assets/downloaded-osm-pbfs/{z}/{x}/{y}.pbf'
          }),
          style: createMapboxStreetsV6Style(Style, Fill, Stroke, Icon, Text)
        })
      ],
      target: 'map',
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });

在此之后，一旦我尝试在浏览器中查看地图，我就会得到 "Error: Unimplemented type: 6"。

有趣的是，如果我使用 https://openmaptiles.com/downloads 并从那里下载 mbtiles 并执行步骤 3-4（在步骤 3 中，我只是执行额外的步骤并解压缩 pbfs，因为 openmaptiles gzip 的文件）一切都会正确显示, 但这里的问题是 openmaptiles 提供了 14 个缩放级别，而我需要 16 个缩放级别。

知道如何解决这个问题吗？任何帮助将不胜感激！

Answer 1

首先，矢量切片过度缩放，对于最详细的数据，您只需要 10 或 12 级，大多数情况下可能多达 14 级，并且地图会继续显示该数据一直到 24 级而不会降低质量。其次，gz 是 mbtiles 中的格式，也就是规范。由 ogr2ogr 或 tippecanoe、python 或其他工具创建的所有矢量图块始终压缩为 pbf。
我们在 webview Android 和 wkwebview iOS 的许多移动应用程序中使用 openmaptiles 和 openlayers iOS 在 iOS 12 中将 webview 的可用内存减少了一半。基本上取消了 wkwebview 中的高级映射和数据可视化。

这是我们的开放层驱动的移动应用程序（和 WPF 桌面） https://mapdiscovery.techmaven.net

我们还使用了类似于标志性的 Apache Cordova http://geodataexplorer.world 其中使用传单

我们也用铯 http://earthexplorer.world

Openlayers 6 离线本地矢量 pbf 文件 "Unimplemented type: 6" 错误

Openlayers 6 offline local vector pbf files "Unimplemented type: 6" error

osm.pbf

vector-tiles

openlayers-6