如何在 ngx-openlayers 中加载自定义 .pbf 文件答案

【问题标题】：How to load a custom .pbf file in ngx-openlayers如何在 ngx-openlayers 中加载自定义 .pbf 文件
【发布时间】：2018-05-01 12:26:26
【问题描述】：

我能够使用 ngx-openlayers 和以下代码加载地图

   <aol-map [width]="'100%'" [height]="'100%'">
      <aol-view [zoom]="zoom">
        <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
      </aol-view>
      <aol-layer-tile [opacity]="opacity">
        <aol-source-osm></aol-source-osm>
      </aol-layer-tile>
      <aol-layer-vector [opacity]="opacity">
        <aol-source-vector>
          <aol-feature>
            <aol-geometry-point>
              <aol-coordinate [x]="5" [y]="45" [srid]="'EPSG:4326'"></aol-coordinate>
            </aol-geometry-point>
            <aol-style>
              <aol-style-circle [radius]="10">
                <aol-style-stroke [color]="'black'" [width]="width"></aol-style-stroke>
                <aol-style-fill [color]="'green'"></aol-style-fill>
              </aol-style-circle>
            </aol-style>
          </aol-feature>
          <aol-feature>
            <aol-geometry-point>
              <aol-coordinate [x]="5.1" [y]="45.1" [srid]="'EPSG:4326'"></aol-coordinate>
            </aol-geometry-point>
            <aol-style>
              <aol-style-icon [src]="'assets/marker.png'" [anchor]="[0.5, 1]" [anchorXUnits]="'fraction'" [anchorYUnits]="'fraction'" [scale]="0.1"
                [anchorOrigin]="'top-left'">
              </aol-style-icon>
            </aol-style>
          </aol-feature>
        </aol-source-vector>
      </aol-layer-vector>
    </aol-map>

我的问题是我想使用 http://localhost:8090/tileserver.php#trails/ol3 URL 上的 MapTile 服务器加载我在本地计算机上提供的自定义地图位置。现在来自上述服务器的 XYZ URL 是 (http://localhost:8090/tileserver.php?/index.json?/trails/{z}/{x}/{y}.pbf)

如何使用 ngx-openlayers 包加载此地图

我试过用这个但是没用

<aol-map [width]="'500px'" [height]="'300px'">
        <aol-interaction-default></aol-interaction-default>
        <aol-control-defaults></aol-control-defaults>
        <aol-control-fullscreen></aol-control-fullscreen>
        <aol-layer-tile>
        <aol-source-osm></aol-source-osm>
        <aol-source-xyz [url]="'http://localhost:8090/tileserver.php?/index.json?/trails/{z}/{x}/{y}.pbf'">
        </aol-source-xyz>
        </aol-layer-tile>

        <aol-view [zoom]="12">
        <aol-coordinate [x]="6.47" [y]="53.44" [srid]="'EPSG:4326'"></aol-coordinate>
        </aol-view>
        </aol-map>

【问题讨论】：

PBF 是原始 OSM 矢量数据的文件格式。 tile 服务器需要光栅图像（可以通过rendering PBF 数据生成）。
谢谢，我现在明白了，但是如何渲染 PBF 数据呢？是在运行时吗？或者有一个工具可以用来生成 .png 而不会丢失文件夹结构？还是使用mbtiles？
Rendering 需要一个 tile server 来动态完成，或者像 Maperitive 或 TileMill 这样的软件提前完成。 mbtiles 也可以。它们包含预渲染的图块。

标签： javascript angular openstreetmap openlayers-3

【解决方案1】：

所以是的，我即将回答我自己的问题，因为它可能会在未来帮助某人。

基础知识

来自 OSM (OpenStreetMap) 的地图有两大类

1.光栅格式：这是地图的光栅图像（PNG、JPEG、SVG ...）图块。这种格式可以压缩成.mbtiles 格式。您可以使用mbuilt 之类的工具将内容提取到 tms、wsm 或 XYZ 文件夹结构中。这是一种简单快捷的选择。

矢量格式：这是一种矢量文件格式，其中可以包含多种文件类型，例如 .pbf。它也可以压缩成 .mbtiles 文件。我们需要一个平铺服务器来渲染矢量文件的内容。 Tile server GL 是一个切片服务器，用于提供矢量/光栅地图文件 (mbtiles)

解决离线托管问题后，我使用了默认的leaflet.js 包，一切正常，没有问题。

我使用OpenMaptiles 地图文件来使用 tileserver-gl 托管它们

【讨论】：