Mapbox-GL Angular - добавление символов в слое mgl через файл .json - PullRequest
Новая
       9

Mapbox-GL Angular - добавление символов в слое mgl через файл .json

0 голосов
/ 14 февраля 2019

Создавая мое первое угловое приложение, я хочу использовать mapbox-gl для отображения моих собственных данных.Имея вложенный тег with, у меня возникают проблемы с обозначением слоя на основе файла .json, в котором хранятся различные рисунки для данных.

Как получить доступ к файлу .json и включить его в слой mgl? 

<mgl-map
  [style]="my_style"
  [zoom]="[8]"
>

<mgl-layer
 id="routes"
 type="line"
 sourceLayer="route"
 [source] = getting my own data from server
>
</mgl-layer>
</mgl-map>

Файл .json выглядит примерно так: 

{
"id":"route_main"
"type":"line"
"paint": ...
},
{
"id":"route_secondary"
"type":"line"
"paint": ...
},
{
"id":"route_minor"
"type":"line"
"paint": ...
}

1 Ответ

0 голосов
/ 15 февраля 2019

Следующий пример демонстрирует, как динамически инициализировать слои (пример адаптирован из официальных Mapbox GL JS Docs )

Предполагается, что данные для слоев хранятся в файле JSON и представлены вследующий формат: 

[
  {
    "id": "museums",
    "type": "circle",
    "source": {
      "type": "vector",
      "url": "mapbox://mapbox.2opop9hr"
    },
    "layout": {
      "visibility": "visible"
    },
    "paint": {
      "circle-radius": 8,
      "circle-color": "rgba(55,148,179,1)"
    },
    "sourceLayer": "museum-cusco"
  },
  //..
]



<mgl-map
  [style]="'mapbox://styles/mapbox/streets-v9'"
  [zoom]="zoom"
  [center]="center"
>

  <mgl-layer *ngFor="let layer of layersData;"
    [id]="layer.id"
    [type]="layer.type"
    [source]="layer.source"
    [sourceLayer]="layer.sourceLayer"
    [paint]="layer.paint"
    [layout]="layer.layout"
  ></mgl-layer>
</mgl-map>



export class AppComponent {
  center = [-71.97722138410576, -13.517379300798098];
  zoom = 15;
  layersData: null;

  constructor(private http: HttpClient) {
    this.loadLayers().subscribe(data => {
      this.layersData = data;
    });
  }

  public loadLayers(): Observable<any> {
    return this.http.get("./assets/LayersData.json");
  }
}

Вот демоверсия

...