Как загрузить пользовательский файл .pbf в ngx-openlayers - PullRequest
Новая
       15

Как загрузить пользовательский файл .pbf в ngx-openlayers

0 голосов
/ 01 мая 2018

Мне удалось загрузить карты, используя 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>

Моя проблема заключается в том, что я хочу загрузить пользовательское местоположение карты, которое я обслуживал, на свой локальный компьютер, используя сервер MapTile по http://localhost:8090/tileserver.php#trails/ol3 URL. Теперь URL-адрес XYZ с указанного сервера: (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>

1 Ответ

0 голосов
/ 03 мая 2018

Так что да, я собираюсь ответить на свой вопрос, потому что это может кому-то помочь в будущем.

Основы

Существует две широкие классификации карт от OSM (OpenStreetMap)

1. Растровый формат: это растровые изображения (PNG, JPEG, SVG ...) для карты. Этот формат можно сжать и поместить в формат .mbtiles. Вы можете использовать такие инструменты, как mbuilt , чтобы извлечь содержимое в структуру папок tms, wsm или XYZ. Это самый простой и быстрый вариант.

  1. Векторный формат: это векторный формат файла, внутри которого может быть несколько типов файлов, например .pbf. Он также может быть сжат в файл .mbtiles. нам нужен сервер листов для визуализации содержимого векторных файлов. Сервер листов GL - это сервер листов, который обслуживает как векторные, так и растровые карты (mbtiles)

После решения проблемы автономного хостинга я использовал стандартный пакет leaflet.js для angular, и все работало без проблем.

Я использовал OpenMaptiles файлы карт для размещения их с помощью tileserver-gl

...