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:

"mashup": {
    "map": {
        "options": "?key=your_key_here"
    }
},

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:

"requires": [
    "font-awesome",
    "ux",
    "google"
],

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:

Ext.define('MyApp.model.Customer', {
    extend: 'Ext.data.Model',
 
    fields: [{
        name: 'name'
    }, {
        name: 'address'
    }, {
        name: 'lat',
        format: 'double'
    }, {
        name: 'lng',
        format: 'double'
    }, {
        name: 'licenses',
        format: 'integer'
    }]
});

Codul pentru Main View va combina vizualizarea grilă și harta (ambele sunt create în secțiunea următoare).

Ext.define('MyApp.view.main.Main', {
    extend: 'Ext.Container',
    xtype: 'app-main',
 
    controller: 'main',
    viewModel: 'main',
 
    platformConfig: {
        desktop: {
            layout: 'hbox'
        },
        '!desktop': {
            layout: 'vbox'
        }
    },
 
    padding: 6,
 
    items: [{
        xtype: 'customergrid',
        reference: 'customergrid',
        flex: 1,
        platformConfig: {
            desktop: {
                margin: '0px 6px 0px 0px',
                minWidth: 350
            },
            '!desktop': {
                margin: '0px 0px 6px 0px',
                minHeight: 250
            }
        }
    }, {
        xtype: 'customermap',
        reference: 'customermap',
        flex: 2
    }]
});

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.

platformConfig: {
    desktop: {
        layout: 'hbox'
    },
    '!desktop': {
        layout: 'vbox'
    }
},

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.define('MyApp.view.main.MainModel', {
    extend: 'Ext.app.ViewModel',
 
    alias: 'viewmodel.main',
 
    stores: {
        customers: {
            model: 'MyApp.model.Customer',
            sorters: 'name',
            data: [{
                name: 'Royal Opera House',
                address: 'The Piazza, Covent Garden, London, WC2E 8HD',
                licenses: 23,
                lat: 51.512912,
                lng: -0.122204
            }, {
                name: 'Lyceum Theatre',
                address: '21 Wellington St, Covent Garden, London, WC2E 7RQ',
                licenses: 10,
                lat: 51.511580, 
                lng: -0.119976
            }, {
                name: 'Novello Theatre',
                address: 'Aldwych, London, WC2B 4LD',
                licenses: 5,
                lat: 51.512331, 
                lng: -0.119183
            }, {
                name: 'Peacock Theatre',
                address: 'Portugal St, Holborn, London, WC2A 2HT',
                licenses: 9,
                lat: 51.514594, 
                lng: -0.118002
            }, {
                name: 'Somerset House',
                address: 'Strand, London, WC2R 1LA',
                licenses: 2,
                lat: 51.511075, 
                lng: -0.117144
            }, {
                name: 'Savoy Theatre',
                address: 'Savoy Ct, London, WC2R 0ET',
                licenses: 7,
                lat: 51.510353,
                lng: -0.120804
            }, {
                name: 'National Portrait Gallery',
                address: 'St. Martin\'s Pl, Charing Cross, London, WC2H 0HE',
                licenses: 3,
                lat: 51.509445,
                lng: -0.128143
            }, {
                name: 'National Theatre',
                address: 'Upper Ground, Lambeth, London, SE1 9PX',
                licenses: 20,
                lat: 51.507010,
                lng: -0.114232
            }, {
                name: 'Cambridge Theatre',
                address: 'Earlham St, London, WC2H 9HU',
                licenses: 5,
                lat: 51.513656,
                lng: -0.126594
            }]
        }
    }
});

Ext JS și Google Maps – Crearea Map View

Pentru a adăuga o hartă în aplicație, putem crea o nouă vizualizare în aplicație folosind codul de mai jos. Configurația markerilor este legată de magazinul clientului care este definit pe modelul principal de vizualizare. Când Magazinul este încărcat cu date, markerii vor fi adăugați automat pe hartă pe baza mapărilor de câmp definite în markerTemplate.

De asemenea, putem defini o latitudine și o longitudine pentru a centra harta atunci când se redă inițial și specificăm un nivel de zoom implicit.

Ext.define('MyApp.view.map.CustomerMap', {
    extend: 'Ext.Panel',
    xtype: 'customermap',
 
    controller: 'customermap',
 
    requires: [
        'Ext.ux.google.Map'
    ],
 
    title: 'Locations',
    layout: 'fit',
 
    items: [{
        xtype: 'map',
        mapOptions: {
            center: {
                latitude: 51.511580,
                longitude: -0.119976
            },
            zoom: 16
        },
        bind: {
            markers: '{customers}'
        },
        markerTemplate: {
            title: '{name}',
            position: {
                lat: '{lat}',
                lng: '{lng}'
            }
        },
        listeners: {
            markerclick: 'onMarkerClick'
        }
    }]
});

Am adăugat o logică prin care se va anima markerul selectat când faceți clic pe markeri, și, de asemenea se centrează harta la înregistrarea din grilă (consultați secțiunea următoare pentru codul grilei). Controlerul pentru vizualizarea Hărții arată astfel:

Ext.define('MyApp.view.map.CustomerMapController', {
    extend: 'Ext.app.ViewController',
 
    alias: 'controller.customermap',
 
    onMarkerClick: function(map, info) {
        var me = this,
            view = me.getView(),
            grid = view.up('app-main').down('customergrid'),
            marker = info.marker,
            record = info.record;
 
        me.animateMarker(marker);
 
        grid.scrollToRecord(record);
        grid.getSelectable().selectRows(record, false, true);
    },
 
    animateMarker: function(marker) {
        var me = this;
 
        marker.setAnimation(google.maps.Animation.BOUNCE);
 
        // Clear the animation on the marker after 1.4 seconds
        Ext.defer(me.clearMarkerAnimation, 1400, me, [marker]);
    },
 
    clearMarkerAnimation: function(marker) {
        marker.setAnimation(null);
    }
});

Ext JS și Google Maps – Crearea Grid View

Grila se leagă, de asemenea, la același magazin de clienți definit pe modelul principal de vizualizare. Am adăugat un platformConfig la coloana de adrese cu setul ascuns la true, deci dacă aplicația este încărcată pe un dispozitiv cu ecran mai mic, nu va afișa coloana de adrese în mod implicit. Acest lucru face ca grila să fie mai prezentabilă pe dispozitivele cu ecran mai mic, cum ar fi telefoanele. Consultați codul de mai jos pentru vizualizarea grilei.

Ext.define('MyApp.view.grid.CustomerGrid', {
    extend: 'Ext.grid.Grid',
    xtype: 'customergrid',
 
    controller: 'customergrid',
 
    title: 'Customers',
    bind: '{customers}',
 
    columns: [{ 
        text: 'Name', 
        dataIndex: 'name', 
        flex: 1 
    }, {
        text: 'Address',
        dataIndex: 'address',
        minWidth: 200,
        flex: 2,
        platformConfig: {
            '!desktop': {
                hidden: true
            }
        }
    }, {
        text: 'Licenses',
        dataIndex: 'licenses',
        width: 100
    }],
 
    listeners: {
        selectionchange: 'onSelectionChange'
    }
});

Codul pentru View Controller este prezentat mai jos. Când un utilizator selectează un rând în grilă, markerul asociat este localizat și centrat pe hartă și ușor animat.

Ext.define('MyApp.view.map.CustomerGridController', {
    extend: 'Ext.app.ViewController',
 
    alias: 'controller.customergrid',
 
    onSelectionChange: function(grid, selection) {
        var me = this,
            view = me.getView(),
            record = selection[0],
            customerMap = view.up('app-main').down('customermap'),
            mapController = customerMap.getController(),
            gmap = customerMap.down('map'),
            marker = gmap.getMarkerForRecord(record);
 
        gmap.setMapCenter(record);
 
        mapController.animateMarker(marker);
    }
});

Acum, ca ultim pas, asamblați aplicația și rulați-o în browser. Dacă aplicația nu rulează corect sau dacă întâmpinați dificultăți, consultați codul sursă complet.

La fel, puteți accesa sample app disponibil online.

Încercați free 30-day trial of Ext JS 7.0 and get started.