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

Question

我能够使用以下代码使用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 packkage加载此地图

我试图使用它，但是它不起作用

<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>

Answer 1

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

基础

OSM（OpenStreetMap）的地图有两种大致的分类

1.栅格格式：这是地图的栅格图像（PNG，JPEG，SVG ...）图块。 可以压缩此格式并将其转换为.mbtiles格式。 您可以使用mbuilt等工具将内容提取到tms，wsm或XYZ文件夹结构中。 这是一个简单快捷的选项。

2. 向量格式：这是一种向量文件格式，它可以具有多种文件类型，例如.pbf。 也可以将其压缩为.mbtiles文件。 我们需要一个图块服务器来呈现矢量文件的内容。 切片服务器GL是用于同时提供矢量/栅格地图文件（mbtiles）的切片服务器

解决了离线托管问题之后，我使用了默认的leaflet.js程序包来处理角度问题，并且一切正常。

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