Ez a cikk a kezdő Angular fejlesztőknek szól, akik a Leafletet szeretnék integrálni az alkalmazásukba. A harmadik féltől származó függőségek integrálása az Angularba a triviálistól a problémásig bármi lehet. Míg a Leaflet inkább a triviális oldal felé tendál, a böngésző méretéhez folyékonyan igazodó térképek az Angular életciklusához képest némi beállítási problémát jelenthetnek.
Mielőtt elkezdenéd a dekonstrukciót, irányítsd a barátságos, szomszédos böngésződet a következő Githubra.
Most már követheted, vagy elágazhatod a projektet, és használhatod a saját alkalmazásaid alapjaként.
Háttér
Ez a bemutató feltételez egy kis előzetes Leaflet-ismeretet, de nem többet, mint amit a Leaflet Quickstart Guide kifejez.
A cikkben tárgyalt alkalmazásban az ArcGis-t használjuk a csempézéshez (az esri-leaflet csomagot az npm-ből telepítjük).
Angular Setup
Nagyon keveset kell tenni a mindenhonnan elérhető npm telepítés után. A szükséges Leaflet stílusok elérhetővé válnak az angular.json fájlon keresztül,
"styles": ,
A @types/leaflet használatával vegyes eredményeket értem el, ezért ez az alkalmazás az egyszerűség kedvéért nem használja ki a tipizálást. A Leaflet és ESRI lapok importálása az alábbiak szerint történik,
import * as esri from 'esri-leaflet';
import * as L from 'leaflet';
A Leaflet térkép például átmenetileg tetszőlegesen tipizálva van; nyugodtan szilárdítsuk meg a tipizálást gyakorlatként, miután dekonstruáltuk a bemutatót.
A térkép középpontjának koordinátái fontosak a térkép inicializálásához. Sok demó hardkódolja ezt az információt. Alternatívaként ez a bemutató bemutatja, hogyan lehet a térkép középpontjának koordinátáit az Angular Injection Tokens segítségével beadni.
A koordináta egy kétdimenziós pont a térképen, amelyet a szélességi és hosszúsági fokok képviselnek. Egy InjectionToken egy koordinátához a /src/app/tokens.ts fájlban bemutatott módon hozható létre,
INIT_COORDS a /src/app/app.module-ban használatos.ts fájlban a tényleges (lat/long) rendelkezés (vagy definíció) elvégzésére,
providers: ,
Ezáltal a térkép középpontjának definíciója a legmagasabb szintre kerül az Angular alkalmazásban (ahol könnyen látható és szinte öndokumentáló).
Az INIT_COORDS importálása a tokens fájlból és az injektálás egy osztálykonstruktorból. Ezt szemlélteti a /src/app/map.component.ts fájl (az elsődleges térképkomponens ebben a bemutatóban),
constructor( @Inject(INIT_COORDS) protected _initCoords: {lat: number, long: number} )
Térképkomponens
A cikkben tárgyalt alkalmazás egy fix magasságú térképet jelenít meg, amelynek szélessége a teljes böngészőablakra kiterjed. A térkép az ablak méretének megváltoztatásakor újrarajzol. Néhány jelölés is megjelenik a térképlapok tetején.
A térkép az alkalmazásba a fő alkalmazáskomponens sablonján keresztül van integrálva, ahogy az alább látható
/src/app/app.component.html
<app-map ="markers"></app-map>
és a térképkomponens forráskódja a /src/app/maps/map.component alatt található.ts .
A térkép egy olyan tárolóba (DIV) kerül renderelésre, amely éppen a térképkomponens sablonjában van,
/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>
Ha a tartalmazó DIV szélessége és magassága rögzített, akkor a térképcsempék a komponens életciklusának egy korai pontján renderelhetők. A változó szélesség és magasság átadására kétféle megközelítés lehetséges, az outside-in és az inside-out. Az outside-in módszer Angular bemeneteket definiál a szélességhez és a magassághoz. A szülő komponens felelős a szélesség és a magasság közléséért a térképkomponenssel. Az inside-out megközelítés a map komponens belső szélességét és magasságát határozza meg, és “átadja” ezt az információt a sablonjának. A legtöbb alkalmazás az outside-in megközelítést használja. Ez a bemutató a szemléltetés érdekében az inside-out módszert alkalmazza. Módosítsa a kódot a szélesség és magasság átadásának megváltoztatására.
A változó szélesség és magasság bevezet néhány finom kérdést a térkép megjelenítésével kapcsolatban. Csábító a Leaflet beállításával kapcsolatos mindent az on-init kezelőben elvégezni, és ez jellemzően fix szélesség és magasság esetén működik. Mivel ebben a bemutatóban a térkép szélessége a böngésző méretétől függően változik, jobb, ha a térkép inicializálási folyamatát szétválasztjuk az on-init és az after-view-init életciklus kezelői között. Ezt szemléltetik a következő kódrészletek a /src/app/maps/map.component.ts-ből .
Először is, a térkép inicializálásához szükséges tartalmazó DIV azonosítása egy ViewChildre van áthelyezve,
@ViewChild('primaryMap', {static: true}) protected mapDivRef: ElementRef;
protected mapDiv: HTMLDivElement;
A térkép beállításának nagy része az ngOnInit-ben történik,
public ngOnInit(): void
{
// Reference to DIV containing map is used in Leaflet initialization
this.mapDiv = this.mapDivRef.nativeElement;
this.__initializeMap();
this.__renderMap();
this.__showMarkers();
}
A térkép méretének érvénytelenítése az ngAfterViewInit-re van halasztva, amikor a térképcsempék működéséhez szükséges teljes szélesség és magasság rendelkezésre áll. A map változó az ngOnInit kezelőben létrehozott Leaflet térképre utal.
public ngAfterViewInit(): void
{
this.map.invalidateSize();
this.__initMapHandlers();
}
Megjegyezzük, hogy a térképméret frissítésének kezelője újraszámítja az osztály currentWidth és currentHeight változóit, amelyek a térkép DIV szélességét és magasságát szabályozó DIV stílusokhoz vannak kötve. A Leaflet ezt a szélesség/magasság információt használja a térkép újracsempézéséhez és újrarendezéséhez.
Mivel a térkép szélességének/magasságának meghatározása és a térkép átméretezése az ablak változásával a térképkomponensen belül történik, egy egyszerű ablakméret-kezelőt adunk hozzá.
@HostListener('window:resize', )
protected __onResize(event: any): void
{
this.__updateMapSize();
this.map.invalidateSize();
}
Ezt egy külső szolgáltatás is kezelheti, Angularon kívül futtatva és debounced. Ha kellő érdeklődés mutatkozik, biztosítok egy bemutatót, amely illusztrálja a technikát.
Térképvezérlők
A Leaflet lehetővé teszi az egyéni vezérlők használatát, de használhatunk Angular komponenseket is térképvezérlőként. Hozzuk létre az Angular komponenst, és használjunk CSS-t a pozicionáláshoz. Ezt már több projektben is használtam erősen testreszabott zoomvezérlőkhöz. Lásd a /src/app/maps/map-control mappát egy kiindulási pontként használható vázért.
Hivatkozzon a /src/app/maps/maps/map.component.scss mappára a releváns stilizáláshoz.
Vigyázzon a z-indexre
Ha a csempézés vagy a térkép megjelenítésének valamilyen más aspektusa nem működik, az a z-indexszel lehet probléma. A múltban már előfordult, hogy egyszerűen a csempeszolgáltatók cseréje vagy akár az Angular 7-ről az Angular 8-ra való áttérés miatt újra kellett térképeznem a z-indexet!
Térképjelzők
A térképhez ismert koordinátákkal rendelkező jelzőket lehet hozzáadni. Határozza meg a koordinátákat, majd hozzon létre egy-egy Leaflet ikont. A jelölők koordinátáit ebben a bemutatóban a fő alkalmazáskomponensben határozzuk meg,
/src/app/app.component.ts
public markers: {lat: number, long: number}; // Map markers (relevance depends on map center)
constructor()
{
// some map markers
this.markers = ;
}
és Angular bemenetként adjuk át a térképkomponensnek,
/src/app/app.component.html
<app-map ="markers"></app-map>
A jelölések a térképkomponensben kerülnek megjelenítésre,
/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);
}
}
}
}
Interaktivitás
Egy pár kezelőt adtunk hozzá az alapvető térkép interaktivitáshoz, nevezetesen egérkattintás és egérmozgatás. Az utóbbi az egér pozíciója alapján frissíti a térkép aktuális pozícióját (lat/hosszúság).
/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}`;
}
Az aktuális pozíciót tükröző string megjelenik a térképkomponens sablonjában,
/src/app/maps/map.component.html
<div class="mouse-coords">
<span></span>
<span ="mcText"></span>
</div>
Az eredmény
Elkészíti az alkalmazást, és valami ehhez a képernyőképhez hasonlót kell megfigyelnie,
Húzza az egeret a térkép fölé, hogy megfigyelje az egér pozíciójának frissítését a térkép koordinátáiban.
Remélem, hogy ezzel elkezdheted a munkát az Angular és a Leaflet alkalmazással. Ez a két alkalmazás nagyon jól működik együtt, és szinte korlátlan lehetőségek rejlenek a rendkívül interaktív, magával ragadó térképek létrehozásában.
Sok sikert az Angularral kapcsolatos erőfeszítéseidhez!
Ha még több Angular-jóságra vágysz, mindenképpen nézd meg a The Angular Show podcast legújabb epizódját.
ng-conf: The Musical egy kétnapos konferencia az ng-conf embereitől, amely 2021. április 22-én & 23-án jön. Nézd meg az ng-conf.org
oldalon.