Tämä artikkeli on suunnattu aloitteleville Angular-kehittäjille, jotka haluavat integroida Leafletin sovelluksiinsa. Kolmannen osapuolen riippuvuuksien integrointi Angulariin voi olla mitä tahansa triviaalista ongelmalliseen. Vaikka Leaflet pyrkii enemmän triviaalin puolelle, kartat, jotka mukautuvat sujuvasti selaimen koon mukaan, voivat aiheuttaa joitain asennusongelmia suhteessa Angularin elinkaareen.
Ennen kuin aloitat purkamisen, suuntaa ystävällinen, naapuruston selaimesi seuraavaan Githubiin.
Nyt voit seurata mukana tai haarukoida projektin ja käyttää sitä omien sovellustesi pohjana.
Tausta
Tämä opetusohjelma edellyttää pientä määrää aiempaa Leaflet-tietämystä, mutta ei enempää kuin Leaflet Quickstart Guide -oppaassa ilmaistaan.
ArcGisiä käytetään laatoitukseen tässä artikkelissa käsitellyssä sovelluksessa (esri-leaflet-paketti asennetaan npm:stä).
Angularin käyttöönotto
Hyvin vähän tarvitsee tehdä ubiikkisen npm- asennuksen jälkeen. Tarvittavat Leaflet-tyylit saadaan käyttöön angular.json-tiedoston kautta,
"styles": ,
Minulla on ollut vaihtelevia tuloksia @types/leaflet:n kanssa, joten tässä sovelluksessa ei hyödynnetä typityksiä yksinkertaisuuden vuoksi. Leaflet- ja ESRI-laatat tuodaan alla esitetyllä tavalla,
import * as esri from 'esri-leaflet';
import * as L from 'leaflet';
Esimerkiksi Leaflet-kartta on tilapäisesti tyypitelty kuten mikä tahansa; voit vapaasti kiinteyttää tyypittelyjä harjoituksena sen jälkeen, kun olet purkanut tutoriaalin.
Kartan keskipisteen koordinaatit ovat tärkeitä kartan alustuksen kannalta. Monet demot kovakoodaavat tämän tiedon. Vaihtoehtoisesti tämä tutoriaali havainnollistaa, miten kartan keskipisteen koordinaatit injektoidaan Angularin Injection Tokensin avulla.
Koordinaatti on kaksiulotteinen piste kartalla, jota edustavat leveys- ja pituusasteet. Koordinaatin InjectionToken voidaan luoda /src/app/tokens.ts-tiedostossa esitetyllä tavalla,
import { InjectionToken } from '@angular/core';
export const INIT_COORDS = new InjectionToken<{lat: number, long: number}>('INIT_COORDS');
INIT_COORDS käytetään /src/app/app.module.ts-tiedostoa varsinaiseen (lat/long) määrittelyyn (tai määrittelyyn),
providers: ,
Tämä siirtää kartan keskipisteen määrittelyn Angular-sovelluksen ylimmälle tasolle (jossa se on helposti nähtävissä ja melkein itsestään dokumentoitavissa).
Voidaksesi injektoida tämän koordinaatin sovellukseen, importoi INIT_COORDS tokens-tiedostosta ja injektoi luokan konstruktorista. Tätä havainnollistetaan tiedostossa /src/app/map.component.ts (ensisijainen karttakomponentti tässä opetusohjelmassa),
constructor( @Inject(INIT_COORDS) protected _initCoords: {lat: number, long: number} )
Karttakomponentti
Tässä artikkelissa käsiteltävässä sovelluksessa näytetään kiinteän korkuinen kartta, jonka leveys ulottuu koko selainikkunan yli. Kartta piirtyy uudelleen, kun ikkunan kokoa muutetaan. Joitakin merkkejä renderöidään myös karttalaattojen päälle.
Kartta on integroitu sovellukseen sovelluksen pääkomponentin mallin kautta, kuten alla näkyy
/src/app/app.component.html
<app-map ="markers"></app-map>
ja karttakomponentin lähdekoodi löytyy osoitteesta /src/app/maps/map.component.ts .
Kartta renderöidään säiliöön (DIV), joka on tällä hetkellä karttakomponentin mallissa,
/src/app/maps/map.component.html
<div>
<div>
<div #primaryMap ="currentHeight" ="currentWidth"></div>
<map-control class="map-control"></map-control>
<div class="mouse-coords">
<span></span>
<span ="mcText"></span>
</div>
</div>
</div>
Jos sisältävän DIV:n leveys ja korkeus ovat kiinteät, karttalaatat voidaan renderöidä komponentin elinkaaren varhaisessa vaiheessa. Muuttuvan leveyden ja korkeuden välittämiseen on kaksi lähestymistapaa, outside-in ja inside-out. Outside-in-menetelmä määrittelee Angular-syötteet leveydelle ja korkeudelle. Vanhempi komponentti on vastuussa leveyden ja korkeuden välittämisestä karttakomponentille. Inside-out-menetelmä määrittelee leveyden ja korkeuden karttakomponentin sisäisesti ja ”välittää” nämä tiedot sen mallille. Useimmissa sovelluksissa käytetään outside-in-lähestymistapaa. Tässä ohjeessa käytetään inside-out-menetelmää havainnollistamistarkoituksessa. Muokkaa koodia muuttamalla leveyden ja korkeuden välittämistä harjoitustehtävänä.
Muuttuvat leveys ja korkeus tuovat mukanaan joitakin hienovaraisia kysymyksiä suhteessa kartan renderöintiin. On houkuttelevaa suorittaa kaikki Leaflet-asetuksiin liittyvä on-init-käsittelijässä, ja tämä toimii yleensä kiinteän leveyden ja korkeuden kanssa. Koska tässä opetusohjelmassa kartan leveys vaihtelee selaimen koon mukaan, on parempi erottaa kartan alustamisprosessi on-init- ja after-view-init-elinkaarikäsittelijöiden välillä. Tätä havainnollistetaan seuraavissa koodinpätkissä tiedostosta /src/app/maps/map.component.ts .
Ensiksi kartan alustuksen sisältävän DIV:n tunnistaminen siirretään ViewChildiin,
@ViewChild('primaryMap', {static: true}) protected mapDivRef: ElementRef;
protected mapDiv: HTMLDivElement;
Suurin osa kartan asetuksista suoritetaan ngOnInitissä,
public ngOnInit(): void
{
// Reference to DIV containing map is used in Leaflet initialization
this.mapDiv = this.mapDivRef.nativeElement;
this.__initializeMap();
this.__renderMap();
this.__showMarkers();
}
Kartan koon invalidoiminen siirretään ajalle ngAfterViewInit,
public ngOnInit(): void
{
// Reference to DIV containing map is used in Leaflet initialization
this.mapDiv = this.mapDivRef.nativeElement;
this.__initializeMap();
this.__renderMap();
this.__showMarkers();
}
Kartan koon invalidoiminen siirretään ajalle ngAfterViewInit,
public ngOnInit(): void
{
// Reference to DIV containing map is used in Leaflet initialization
this.mapDiv = this.mapDivRef.nativeElement;
this.__initializeMap();
this.__renderMap();
this.__showMarkers();
}
jolloin karttalaattoja varten tarvittava leveys- ja korkeusalueet kokonaisuudessaan ovat käytettävissä. Map-muuttuja viittaa ngOnInit-käsittelijässä luotuun Leaflet-karttaan.
public ngAfterViewInit(): void
{
this.map.invalidateSize();
this.__initMapHandlers();
}
Huomaa, että kartan koon päivityskäsittelijä laskee uudelleen luokan currentWidth- ja currentHeight-muuttujat, jotka on sidottu DIV-tyyleihin, jotka ohjaavat kartta-DIV:n leveyttä ja korkeutta. Leaflet käyttää tätä leveys/korkeustietoa kartan uudelleen laatoittamiseen ja esittämiseen uudelleen.
Koska kartan leveyden/korkeuden määrittely ja kartan koon muuttaminen ikkunan muuttuessa hoidetaan karttakomponentin sisäisesti, lisätään yksinkertainen ikkunan koon muuttamisen käsittelijä.
@HostListener('window:resize', )
protected __onResize(event: any): void
{
this.__updateMapSize();
this.map.invalidateSize();
}
Tämän voisi hoitaa myös ulkopuolinen palvelu, jota ajetaan Angularin ulkopuolella ja joka debounataan. Jos kiinnostusta riittää, tarjoan opetusohjelman, joka havainnollistaa tekniikkaa.
Karttaohjaimet
Leaflet sallii kyllä mukautetut ohjaimet, mutta voit myös käyttää Angularin komponentteja karttaohjaimina. Luo Angular-komponentti ja käytä CSS:ää asemointiin. Olen käyttänyt tätä useissa projekteissa erittäin räätälöityihin zoom-ohjaimiin. Katso /src/app/maps/map-control-kansiosta luuranko, jota voi käyttää lähtökohtana.
Viittaa /src/app/maps/maps/map.component.scss:ään asiaankuuluvaa muotoilua varten.
Varoittelehan z-indeksiä
Jos laattojen laatoittaminen tai jokin muu karttojen näyttämisen osa-alue ei näytä toimivan, kyse voi olla z-indeksistä. Aiemmin olen joutunut kartoittamaan z-indeksit uudelleen yksinkertaisesti vaihtamalla laattojen tarjoajia tai jopa siirtymällä Angular 7:stä Angular 8:aan!
Karttamerkit
Karttaan voidaan lisätä merkkejä, joiden koordinaatit tunnetaan. Määritä koordinaatit ja luo sitten Leaflet-kuvake kullekin koordinaatille. Merkkien koordinaatit määritellään tässä opetusohjelmassa sovelluksen pääkomponentissa,
/src/app/app.component.ts
public markers: {lat: number, long: number}; // Map markers (relevance depends on map center)
constructor()
{
// some map markers
this.markers = ;
}
ja ne välitetään Angular-syötteenä karttakomponentille,
/src/app/app.component.html
<app-map ="markers"></app-map>
Merkit renderöidään karttakomponentissa,
/src/app/maps/map.component.ts
protected __showMarkers(): void
{
if (this.markers !== undefined && this.markers != null && this.markers.length > 0)
{
// Add markers
const icon = L.icon({
iconUrl: MapIconOptions.mapIcon,
iconSize: MapIconOptions.iconSize,
iconAnchor: MapIconOptions.iconAnchor,
shadowUrl: MapIconOptions.mapShadowIcon,
shadowSize: MapIconOptions.shadowSize,
shadowAnchor: MapIconOptions.shadowAnchor,
});
const n: number = this.markers.length;
let i: number;
let m: L.marker;
let x: number;
let y: number;
for (i = 0; i < n; ++i) {
x = this.markers.lat;
y = this.markers.long;
if (x !== undefined && !isNaN(x) && y !== undefined && !isNaN(y))
{
// okay to add the icon
m = L.marker(, {icon: icon}).addTo(this.map);
}
else
{
// implement your own error handling
console.log('MARKER ERROR, Marker number: ', (i+1), 'x: ', x, ' y: ', y);
}
}
}
}
Vuorovaikutteisuus
Pari käsittelijää kartan perusvuorovaikutteisuuteen on lisätty sinulle, nimittäin hiiren napsautus ja hiiren siirto. Jälkimmäinen päivittää kartan nykyisen sijainnin (lat/long) hiiren sijainnin perusteella.
/src/app/maps/map.component.ts
protected __onMapMouseMove(evt: any): void
{
const lat: string = evt.latlng.lat.toFixed(3);
const long: string = evt.latlng.lng.toFixed(3);
this.mcText = `Latitude: ${lat} Longitude: ${long}`;
}
Tämänhetkistä sijaintia heijastava merkkijono näkyy karttakomponentin mallissa,
/src/app/maps/map.component.html
<div class="mouse-coords">
<span></span>
<span ="mcText"></span>
</div>
Tulos
Rakenna sovellus ja sinun pitäisi havaita jotain tämän kuvankaappauksen kaltaista,
Liikuta hiiren kurssi kartan yli havaitaksesi, miten hiiren sijainnin sijainti päivittyy karttakoordinaatteihin.
Toivottavasti tästä pääset alkuun Angularin ja Leafletin kanssa työskentelyssä. Nämä kaksi sovellusta toimivat erittäin hyvin yhdessä, ja potentiaalia erittäin vuorovaikutteisten, mukaansatempaavien karttojen tekemiseen on lähes rajattomasti.
Onnea Angular-työskentelyyn!
Jos haluat lisää Angular-herkkua, tutustu The Angular Show -podcastin uusimpaan jaksoon.
ng-conf: The Musical on ng-confin väen kaksipäiväinen konferenssi, joka on tulossa 22.4.& 23.4.2021. Tutustu siihen osoitteessa ng-conf.org