Differences
This shows you the differences between two versions of the page.
|
isi:laboratoare:03 [2024/10/20 16:06] alexandru.predescu [Task] |
isi:laboratoare:03 [2025/10/17 15:22] (current) sorin.ciolofan [Task] |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ===== Laboratorul 03. Integrarea funcțională. Servicii GIS avansate ===== | ===== Laboratorul 03. Integrarea funcțională. Servicii GIS avansate ===== | ||
| + | Integrarea funcțională presupune fie apelarea unor servicii web / API-uri, instalarea unor pachete / SDK-uri, sau chiar utilizarea unui Framework ca structură generală a aplicației. În acest laborator, vom folosi în continuare SDK-ul ArcGIS pentru JavaScript, la care vom adăuga servicii avansate disponibile pe bază de API-uri. Apoi vom face setup-ul pentru un proiect realizat în framework-ul Angular, unde vom integra harta și alte funcționalități separate de ArcGIS. | ||
| ==== Obiective laborator ==== | ==== Obiective laborator ==== | ||
| - | * Familiarizare cu ArcGIS JavaScript API | + | * Familiarizare cu ArcGIS Maps SDK for JavaScript |
| - | * Înțelegerea modului de realizare a unei aplicații web cu JavaScript API | + | |
| * Înțelegerea modului de integrare a funcționalităților ArcGIS interactive | * Înțelegerea modului de integrare a funcționalităților ArcGIS interactive | ||
| * Familiarizare cu serviciile avansate din ArcGIS | * Familiarizare cu serviciile avansate din ArcGIS | ||
| * Serviciul de rutare | * Serviciul de rutare | ||
| * Serviciul de căutare a locațiilor | * Serviciul de căutare a locațiilor | ||
| + | * Familiarizare cu structura unei aplicații într-un framework web (Angular) | ||
| ==== Servicii ArcGIS avansate == | ==== Servicii ArcGIS avansate == | ||
| - | 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]] | + | ArcGIS pune la dispoziție o multitudine de servicii interactive ce pot fi integrate în aplicații web folosind ArcGIS Maps SDK: [[https://developers.arcgis.com/documentation/mapping-apis-and-services/|Mapping APIs and location services]] |
| === Rutare === | === 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) | 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]] | + | [[https://developers.arcgis.com/javascript/latest/tutorials/find-a-route-and-directions/|Routing service]] |
| Testați serviciul de rutare în CodePen, folosind API key-ul generat în laboratorul anterior. | Testați serviciul de rutare în CodePen, folosind API key-ul generat în laboratorul anterior. | ||
| === Căutare locații === | === 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). | + | Pentru căutarea locațiilor dintr-o arie geografică se poate folosi serviciul [[https://developers.arcgis.com/javascript/latest/tutorials/find-places/|Place search]]. Acesta poate returna locații după categorie (ex. cafenea), nume (ex. Starbucks), adresă [[https://developers.arcgis.com/javascript/latest/tutorials/search-for-an-address/|Address search]], sau coordonate (lat, lng). |
| Line 31: | Line 32: | ||
| **Task 1** | **Task 1** | ||
| - | Creați o (singură) aplicație web care să includă toate funcționalitățile din planul de laborator. | + | Creați o singură aplicație web care să includă Routing, Place Search, Address Search. |
| - | Adăugați toate resursele specificate în tutorial. | + | Plasati controalele de directii (rutare), cautare locatii si cautare adresa respectind layoutul din figura de mai jos |
| + | |||
| + | {{:isi:laboratoare:lab3:l3_1.png?600|}} | ||
| + | |||
| + | /*<note tip>Sugestie: folosiți aplicația realizată în laboratorul anterior.</note>*/ | ||
| - | <note tip>Sugestie: folosiți aplicația realizată în laboratorul anterior.</note> | ||
| **Task 2** | **Task 2** | ||
| + | Observati ca daca dati click pe o locatie (cafenea, parc, benzinarie, etc) nu mai este afisat popup-ul aferent locatiei ci acel click este considerat ca punct de plecare pentru rutare. Modificati codul astfel incat rutarea sa se faca numai daca se da click pe harta, in afara locatiilor, iar daca se da click pe o locatie se afiseaza popup-ul. | ||
| + | |||
| + | <note> | ||
| + | Indicatie: Trebuie diferentiat ce tip de click se intampla: feature/graphic si atunci se deschide popup-ul sau punct obisnuit de pe harta si atunci se continua cu rutarea. Puteti folosi functia [[https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html#hitTest|hitTest]] in acest scop. | ||
| + | </note> | ||
| + | |||
| + | <code> | ||
| + | viewElement.addEventListener("arcgisViewClick", async (event) => { | ||
| + | const view = viewElement.view; | ||
| + | const hit = await view.hitTest(event.detail); | ||
| + | if (hit.results.length > 0 && hit.results[0].graphic.attributes?.PlaceName) { | ||
| + | // deschide popup | ||
| + | ..... | ||
| + | return; // opreste rutarea | ||
| + | } | ||
| + | //continua cu rutarea | ||
| + | ...... | ||
| + | }); | ||
| + | </code> | ||
| + | |||
| + | **Task 3** | ||
| Realizați setup-ul proiectului Angular de mai jos, pe care îl vom folosi în laboratorul următor. Verificați că aplicația rulează în browser fără erori: | Realizați setup-ul proiectului Angular de mai jos, pe care îl vom folosi în laboratorul următor. Verificați că aplicația rulează în browser fără erori: | ||
| Line 98: | Line 123: | ||
| - | ==== Resurse ==== | + | /*==== Resurse ====*/ |
| - | * {{:isi:laboratoare:lab3:la_hub_datasets.zip|LA_Hub_Datasets.zip}} | ||
