您应该尝试初始化layers
var(和其他)在subscribe
,收到数据后:
这是一个例子:
您应该安装以下内容:
ng new geojsondemo
cd geojsondemo/
npm install leaflet --save
npm install @types/leaflet --save-dev
npm install @asymmetrik/ngx-leaflet --save
npm install leaflet-providers --save
npm install @types/leaflet-providers --save-dev
你的 app.module.ts 应该像这样:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
LeafletModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
你的app.component.html应该是这样的:
<div leaflet style="height: 300px"
[leafletLayers]="layers"
[leafletLayersControl]="layersControl"
[leafletCenter]="center"
[leafletFitBounds]="fitBounds"></div>
你的 app.component.ts 应该是这样的:
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Layer, tileLayer, geoJSON, LayerOptions } from 'leaflet';
import 'leaflet-providers';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
layers: Layer[];
layersControl: any;
center = [59.9386300, 30.3141300];
fitBounds = [[60.2448369, 29.6998985], [59.6337832, 30.254172]];
constructor(private http: HttpClient) { }
ngOnInit() {
this.http.get<any>('/assets/geojson/admin_level_4.geojson')
.subscribe(geo1 => {
this.http.get<any>('/assets/geojson/admin_level_5.geojson')
.subscribe(geo2 => {
let defaultBaseLayer = tileLayer.provider('OpenStreetMap.Mapnik');
let defaultOverlay = geoJSON(geo1);
this.layers = [
defaultBaseLayer,
defaultOverlay
];
this.layersControl = {
baseLayers: {
'OpenStreetMap Mapnik': defaultBaseLayer,
'OpenStreetMap BlackAndWhite': tileLayer.provider('OpenStreetMap.BlackAndWhite')
},
overlays: {
'Overlay One': defaultOverlay,
'Overlay Two': geoJSON(geo2)
}
};
});
});
}
}
有两个基础层和两个覆盖层。对于基础层,我使用传单提供者(更清晰的代码)。对于叠加,我使用了两个 geojson 文件。提供您自己的路径并更改路径。还提供一个中心和一个 fitBounds。并且不要忘记添加leaflet.css
to .angular-cli.json
像这样"styles": ["../node_modules/leaflet/dist/leaflet.css","styles.css"]