Leaflet e Angular = Maps Apps (finale) - The Shape Service
Da adesso , abbiamo creato una mappa Leaflet in Angular e siamo in grado di renderizzare marker e pop-up. Rendiamo ora le forme per i diversi stati degli Stati Uniti.
Per questo esercizio, ho scaricato un file GeoJSON che contiene i contorni delle forme di ogni stato. Eric Celeste ha un sito fantastico pieno zeppo di dati cartografici. Ho preso un profilo di 5m-GeoJSON dal suo sito per questa demo . Metti questo nel tuo |_+_| cartella.
Nota: se il tuo server ng locale è già in esecuzione, dovrai spegnerlo e riavviarlo per ricaricare le nuove risorse.
Impostare
La nostra struttura di directory dovrebbe assomigliare a questa:
/assets/dataCreiamo un altro servizio che sarà responsabile del caricamento delle nostre forme.
leaflet-example |_ node_modules/ |_ package.json \_ src/ \_ app/ |_ app.module.ts |_ app.routing.ts |_ app.component.ts |_ app.component.html |_ app.component.scss | |_ map/ | |_ map.component.ts | |_ map.component.html | \_ map.component.scss | \_ _services/ |_ marker.service.ts |_ pop-up.service.ts Aggiungi questo nuovo servizio come provider nel tuo |_+_|.
amazzone. com/rete
app.module.ts
$ ng generate service shape Caricamento delle forme
In |_+_|, per ora aggiungeremo solo una singola funzione che caricherà il file geojson dalle nostre risorse.
shape.service.ts
app.module.tsLa nostra funzione |_+_| restituirà un osservabile del nostro oggetto geojson serializzato. Per usarlo, dobbiamo sottoscrivere l'osservabile nel nostro |_+_|. Ecco come:
- Inietta ShapeService nel costruttore.
- Crea una variabile locale per ospitare i dati.
- Chiama la funzione del servizio di forma per estrarre i dati e sottoscrivere il risultato.
map.component.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { MapComponent } from './map/map.component'; import { MarkerService } from './_services/marker.service'; import { HttpClientModule } from '@angular/common/http'; import { PopUpService } from './_services/pop-up.service'; import { ShapeService } from './_services/shape.service'; @NgModule({ declarations: [ AppComponent, MapComponent ], imports: [ BrowserModule, HttpClientModule, ], providers: [ MarkerService, PopUpService, ShapeService ], bootstrap: [AppComponent] }) export class AppModule {} Nota: un approccio ancora migliore sarebbe quello di precaricare i dati in un resolver.
Una volta caricati i dati, dovremo aggiungere le forme alla mappa come livello. Il volantino fornisce una fabbrica solo per i layer geojson che possiamo sfruttare. Attacchiamo questa logica nella sua funzione e poi la chiamiamo dopo che i dati sono stati risolti.
map.component.ts
ShapeServiceHo creato una nuova funzione, |_+_|, che crea un nuovo layer geojson e lo aggiunge alla mappa. Ho anche inserito uno stile di base. Aggiorna il tuo browser.
Ta-da! Ora possiamo vedere gli stati, ma possiamo anche aggiungere un po' di codice per interagire con essi.
Per questo esempio, evidenzierò la funzione in giallo quando ci passo sopra il cursore e la ripristinerò quando esco.
Per fare ciò, prima definisci cosa fare su ogni caratteristica usando la proprietà onEachFeature con il nome appropriato:
map.component.ts
import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class ShapeService { constructor(private http: HttpClient) { } getStateShapes(): Observable { return this.http.get('/assets/data/usa-states.geojson'); } } Ricarica il browser e passa il cursore sulla mappa:
idee per progetti di analisi dei dati
Aspetta... dove sono finiti i nostri pennarelli? Sono ancora lì, stiamo solo visualizzando gli stati sopra di loro perché gli oggetti nella mappa vengono visualizzati nell'ordine in cui vengono chiamati. Perché creiamo prima i pennarelli e poi le forme, le forme vincono.
Possiamo risolvere questo problema in due modi:
- Sposta la chiamata del marker dopo la creazione della forma.
- Chiamando |_+_| sul livello forma dopo averlo aggiunto alla mappa.
In entrambi i casi, ora possiamo vedere i marcatori:
Sembra buono!
#volantino angolare