terrestris GmbH & Co. KG

GeoExt 2.0

Inhalt

Vorheriges Thema

1. Grundlagen

Nächstes Thema

1.2. Analyse der Karten Anwendung

1.1. Erstellen eines Kartenfensters

In GeoExt - nach den Konventionen des zugrundeliegenden Ext JS frameworks - wird eine Karte in ein Ext.panel.Panel eingebunden. Die eigentliche Karte ist ein OpenLayers.Map-Objekt.

Dabei is es wichtig zu verstehen, dass Ext JS ein Web-Anwendungs-Paradigma verwendet, dass sich an Paradigmen einer Web-Seite anlehnt. Das heißt, dass wir kein markup (HTML) schreiben werden. Die Grundbausteine sind:

1.1.1. Funktionsfähiges Beispiel

Schauen wir uns einmal ein Beispiel einer simplen GeoExt-Anwendung an:

<!DOCTYPE html>
<html>
    <head>
        <title>Test map | GeoExt 2.0 workshop</title>

        <link rel="stylesheet"
        href="http://workshops.terrestris.de/libs/ext-4.2.1.883/resources/css/ext-all.css" />
        <link rel="stylesheet"
        href="http://workshops.terrestris.de/libs/OpenLayers-2.13.1/theme/default/style.css" />

        <style>

        .olControlAttribution {
            right: 0;
            bottom: 0;
            padding: 2px;
            background: #ededed;
            border-top: 1px solid #ccc;
            border-left: 1px solid #ccc;
            border-top-left-radius: 5px;
        }
        .olControlAttribution,
        .olControlAttribution a {
            color: #333;
        }

        </style>

        <script src="http://workshops.terrestris.de/libs/ext-4.2.1.883/ext-dev.js"></script>

        <!-- You should definitely consider using a
        custom single-file version of OpenLayers -->
        <script src="http://workshops.terrestris.de/libs/OpenLayers-2.13.1/OpenLayers.js"></script>

        <script>
        Ext.Loader.setConfig({
            enabled: true,
            disableCaching: false,
            paths: {
                GeoExt: "http://workshops.terrestris.de/libs/geoext2-2.0.0/src/GeoExt",
                Ext: "http://workshops.terrestris.de/libs/ext-4.2.1.883/src"
            }
        });
        </script>


        <script>
        OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url=";

        Ext.require([
            'Ext.container.Viewport',
            'Ext.layout.container.Border',
            'GeoExt.panel.Map'
        ]);

        var items = [];

        Ext.onReady(function() {

            var mapPanel = Ext.create('GeoExt.panel.Map', {
                border: false,
                region: 'center',
                map: {
                    numZoomLevels: 19,
                    projection: new OpenLayers.Projection('EPSG:900913'),
                    controls: [
                        new OpenLayers.Control.Navigation(),
                        new OpenLayers.Control.Attribution(),
                        new OpenLayers.Control.PanPanel(),
                        new OpenLayers.Control.ZoomPanel()
                    ]
                },
                layers: [
                     new OpenLayers.Layer.WMS(
                        "OWS-WMS",
                        "http://ows.terrestris.de/osm/service?",
                        {layers: "OSM-WMS"},
                        {isBaseLayer: false}
                    )
                ],
                extent: [
                    1476801.5360728,6887465.251975,
                    1509344.6008606,6901262.1355786
                ]
            });
            items.push(mapPanel);

            // Create a viewport including the map panel
            Ext.create('Ext.container.Viewport', {
                layout: 'border',
                items: items
            });
        });

        </script>
    </head>
    <body>
    </body>
</html>

Tasks

  1. Kopieren Sie den Code in einen datei mit dem Namen map.html, und speichern Sie die Datei in ihrem workshop Ordner.
../_images/map2.png

Eine simple Karte, zentriert auf Berlin.

Nachdem wir unsere erste GeoExt-Applikation erfolgreich erstellt haben, schauen wir uns die einzelnen Elemente noch einmal genauer an: Die Elemente.