Servicii avansate în ArcGIS. Integrare ArcGIS în Angular

• Înțelegerea modului de integrare a API-ului ArcGIS într-un framework de JavaScript
• Înțelegerea modului de integrare a funcționalităților ArcGIS în Angular
  • Structură modulară a codului
  • Integrarea modulelor ArcGIS prin intermediul esriLoader
• Exersarea modului de lucru cu elemente grafice pe hartă
• Familiarizare cu serviciile din ArcGIS
  • Serviciul de rutare
  • Serviciul de căutare a locațiilor

ArcGIS pune la dispoziție o multitudine de servicii interactive ce pot fi integrate în aplicații web folosind JavaScript API: Mapping APIs and location services

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) Routing service

Testați serviciul de rutare în CodePen, folosind API key-ul generat în laboratorul anterior.

Pentru căutarea locațiilor dintr-o arie geografică se poate folosi serviciul Place search. Acesta poate returna locații după categorie (ex. cafenea), nume (ex. Starbucks), adresă, sau coordonate (lat, lng).

Pentru a realiza proiecte mai complexe (majoritatea aplicațiilor web moderne), se folosesc în general framework-uri de JavaScript, precum Angular, React sau Vue. What is Angular?

Acestea permit realizarea aplicațiilor de tip SPA (Single Page Application) având o structură modulară (model MVC sau MVVM) și un set de facilități standard precum rutare, interacțiune cu DOM-ul (Document Object Model), layout flexibil, componente vizuale reutilizabile (ex. Angular Material), optimizare build. Principalul avantaj este că oferă o structură standard ce permite extensibilitatea codului (în comparație cu vanilla JS, unde putem ajunge foarte ușor la un spaghetti code).

Angular prezintă un avantaj major față de celelalte framework-uri: folosește TypeScript, o extensie a JavaScript-ului care combină avantajele unui limbaj puternic tipizat (strongly typed) cu flexibilitatea limbajului JavaScript (în esență weakly typed), și permite folosirea conceptelor OOP într-o arhitectură de tip MVVM (Model-View-ViewModel).

Atunci când lucrăm cu un framework, este recomandat să pornim de la un template care conține scheletul aplicației și configurările de bază. Angular CLI pune la dispoziție un set de comenzi pentru inițializarea unui proiect pe baza unor template-uri standard, dar noi vom folosi un template de pe GitHub, preconfigurat pentru integrarea bibliotecii ArcGIS.

Î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.

Instalați versiunea LTS de aici, dacă nu aveți deja instalat Node.js: https://nodejs.org/en/

PowerShell

npm install -g @angular/cli

https://angular.io/guide/setup-local

În folder-ul dezarhivat pe care l-ați descărcat anterior, deschideți un terminal (e.g. PowerShell, shift+click dreapta / Open PowerShell window here) și rulați comanda:

npm install

Pentru a împacheta proiectul și a deschide un server local, ne folosim de toolkit-ul Angular (ng serve). Putem folosi următoarea comandă definită în configurarea proiectului (package.json)

npm run start

Dacă totul este ok (nu sunt erori în cod și toate dependențele au fost instalate corect), se va deschide un server pe portul 4200.

Deschideți browser-ul la adresa: http://localhost:4200/

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.

Adăugați serviciul de rutare (decomentați linia this.addRouter();) și verificați funcționarea acestuia.

Urmăriți modul de integrare a serviciului de rutare. În mod similar, adăugați serviciul de căutare a locațiilor (Place search) pe baza unei categorii predefinite - Local search (by category).

• ArcGIS Maps SDK for JavaScript 4.28
• ArcGIS API for JavaScript: Advanced Topics
• What is Angular
• GitHub: AngularDemoArcGIS