Dimensional Data

Vizualizarea datelor geospatiale utilizând Ext JS și Google Maps Deseori,când vine vorba de lucrul cu date geospatiale (adică date care au asociate informații despre locație), aveți de multe ori nevoie de o modalitate faină de a vizualiza datele din aplicația dvs. pentru a fi utile. Ext JS include un pachet „ux” care conține diferite extensii de utilizator (inclusiv una pentru Google Maps) care vă permite să încorporați cu ușurință o hartă cu informații pe ea în aplicația dvs. Ext JS, împreună cu funcționalitatea încorporată de adăugare automată a markerilor pe hartă în baza datelor dintr-o baza de date din aplicația Dvs. Prin aceasta postare vom demonstra o aplicație simplă construită folosind Ext JS și Google Maps care conține o grilă și o hartă pentru vizualizarea locației clienților. Această aplicație este proiectată să funcționeze atât pe telefon, cât și pe desktop. Atât grila, cât și harta se vor lega de aceeași sursă de date – un set de date de exemplu care conține nume de clienți, adrese, coordonate latitudine / longitudine și număr de licențe software pe care le dețin. Primii pași Vom începe cu setările inițieale în Ext JS și Google Maps. Pentru a crea această aplicație, începeți prin crearea unei aplicații Ext JS noi. Pentru acest exemplu, am folosit Sencha Ext JS 7.0 Modern Toolkit. Pentru ca Google Maps să se redea corect în aplicația dvs., va trebui să generați o cheie API Google Maps prin intermediul consolei Google Cloud Platform, așa cum este descris aici. Această cheie API se asociază la una sau mai multe adrese URL unde aplicația rulează și permite redarea hărților personalizate fără a fi necesar un mesaj de eroare „Google Maps API is required”. După ce ați generat cheia API prin Google Cloud Platform Console și i-ați asociat o adresă URL permisă (de exemplu http: // localhost: 1841), deschideți fișierul app.json și adăugați următoarele în rădăcina fișierului, făcând astfel asigurați-vă că introduceți propria cheie API: Sencha Ext JS va adăuga această cheie (împreună cu orice alți parametri de șir de interogare specificați) la solicitarea la încărcarea Google Maps JavaScript API. În timp ce aveți fișierul app.json deschis, va trebui să adăugați și pachetele ux și google în tabloul necesar: Crearea modelului și a Main View Data model pentru această aplicație este o structură simplă, cu coordonate de nume, adresă, latitudine și longitudine și un câmp care conține numărul de licențe deținute de client: Codul pentru Main View va combina vizualizarea grilă și harta (ambele sunt create în secțiunea următoare). Aceast View prezintă grila și harta poziționate unul lângă celălalt pe orizontală folosind un layout hbox. Totuși, acest lucru nu va arăta grozav pe un telefon, datorită ecranului îngust, așa că putem schimba dinamic aspectul în funcție de tipul platformei și puteți trece la utilizarea unui layout vbox dacă nu folosiți un dispozitiv desktop, specificând următoarea platformConfig pe Main View. Această configurație va poziționa grila deasupra hărții folosind un layout vbox, folosind mai bine spațiul disponibil fără a fi nevoie să definiți vizualizări complet separate (una pentru desktop și alta pentru telefon). Puteți perfecționa acest lucru în continuare adăugând reguli suplimentare bazate pe dimensiunea ecranului sau orientarea ecranului. Vederea principală are, de asemenea, un View Model asociat cu acesta, care conține configurația Magazinelor Clientului și câteva exemple de date înscrise: Ext JS și Google Maps […]