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