../_images/logo_geoext.png

GeoExt Snabbstart

GeoExt är ett JavaScript-bibliotek som körs i webbläsaren, det kombinerar och förbättrar ExtJS-ramverket och OpenLayers-biblioteket. Denna snabbstart beskriver stegen för att skapa en rik webbapplikation med hjälp av GeoExt-komponenter på mindre än 200 rader kod. Vi kommer att använda de installerade MapServer-webbtjänsterna på OSGeoLive a MapServer för att leverera kartlager till applikationen. Om du slutför stegen nedan kommer du att få demo GeoExt-applikationen på http://localhost/geoext/.

Skapa en HTML-sida

I detta steg kommer vi att skapa en tom HTML-sida som kommer att innehålla applikationen. Vi använder textredigeraren FeatherPad som är installerad på OSGeoLive för att skapa en ny HTML-fil på /var/www/html/geoext/demo.html

  1. Öppna FeatherPad från kommandoraden med förhöjda behörigheter, så att du kan spara filen, genom att använda Systemverktyg > QTerminal och sedan köra kommandot nedan:

    sudo featherpad

  2. Klistra sedan in HTML-filen nedan och spara filen som /var/www/html/geoext/demo.html. Filen innehåller länkar till JavaScript-biblioteken ExtJS och OpenLayers samt två CSS-filer som används för att styla ExtJS- och OpenLayers-komponenter.

    Vi kommer att använda klassen Ext.Loader för att ladda in GeoExt JavaScript-källfiler. Dessa finns alla i mappen `src i /var/www/html/geoext/.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>OSGeoLive | GeoExt QuickStart</title>
    <link rel="stylesheet" href="resources/theme-triton-all.css" type="text/css" />
    <link rel="stylesheet" href="ol.css" type="text/css" />
    <script src="ext-all.js"></script>
    <script src="ol.js"></script>
</head>
<body>
    <script>

       Ext.Loader.setConfig({
           enabled: true,
           paths: {
               'GeoExt': 'src/'
           }
       });

        Ext.onReady(function () {
            // all JavaScript application code should go here
        });
    </script>
</body>
</html>

Du bör nu kunna visa en tom HTML-sida i Firefox på http://localhost/geoext/demo.html

All JavaScript i följande avsnitt ska klistras in efter kommentaren // all JavaScript-applikationskod ska placeras här i funktionen Ext.onReady. Genom att placera koden här säkerställer du att JavaScript-biblioteken har laddats innan du kör någon anpassad JavaScript-kod.

Konfigurera OpenLayers-objekt

Därefter ska vi konfigurera några OpenLayers-objekt som används av programmet.

  1. Låt oss först skapa ett kartkakelskikt med OpenStreetMap och några WMS-lager som är tillgängliga från MapServer Itasca-demo på OSGeoLive.

    var map;
var mapServerUrl = 'http://localhost/cgi-bin/mapserv?map=/usr/local/www/docs_maps/mapserver_demos/itasca/itasca.map&';

var osmLayer = new ol.layer.Tile({
    source: new ol.source.OSM(),
    name: 'OpenStreetMap'
});

var wmsLayer1 = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        url: mapServerUrl,
        params: { 'LAYERS': 'ctybdpy2' }
    }),
    name: 'County Boundary'
});

var wmsLayer2 = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        url: mapServerUrl,
        params: { 'LAYERS': 'lakespy2' }
    }),
    name: 'Lakes & Rivers'
});

var wmsLayer3 = new ol.layer.Image({
    source: new ol.source.ImageWMS({
        url: mapServerUrl,
        params: { 'LAYERS': 'majrdln3,majrdln3_anno' }
    }),
    name: 'Highways'
});

  2. Därefter ska vi lägga till ett WFS-vektorlager - det här är lite mer komplicerat, men följer samma metod för att skapa en källa och sedan ett lager som de tidigare lagren:

    var vectorSource = new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: function (extent) {
        return mapServerUrl + 'service=WFS&' +
            'version=1.1.0&request=GetFeature&typename=airports&' +
            'outputFormat=application/json&srsname=EPSG:3857&' +
            'bbox=' + extent.join(',') + ',EPSG:3857';
    },
    strategy: ol.loadingstrategy.bbox
});

var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    name: 'Airports'
});

  3. Nu ska vi skapa vårt OpenLayers-kartobjekt som konfigureras med de lager vi just skapat. Vi kommer också att ställa in kartans centrum och zoomnivå och lägga till en select-interaktion så att vi kan välja funktioner i vårt vektorlager.

    var map = new ol.Map({
    layers: [
        wmsLayer1, wmsLayer2, wmsLayer3, vectorLayer
    ],
    view: new ol.View({
        center: ol.proj.fromLonLat([-93.33, 47.32]),
        zoom: 6
    })
});

var selectInteraction = new ol.interaction.Select();
map.addInteraction(selectInteraction);

Arbeta med GeoExt-komponenter

Nu när kartan och lagren har konfigurerats ska vi skapa och konfigurera våra GeoExt-komponenter.

  1. Först och främst kommer vi att skapa en GeoExt.component.Map. Denna använder OpenLayers-kartan som vi skapade och kommer att placeras i ”center”-regionen i vår applikation.

    var mapComponent = Ext.create('GeoExt.component.Map', {
    map: map,
    region: 'center'
});

  2. Därefter skapar vi en komponent för ett lagerträd. Trädet har sin egen datalagring - GeoExt.data.store.LayersTree, som vi kommer att fylla med lager från vår OpenLayers-karta. Lagret kommer sedan att användas för att fylla i vår trädpanel. Vi kommer också att lägga till ett plugin i trädet för att tillåta att kartlagrens ordning ändras genom att dra och släppa lagren. Egenskapen flex gör att trädpanelen fyller upp allt tillgängligt utrymme i sin region på skärmen.

    var treeStore = Ext.create('GeoExt.data.store.LayersTree', {
    layerGroup: map.getLayerGroup()
});

var layerTreePanel = Ext.create('Ext.tree.Panel', {
    title: 'Map Layers',
    width: 300,
    flex: 1,
    store: treeStore,
    rootVisible: false,
    viewConfig: {
        plugins: { ptype: 'treeviewdragdrop' }
    }
});

  3. Vi ska också skapa en rutnätskomponent för att visa attributen för funktioner i vårt WFS-lager. På samma sätt som skiktets trädbutik och trädpanel skapar vi en GeoExt.data.store.Features-butik och en rutnätspanel.

    var featureStore = Ext.create('GeoExt.data.store.Features', {
    layer: vectorLayer,
    map: map
});

var featureGrid = Ext.create('Ext.grid.Panel', {
    store: featureStore,
    region: 'south',
    title: 'Airport Runways for Itasca County',
    columns: [
        { text: 'Name', dataIndex: 'NAME', flex: 3 },
        { text: 'Quadrant', dataIndex: 'QUADNAME', flex: 1 },
        { text: 'Elevation', dataIndex: 'ELEVATION', flex: 1 }
    ],
    listeners: {
        selectionchange: function (sm, selected) {
            Ext.each(selected, function (rec) {
                selectInteraction.getFeatures().clear();
                selectInteraction.getFeatures().push(rec.getFeature());
            });
        }
    },
    height: 300
});

  4. Vår sista GeoExt-komponent är en översiktskarta - GeoExt.component.OverviewMap. Vi kommer att konfigurera detta för att visa OpenStreetMap-lagret som vi skapade tidigare och placera det i en ExtJS-panel.

    var overview = Ext.create('GeoExt.component.OverviewMap', {
    parentMap: map,
    layers: [osmLayer]
});

var overviewPanel = Ext.create('Ext.panel.Panel', {
    title: 'Overview',
    layout: 'fit',
    items: overview,
    height: 300,
    width: 300,
    collapsible: true
});

Skapa en vyport

Det sista steget i skapandet av vår applikation är att skapa en viewport - en behållare som representerar applikationen och som kommer att visa alla de komponenter vi skapade ovan.

var vp = Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [
        mapComponent,
        {
            xtype: 'container',
            region: 'west',
            layout: 'vbox',
            collapsible: true,
            items: [
                overviewPanel,
                layerTreePanel
            ]
        },
        featureGrid
    ]
});

Du ska nu kunna uppdatera länken http://localhost/geoext/demo.html i din webbläsare och se en komplett GeoExt-applikation som liknar bilden nedan.

../_images/geoext_quickstart.png

What next?