如何在ngx-leaflet angular应用程序中加载和显示外部多字符geoJSON文件

Question

我正在使用ngx-leaflet tutorial中的模板作为此示例。我是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面板。当我删除了layersControl代码的整个overlays部分时，控制面板会按预期显示。关于加载/显示中国区域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-leaflet中的geojson文件。