使用 ngx-leaflet、HTTPClient 和 Angular2+ 将 GeoJSON 数据获取到传单地图

Question

我正在使用 ngx-leaflet 演示尝试从获取请求获取 GeoJson 以显示在 LeafLet 地图上。我已经使用 http://geojson.io/, and double checked it using the http://geojsonlint.com/ 构建了一个有效的 GeoJson （感谢那些工具家伙）

我们在编译或控制台日志中没有显示错误。服务很好，但找不到我们的 geojson 对象。

我只想在地图上显示 geojson 数据。任何帮助或建议表示赞赏。

Angular CLI: 1.6.5
Node: 8.3.0
OS: darwin x64
Angular: 5.2.1
... common, compiler, compiler-cli, core, forms, http
... language-service, platform-browser, platform-browser-dynamic
... router

@angular/animations: 5.2.2
@angular/cdk: 5.1.1
@angular/cli: 1.6.5
@angular/material: 5.1.1
@angular-devkit/build-optimizer: 0.0.41
@angular-devkit/core: 0.0.28
@angular-devkit/schematics: 0.0.51
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.16
typescript: 2.5.3
webpack: 3.10.0

<div leaflet style="height: 600px;"
     [leafletOptions]="options"
     [leafletLayers]="layers"
     [leafletLayersControl]="layersControl">
</div>

状态组件

import { Component, OnInit } from '@angular/core';
import { StateService } from "../state.service";
import {tileLayer, Layer, latLng} from "leaflet";
import {HttpClient} from "@angular/common/http";
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { LeafletLayersDemoModel } from './layers-demo.model';
import * as L from 'leaflet';


@Component({
  selector: 'app-state',
  templateUrl: './state.component.html',
  styleUrls: ['./state.component.css']
})
export class StateComponent implements OnInit {

  public geo_json_data;

  constructor(private state_service:StateService, public http:HttpClient) {
    this.apply();
  }

  LAYER_OSM = {
    id: 'openstreetmap',
    name: 'Open Street Map',
    enabled: false,
    layer: tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 18,
      attribution: 'Open Street Map'
    })
  };

  geoJSON = {
    id: 'geoJSON',
    name: 'Geo JSON Polygon',
    enabled: true,
    layer: L.geoJSON(this.geo_json_data)
  };


  model = new LeafletLayersDemoModel(
    [ this.LAYER_OSM],
    this.LAYER_OSM.id,
    [ this.geoJSON ]
  );

  layers: Layer[];
  layersControl = {
    baseLayers: {
      'Open Street Map': this.LAYER_OSM.layer
    },
    overlays: {
      GeoJSON: this.geoJSON.layer
    }
  };
  options = {
    zoom: 6,
    center: latLng(41.2033, -74.2179)
  };


  apply() {

    // Get the active base layer
    const baseLayer = this.model.baseLayers.find((l: any) => (l.id === this.model.baseLayer));

    // Get all the active overlay layers
    const newLayers = this.model.overlayLayers
      .filter((l: any) => l.enabled)
      .map((l: any) => l.layer);
    newLayers.unshift(baseLayer.layer);

    this.layers = newLayers;

    return false;
  }



  ngOnInit() {
    console.log(this.state_service.state_id);
    this.http.get('http://localhost:4200/assets/data/pa.geojson')
      .subscribe((data) => {
          this.geo_json_data = data;
          console.log(this.geo_json_data);
        },
        error => {
          console.log(error.text());
          alert('GEO JSON GET FAILED');
        });
  }


}

Answer 1

您应该在收到数据后尝试初始化 subscribe 中的 layers 变量（和其他变量）：这是一个例子：您应该安装以下内容：

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)
                            }
                        };
                    });

            });
    }

}

有两个基本层和两个叠加层。对于基础图层，我使用了 leaflet-prividers（更简洁的代码）。对于覆盖，我使用了两个 geojson 文件。提供您自己的并更改路径。还提供一个中心和一个 fitBounds。并且不要忘记像这样 "styles": ["../node_modules/leaflet/dist/leaflet.css","styles.css"]

添加 leaflet.css 到 .angular-cli.json

使用 ngx-leaflet、HTTPClient 和 Angular2+ 将 GeoJSON 数据获取到传单地图

Getting GeoJSON Data to Leaflet Map using ngx-leaflet, HTTPClient and Angular2+

httpclient

geojson

angular

ngx-leaflet