Table of Contents

Laboratorul 03. Integrarea datelor. ArcGIS JavaScript API

Integrarea datelor geospațiale. ArcGIS JavaScript API

Obiective laborator

Formatul GeoJSON

Formatul GeoJSON poate fi utilizat pentru stocarea datelor geospațiale. Are la bază formatul JSON și conține tipuri predefinite pentru reprezentarea entităților: puncte (Point), linii (LineString), poligoane (Polygon), colecții geometrice (MultiPoint, MultiLineString, MultiPolygon, GeometryCollection).

Exemplu de atribut specific formatului GeoJSON: 

"geometry":{
   "coordinates":[
      -99.88897705,
      32.23457718
   ],
   "type":"Point"
}

Descărcați arhiva LA_Hub_Datasets. Vizualizați fișierele ce conțin date geospațiale în diferite formate: GeoJSON, CSV, Shapefile.

ArcGIS for Developers

Pentru a folosi API-urile ArcGIS, aveți nevoie de un API KEY generat pe contul ArcGIS Developer.

Pentru a accesa contul ArcGIS Developer, se poate transforma contul public în cont de developer, fără costuri suplimentare (în loc să creați un cont free trial care expiră).

Familiarizare cu JavaScript

JavaScript este un limbaj de programare aparent simplu (se poate face rapid o aplicație simplă, rulează în browser, nu necesită un toolkit avansat) dar în același timp complex (programare asincronă, multi-paradigmă). Există numeroase framework-uri de JavaScript pentru dezvoltarea aplicațiilor web, atât pe partea de front end (Angular, Vue, React), cât și de back end (Node.js).

Pentru acest laborator, vom realiza o aplicație simplă în browser, folosind API-ul de JavaScript pentru ArcGIS, și un tutorial pas cu pas. Nu sunt necesare cunoștințe avansate de JavaScript, dar pentru o mai bună înțelegere a limbajului de programare și a modului de organizare a unei aplicații web, puteți consulta tutoriale disponibile online:

Rareori aplicațiile web de complexitate medie sunt scrise direct în JavaScript. De regulă se folosesc framework-uri pentru a gestiona structura și funcționalitățile generale ale aplicațiilor, dar toate acestea au la bază o cunoaștere bună a limbajului.

API-ul de JavaScript pentru ArcGIS este folosit pentru a crea aplicații web customizabile, independente de tipul de browser folosit. API-ul este bazat pe Dojo, un toolkit care permite realizarea aplicațiilor modulare.

Dojo

API-ul ArcGIS are la bază toolkit-ul Dojo și este construit pe bază de module ce suportă încărcare modulară dinamică (AMD) prin require.js.

Găsiți aici informații suplimentare din documentația Dojo

Setup aplicație web

Pentru a începe lucrul cu JavaScript API, găsiți aici un setup minimal pentru a afișa o hartă: Display a map

Structura aplicației ArcGIS are la bază sistemul modular bazat pe Dojo: 

require([
      "esri/config",
      "esri/Map",
      "esri/views/MapView"
    ], function(esriConfig, Map, MapView) 
{

Sandbox

Pentru a vă putea testa codul puteți folosi Sandbox-ul codepen.io Pentru a salva proiectele realizate în CodePen este necesar să vă creați un cont gratuit.

Folosiți tab-urile corespunzătoare pentru a scrie cod HTML, CSS și JavaScript, în loc să scrieți tot codul în HTML.

În proiecte mai complexe, separarea fișierelor (.html, .css, .js) permite o mai bună organizare a aplicației, și facilități de formatare și verificare a sintaxei în cazul folosirii unui IDE (de ex. Visual Studio Code).

Plan laborator

Inițializare hartă

Inițializați aplicația și afișați harta folosind API-ul de JavaScript:

https://developers.arcgis.com/javascript/latest/display-a-map/

Geolocație

Adăugați modulul esri/widgets/Locate pentru a integra funcția de localizare și urmărire prin geolocație:

https://developers.arcgis.com/javascript/latest/display-your-location/

Elemente grafice pe hartă

Se pot adăuga elemente grafice definite prin coordonate geografice (latitudine, longitudine). Aceste elemente definesc un layer grafic, ce poate fi gestionat direct la nivel de aplicație.

Elementele grafice de tip Point, Polyline, Polygon se definesc prin coordonate și simboluri, și sunt afișate pe hartă folosind un obiect de tip Graphic.

https://developers.arcgis.com/javascript/latest/add-a-point-line-and-polygon/

Adăugare layere

Se pot adăuga layere din surse externe în diferite moduri:

Adăugați modulul esri/layers/FeatureLayer pentru a integra layere de tip FeatureLayer.

https://developers.arcgis.com/javascript/latest/add-a-feature-layer/

Adăugați modulul esri/layers/GeoJSONLayer pentru a integra layere dintr-un fișier GeoJSON.

https://developers.arcgis.com/javascript/latest/sample-code/layers-geojson/

Folosind modulul esri/layers/GeoJSONLayer se pot integra layere din surse externe, fără a fi necesară crearea unui FeatureLayer pe platforma ArcGIS. Fișierul GeoJSON poate fi hostat pe un server, independent de platforma ArcGIS.

Nu avem încă un server separat, dar dorim să integrăm un layer dintr-un fișier. Vom importa mai întâi un layer din formatul GeoJSON în ArcGIS Developer. Încărcați layer-ul din fișierul Trails.geojson descărcat anterior (sau de aici) în contul ArcGIS Developer: https://developers.arcgis.com/layers/

Configurați FeatureLayer-ul generat pentru a fi accesibil public:

Alternativ, realizați operațiunea de partajare din secțiunea Content. Selectați resursa de tip Feature Layer (hosted) corespunzătoare layer-ului importat, apoi selectați opțiunea Share: Everyone (Public)

Înlocuiți link-ul din tutorial cu link-ul către acest layer nou creat.

Serviciile hostate pe contul vostru de ArcGIS Developer sunt gratuite în limitele definite pe pagina de Pricing

Configurare layere

Layerele adăugate pot fi configurate programatic din aplicație.

https://developers.arcgis.com/javascript/latest/style-a-feature-layer/

Configurare popup-uri

Popup-urile pot fi configurate programatic din aplicație.

https://developers.arcgis.com/javascript/latest/display-a-pop-up/

Task

Creați o (singură) aplicație web care să includă toate funcționalitățile din planul de laborator. Adăugați toate resursele specificate în tutorial.

Resurse