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

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

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

到目前为止我所做的是:

  1. 已下载 osm.pbf 个文件 (https://download.geofabrik.de/europe/netherlands/flevoland.html)
  2. 使用Maperitive打开osm.pbf并使用generate-mbtiles [minzoom=0 maxzoom=16]生成mbtiles
  3. 使用 mbutil (https://github.com/mapbox/mbutil) 和 mb-util --image_format=pbf input_folder output_folder 命令。 在此之后,我最终在适当的文件夹结构中得到了 pbfs - so far so great
  4. 使用 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 个缩放级别。

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

首先,矢量切片过度缩放,对于最详细的数据,您只需要 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