Differences
This shows you the differences between two versions of the page.
|
isi:laboratoare:04 [2023/10/29 23:17] alexandru.predescu [Task] |
isi:laboratoare:04 [2024/11/04 20:05] (current) sorin.ciolofan [Task] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | ===== Laboratorul 04. Servicii avansate. Integrare ArcGIS în Angular ===== | + | ===== Laboratorul 04. Dezvoltarea unei aplicații web cu Angular framework ===== |
| - | + | ||
| - | Servicii avansate în ArcGIS. Integrare ArcGIS în Angular | + | |
| ==== Obiective laborator ==== | ==== Obiective laborator ==== | ||
| Line 9: | Line 7: | ||
| * Integrarea modulelor ArcGIS prin intermediul ''esriLoader'' | * Integrarea modulelor ArcGIS prin intermediul ''esriLoader'' | ||
| * Exersarea modului de lucru cu elemente grafice pe hartă | * Exersarea modului de lucru cu elemente grafice pe hartă | ||
| - | * Familiarizare cu serviciile din ArcGIS | ||
| - | * Serviciul de rutare | ||
| - | * Serviciul de căutare a locațiilor | ||
| - | |||
| - | |||
| - | ==== Servicii ArcGIS == | ||
| - | |||
| - | ArcGIS pune la dispoziție o multitudine de servicii interactive ce pot fi integrate în aplicații web folosind JavaScript API: [[https://developers.arcgis.com/documentation/mapping-apis-and-services/|Mapping APIs and location services]] | ||
| - | |||
| - | === Rutare === | ||
| - | Se poate folosi serviciul de rutare pentru calcularea rutelor și afișarea indicațiilor de navigație (este necesar contul de developer și API key-ul generat) | ||
| - | [[https://developers.arcgis.com/documentation/mapping-apis-and-services/routing/services/routing-service/|Routing service]] | ||
| - | |||
| - | Testați serviciul de rutare în CodePen, folosind API key-ul generat în laboratorul anterior. | ||
| - | |||
| - | === Căutare locații === | ||
| - | Pentru căutarea locațiilor dintr-o arie geografică se poate folosi serviciul [[https://developers.arcgis.com/documentation/mapping-apis-and-services/search/place-search/|Place search]]. Acesta poate returna locații după categorie (ex. cafenea), nume (ex. Starbucks), adresă, sau coordonate (lat, lng). | ||
| ==== Introducere in Angular ==== | ==== Introducere in Angular ==== | ||
| Line 45: | Line 26: | ||
| <note>Descărcați proiectul de pe GitHub: [[https://github.com/alexp25/AngularDemoArcGIS|AngularDemoArcGIS]]</note> | <note>Descărcați proiectul de pe GitHub: [[https://github.com/alexp25/AngularDemoArcGIS|AngularDemoArcGIS]]</note> | ||
| + | |||
| + | <note tip> | ||
| + | [[https://material.angular.io/components/categories|Angular Material]] este o colecție de componente de UI standardizate care se pot integra ușor într-o aplicație Angular. Acestea presupun niste elemente HTML cu funcționalitate integrată. | ||
| + | </note> | ||
| ==== Setup și instalare proiect minimal cu Angular ==== | ==== Setup și instalare proiect minimal cu Angular ==== | ||
| + | |||
| + | <note warning>Skip dacă ați finalizat setup-ul în laboratorul trecut</note> | ||
| În laboratorul anterior am lucrat în CodePen. Acum, proiectul este mai complex și vom lucra pe mașina locală. Avem nevoie de câteva tool-uri înainte de a începe. | În laboratorul anterior am lucrat în CodePen. Acum, proiectul este mai complex și vom lucra pe mașina locală. Avem nevoie de câteva tool-uri înainte de a începe. | ||
| Line 97: | Line 84: | ||
| === Task 1 === | === Task 1 === | ||
| - | Realizați o aplicație web cu Angular și JavaScript API pe baza template-ului din laborator și adăugați cel puțin 3 funcționalități din laboratorul anterior. | ||
| - | <note>Adăugați API key-ul din contul ArcGIS Developer: ''esriConfig.apiKey = "MY_API_KEY";''</note> | + | Rulați aplicația web realizată cu Angular și JavaScript API pe baza template-ului din laborator. Verificați funcția de rutare între două puncte (capete de traseu / trailheads) pe hartă. |
| + | |||
| + | <note important>Adăugați API key-ul din contul ArcGIS Developer: ''esriConfig.apiKey = "MY_API_KEY";''</note> | ||
| === Task 2 === | === Task 2 === | ||
| - | Adăugați serviciul de rutare (decomentați linia ''this.addRouter();'') și verificați funcționarea acestuia. | + | Adăugați elementele grafice din laboratorul anterior: poligon, punct si polilinie (ex. GraphicsLayer). |
| === Task 3 === | === Task 3 === | ||
| - | Urmăriți modul de integrare a serviciului de rutare. În mod similar, adăugați serviciul de căutare a locațiilor ([[https://developers.arcgis.com/documentation/mapping-apis-and-services/search/place-search/|Place search]]) pe baza unei categorii predefinite - Local search (by category). | + | Urmăriți modul de integrare a serviciului de rutare în componenta Angular. În mod similar, adăugați serviciul de căutare a locațiilor ([[https://developers.arcgis.com/javascript/latest/tutorials/find-places/|Place search]]) pe baza unei categorii predefinite - Local search (by category). |
| ==== Resurse ==== | ==== Resurse ==== | ||
