Как загрузить и отобразить внешний многополигонный файл geoJSON в угловом приложении ngx-leaflet

Question

Я использую шаблон из учебника ngx-leaflet для этого примера.Я абсолютный новичок в Angular и едва знаю leaflet.js, для справки.

У меня есть большой многогранный файл geoJSON, который я хочу отобразить на карте и в конечном итоге добавить интерактивность.Я сохранил файл в каталоге assets как china_adm1.geojson.

app.component.html выглядит так:

<div class="map"
     leaflet
     [leafletOptions]="options"
     [leafletLayers]="china"
     [leafletLayersControl]="layersControl"
>
</div>

, а app.component.ts выглядит так:

import { Component } from '@angular/core';
import { geoJSON, latLng, tileLayer } from 'leaflet';
import { adm1 } from '../assets/china_adm1';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  china = geoJSON(adm1);

  // Define our base layers so we can reference them multiple times
  googleMaps = tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });

  googleHybrid = tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });

  options = {
    layers: [ this.googleMaps ],
    zoom: 3, 
    center: latLng(0, 0)
  };

  layersControl = {
    baseLayers: {
      "Google": this.googleMaps,
      "Hybrid": this.googleHybrid
    },
    overlays: {
      "China Polygon": this.china
    }
  };
}

Когда я запускаю приложение с приведенным выше кодом, базовая карта Google отображается хорошо, но панель LayersControl отсутствует.Когда я удаляю всю overlays часть кода LayersControl, панель управления отображается, как и ожидалось.Что-то мне не хватает в загрузке / отображении китайских регионов geoJSON.Обратите внимание, что в import { adm1 } from '../assets/china_adm1 я произвольно определил adm1, так что, возможно, в этом проблема.Я также пытался включить this.china в параметры слоев bside this.googleMaps.

В leaflet.js это просто, как L.geoJson(adm1).addTo(map);, где я определил adm1 с

var adm1 = {"type": "FeatureCollection",
"name": "china_adm1", ...}

в файле геойсона.Я не уверен, как правильно определить и ссылаться на файл geojson в ngx-листовке.