GeoExt Quickstart¶

geoext是一个在浏览器中运行的javascript库，它结合并增强了extjs框架和openlayers库。此快速入门详细介绍了使用少于200行代码的geoext组件创建富Web应用程序的步骤。我们将使用osgeolive上已安装的mapserver web服务为应用程序提供映射层。完成以下步骤将导致演示geoext应用程序，网址为http://localhost/geoext/。

Contents

创建HTML页面
配置OpenLayers对象
使用GeoExt组件
创建视口
下一步是什么？

创建HTML页面 ¶

在这个步骤中，我们将设置一个空的HTML页面，其中将包含应用程序。我们将使用OSGeoLive上安装的文本编辑器FeatherPad在 /var/www/html/geoext/demo.html

从具有提升权限的命令行打开FeatherPad，以便可以使用“系统工具”>“QTerminal”保存文件，然后运行以下命令：
```
sudo featherpad
```

下一步粘贴在下面的HTML中，并将文件另存为 /var/www/html/geoext/demo.html . 该文件包含指向ExtJS和OpenLayers JavaScript库的链接，以及两个用于设置ExtJS和OpenLayers组件样式的CSS文件。

我们将使用 Ext.Loader 类加载到geoext javascript源文件中。这些都在 src 文件夹在 /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>

现在您应该可以在Firefox中查看一个空的HTML页面http://localhost/geoext/demo.html

以下部分中的所有JavaScript都应该粘贴在 // all JavaScript application code should go here 中的注释 Ext.onReady 功能。在这里放置代码可以确保在运行任何自定义的javascript代码之前已经加载了javascript库。

配置OpenLayers对象 ¶

接下来，我们将配置应用程序使用的一些OpenLayers对象。

首先，让我们使用OpenStreetMap创建一个地图平铺层，以及一些WMS图层，这些图层可以从OSGeoLive上的mapserveritasca演示中获得。

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

接下来，我们将添加一个WFS矢量层——这有点复杂，但是遵循与前面的层相同的创建源和层的方法：

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

现在，我们将创建用刚刚创建的层配置的Openlayers映射对象。我们还将设置地图的中心和缩放级别，并添加一个选择交互，以便我们可以选择矢量层中的特征。

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

使用GeoExt组件 ¶

现在地图和图层已经配置好了，我们将创建和配置GeoExt组件。

首先，我们将创建一个 GeoExt.component.Map .这将使用我们创建的Openlayers映射，并将定位在应用程序的“中心”区域。
```
var mapComponent = Ext.create('GeoExt.component.Map', {
    map: map,
    region: 'center'
});
```

接下来我们将创建一个层树组件。树有自己的数据存储- GeoExt.data.store.LayersTree ，我们将用Openlayers地图中的图层填充。然后将使用存储填充树面板。我们还将在树中添加一个插件，允许通过拖放层来更改映射层顺序。这个 flex 属性使树面板填充其屏幕区域中的所有可用空间。

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

我们还将创建一个网格组件来显示WFS层中功能的属性。类似于层树存储和树面板，我们创建了一个 GeoExt.data.store.Features 存储和网格面板。

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

我们最后的geoext组件是一个概述图- GeoExt.component.OverviewMap .我们将对此进行配置，以显示先前创建的OpenStreetmap层，并将其放置在extjs面板中。

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

创建视口 ¶

创建应用程序的最后一步是创建一个视区——一个表示应用程序的容器，它将显示我们上面创建的所有组件。

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

现在，您应该能够刷新浏览器中的链接http://localhost/geoext/demo.html，并看到与下图类似的完整geoext应用程序。

下一步是什么？¶

这个 GeoExt homepage 包含完整 API documentation 和例子
A GeoExt workshop 详细介绍在extjs应用程序中配置和使用geoext3的所有步骤
这个 OpenLayers v4.6.5 API docs
这个 ExtJS 6.2.0 API docs

GeoExt Quickstart¶

创建HTML页面¶

配置OpenLayers对象¶

使用GeoExt组件¶

创建视口¶

下一步是什么？¶

创建HTML页面 ¶

配置OpenLayers对象 ¶

使用GeoExt组件 ¶

创建视口 ¶