使用ngx-leaflet，HTTPClient和Angular2 +将GeoJSON数据获取到传单地图 [英] Getting GeoJSON Data to Leaflet Map using ngx-leaflet, HTTPClient and Angular2+

问题描述

我正在使用ngx-leaflet演示来尝试从get请求中获取GeoJson，以显示在LeafLet Map上.我使用 http://geojson.io/构建了有效的GeoJson，并使用 http://geojsonlint.com/ (感谢那些工具专家)

I'm using the ngx-leaflet demo to try and get a GeoJson from a get request to display on the LeafLet Map. I have built a valid GeoJson using http://geojson.io/, and double checked it using the http://geojsonlint.com/ (Thanks for those tools guys)

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

We have no errors in the compilation or displaying in the console log. Serves fine but our geojson object is nowhere to be found.

我只是想在地图上显示geojson数据. 任何帮助或建议，不胜感激.

I'm just looking to display the geojson data on the map. Any help or advice is appreciated.

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


}

推荐答案

在接收到数据后，您应该尝试在subscribe中初始化layers变量(和其他变量): 这是一个例子: 您应该安装以下内容:

You should try initialise the layers var (and others) in subscribe, after receiving the data: Here is an example: You should install the following:

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应该如下:

Your app.module.ts should like this:

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应该如下所示:

Your app.component.html should look like this:

<div leaflet style="height: 300px"
     [leafletLayers]="layers"
     [leafletLayersControl]="layersControl"
     [leafletCenter]="center"
     [leafletFitBounds]="fitBounds"></div>

您的app.component.ts应该如下所示:

Your app.component.ts should look like this:

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

            });
    }

}

有两个基础层和两个覆盖层.对于基础层，我使用了letlet-prividers(更清晰的代码).对于覆盖层，我使用了两个geojson文件.提供您自己的并更改路径.还提供一个中心和一个fitBounds.并且不要忘了像"styles": ["../node_modules/leaflet/dist/leaflet.css","styles.css"]

There are two base layers and two overlays. For base layes I used leaflet-prividers (much cleaner code). For overlay I used two geojson files. Provide your own and change the paths. Also provide a center and a fitBounds. And don't forget to add leaflet.css to .angular-cli.json like so "styles": ["../node_modules/leaflet/dist/leaflet.css","styles.css"]

这篇关于使用ngx-leaflet，HTTPClient和Angular2 +将GeoJSON数据获取到传单地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！