../../_images/logo_geoext.png

GeoExt-Quickstart

GeoExt ist eine JavaScript-Bibliothek, die im Browser ausgeführt wird und das ExtJS-Framework und die OpenLayers-Bibliothek kombiniert und erweitert. In diesem Quickstart werden die Schritte zum Erstellen einer umfangreichen Webanwendung mit GeoExt-Komponenten in weniger als 200 Codezeilen erläutert. Wir werden die installierten MapServer-Web-Services auf OSGeoLive als MapServer verwenden, um Karten-Layer für die Anwendung bereitzustellen. Wenn Sie die folgenden Schritte ausführen, wird die Demo-Anwendung GeoExt auf http://localhost/geoext/.

Erstellen einer HTML-Seite

In diesem Schritt richten wir eine leere HTML-Seite ein, die die Anwendung enthält. Wir verwenden den auf OSGeoLive installierten Texteditor FeatherPad, um eine neue HTML-Datei unter ‚‘/var/www/html/geoext/demo.html‘‘ zu erstellen

  1. Öffnen Sie FeatherPad über die Befehlszeile mit erhöhten Berechtigungen, so dass Sie die Datei mit System Tools > QTerminal speichern und dann den folgenden Befehl ausführen können:

    sudo featherpad

  2. Fügen Sie den folgenden HTML-Code ein und speichern Sie die Datei als /var/www/html/geoext/demo.html. Dieser enthält Links zu den JavaScript-Bibliotheken ExtJS und OpenLayers sowie zwei CSS-Dateien, die zum Formatieren von ExtJS- und OpenLayers-Komponenten verwendet werden.

    Wir verwenden die Klasse ‚‘Ext.Loader‘‘, um in GeoExt JavaScript-Quelldateien zu laden. Diese befinden sich alle im Ordner ‚‘src‘‘ in ‚‘/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>

Sie sollten nun eine leere HTML-Seite im Firefox unter http://localhost/geoext/demo.html aufrufen können

Der gesamte JavaScript-Code der folgenden Sektion sollte nach dem folgenden Kommentar // all JavaScript application code should go here eingefügt werden. An dieser Stelle wird gewährleistet, dass die JavaScript-Bibliotheken geladen wurden, bevor benutzerdefinierter JavaScript-Code ausgeführt wird.

Konfigurieren von OpenLayers-Objekten

Als Nächstes konfigurieren wir einige OpenLayers-Objekte, die von der Anwendung verwendet werden.

  1. Zunächst können Sie einen Kartenkachel-Layer mit OpenStreetMap und einige WMS-Layer erstellen, die über die MapServer Itasca-Demo auf OSGeoLive zur Verfügung stehen.

    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. Als nächstes werden wir in einem WFS-Vektor-Layer hinzufügen - dies ist etwas komplizierter, aber folgt dem gleichen Ansatz der Erstellung einer Quelle und einer Ebene - also wie beim vorherigen Layer:

    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. Jetzt erstellen wir unser OpenLayers-Kartenobjekt, das mit den Layern konfiguriert ist, die wir gerade erstellt haben. Wir legen auch die Mittelpunkt- und Zoomstufe der Karte fest und fügen eine ausgewählte Interaktion hinzu, damit wir Features in unserem Vektor-Layer auswählen können.

    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);

Arbeiten mit GeoExt-Komponenten

Jetzt sind die Karte und die Layer konfiguriert, wir werden nun unsere GeoExt-Komponenten erstellen und konfigurieren.

  1. Zuallererst erstellen wir eine ‚‘GeoExt.component.Map‘‘. Diese verwendet die OpenLayers-Karte, die wir erstellt haben, und wird im Bereich „center“ unserer Anwendung positioniert.

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

  2. Als Nächstes erstellen wir eine Ebenenbaum-Komponente. Der Baum hat einen eigenen Datenspeicher - ‚‘GeoExt.data.store.LayersTree‘‘‘, den wir mit Layern aus unserer OpenLayers-Karte füllen. Der Speicher wird verwendet, um unseren Ebenenbaum zu füllen. Wir fügen dem Baum auch ein Plugin hinzu, damit die Reihenfolge des Karten-Layers durch Ziehen und Ablegen der Layer geändert werden kann. Die Eigenschaft ‚‘flex‘‘ bewirkt, dass das Ebenenbaum-Fenster den gesamten verfügbaren Platz in seinem Bereich des Bildschirms auffüllt.

    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. Wir werden auch ein Grid-Komponente erstellen, um die Attribute der Features von unserem WFS-Layer anzuzeigen. Ähnlich wie im Layerbaum-Speicher und im Ebenenbaum erstellen wir ein ‚‘GeoExt.data.store.Features‘‘-Speicher und einen Grid-Bereich.

    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. Unsere letzte GeoExt-Komponente ist eine Übersichtskarte - ‚‘GeoExt.component.OverviewMap‘‘. Wir konfigurieren diese so, dass der OpenStreetMap-Layer angezeigt wird, den wir zuvor erstellt haben, und ihn in einem ExtJS-Bedienfeld platzieren.

    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
});

Erstellen einer Ansicht

Der letzte Schritt beim Erstellen unserer Anwendung besteht darin, ein Ansichtsfenster zu erstellen - einen Container, der die Anwendung darstellt, der alle oben erstellten Komponenten anzeigt.

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

Sie sollten nun in der Lage sein, den Link http://localhost/geoext/demo.html in Ihrem Browser zu aktualisieren und eine vollständige GeoExt-Anwendung ähnlich dem Bild unten anzuzeigen.

../../_images/geoext_quickstart.png

Was kommt als Nächstes?