Angular2中的GeoJson地图

npm install @agm/core --save

npm install leaflet ngx-leaflet --save

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LeafletModule } from 'ngx-leaflet';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LeafletModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <agm-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
      <agm-polygon [paths]="geoJsonData"></agm-polygon>
    </agm-map>
  `
})
export class AppComponent {
  lat = 51.678418;
  lng = 7.809007;
  zoom = 12;
  geoJsonData = [
    // Your GeoJSON data here
  ];
}

import { Component } from '@angular/core';
import * as L from 'leaflet';

@Component({
  selector: 'app-root',
  template: `
    <div leaflet [leafletOptions]="options" (leafletMapReady)="onMapReady($event)"></div>
  `
})
export class AppComponent {
  options = {
    layers: [
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      })
    ],
    zoom: 12,
    center: L.latLng(51.678418, 7.809007)
  };

  onMapReady(map: L.Map) {
    L.geoJSON(yourGeoJsonData).addTo(map);
  }
}

npm install leaflet --save

@import "~leaflet/dist/leaflet.css";