Gxp

Эта страница является черновиком статьи.

Введение

Назначение

Библиотека OpenLayers является важным звеном в создании картографических web-приложений. Фактически же между простым примером на OpenLayers и полноценным кaртографическим приложением возникает целая пропасть, сравните http://www.openlayers.org/dev/examples/google.html и http://suite.opengeo.org/geoexplorer/composer. Именно для преодоления этой пропасти и служит GXP.

Что такое GXP?

GXP - это клиентская javascript-библиотека, построенная на базе OpenLayers, GeoExt и Ext JS, основной целью которой является предоставление возможности простого создания картографических web-приложений даже неподготовленными пользователями и построение на базе этой библиотеки гибкого фреймворка, позволяющего добавлять в проект новые слои, инструменты и т.п.

Создание простого приложения

Для того что бы создать простейшее приложение с использованием gxp понадобиться следующие компоненты:

1. библиотека gxp;
2. библиотека GeoExt;
3. библиотека ExtJs;
4. библиотека OpenLayers;
5. картографический сервер (например GeoServer или MapServer) или же Tomcat + Geoserver.

Подключение всех компонент можно посмотреть здесь http://gxp.opengeo.org/master/examples/viewer.html. Все необходимые файлы можно найти внутри папок с gxp и других перечисленных выше библиотек. Нужно внимательно подключать компоненты, потому как может получиться так, что у вас на руках может оказаться множество файлов с одинаковыми именами, поэтому прощелкайте каждую ссылку из примера и найдите у себя файл с соответствующим содержанием. Рассмотрим теперь сам код этого простого приложения. Код примера был еще более упрощен для того что бы сфокусироваться только на основных деталях.

Ext.onReady(function() {
    app = new gxp.Viewer({
        proxy: "/geoserver/rest/proxy?url=",
        portalConfig: {
            renderTo: document.body,
            layout: "border",
            width: 650,
            height: 465,       
            items: [{
                id: "centerpanel",
                xtype: "tabpanel",
                region: "center",
                activeTab: 0, 
                border: true,
                items: ["mymap"]
            },{
                // container for the queryform
                id: "west",
                xtype: "container",
                layout: "fit",
                region: "west",
                width: 200
            }],
            bbar: {id: "mybbar"}
        },
        tools: [{
            ptype: "gxp_layertree",
            outputConfig: {
                id: "tree",
                border: true,
                tbar: [] // we will add buttons to "tree.bbar" later
            },
            outputTarget: "west"
        }, {
            ptype: "gxp_layerproperties",
            actionTarget: ["tree.tbar", "tree.contextMenu"]
        }, {
            ptype: "gxp_zoomtoextent",
            actionTarget: "map.tbar"
        }, {
            ptype: "gxp_zoom",
            actionTarget: "map.tbar"
        }, {
            ptype: "gxp_navigationhistory",
            actionTarget: "map.tbar"
        }, {
            ptype: "gxp_wmsgetfeatureinfo",
            outputConfig: {
                width: 400,
                height: 200
            },
            actionTarget: "map.tbar", // this is the default, could be omitted
            toggleGroup: "layertools"
        }, {
            ptype: "gxp_mapproperties",
            outputConfig: {
                title: 'Map properties'
            }
        }, {
            // shared FeatureManager for feature editing, grid and querying
            ptype: "gxp_featuremanager",
            id: "featuremanager",
            maxFeatures: 20
        }, {
            ptype: "gxp_featureeditor",
            featureManager: "featuremanager",
            autoLoadFeature: true, // no need to "check out" features
            outputConfig: {panIn: false},
            toggleGroup: "layertools"
        }, {
            ptype: "gxp_featuregrid",
            featureManager: "featuremanager",
            outputConfig: {
                id: "featuregrid"
            },
            outputTarget: "south"
        }],
        
        // layer sources
        defaultSourceType: "gxp_wmssource",
        sources: {
            local: {
                url: "/geoserver/wms",
                version: "1.1.1"
            },
            mapquest: {
                ptype: "gxp_mapquestsource"
            },
            ol: {
                ptype: "gxp_olsource"
            }
        },
        
        // map and layers
        map: {
            id: "mymap", // id needed to reference map in portalConfig above
            title: "Map",
            projection: "EPSG:900913",
            units: "m",
            maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
            center: [-10764594.758211, 4523072.3184791],
            zoom: 3,
            layers: [{
                source: "ol",
                type: "OpenLayers.Layer",
                args: ["Blank"],
                visibility: false,
                group: "background"
            }, {
                source: "mapquest",
                name: "osm",
                group: "background"
            }],
            items: [{
                xtype: "gx_zoomslider",
                vertical: true,
                height: 100
            }]
        }
    });
});

Основной элемент приложения это gxp.Viewer. Этот плагин (в идиалогии gxp все компоненты библиотеки делятся на плагины, виджиты и так далее) формирует окно приложения, к которое вы можете добавлять интересующие вас элементы такие как панели, гриды, вкладки. Основные поля простого Viewer'a это:

1. items — содержит такие элементы как панели;
2. tools — содержит в себе подключаемые плагины;
3. sources - содержит источники картографической информации;
4. map - ну и собственно карта.

Пройдемся по всем этим элементам.

items

Наше приложение включает в себя две части это — список слоев и окно карты. Поэтому во Viewer добавляется два компонента:

 items: [{
                id: "centerpanel",
                xtype: "tabpanel",
                region: "center",
                activeTab: 0, 
                border: true,
                items: ["mymap"]
            },{
                // container for the queryform
                id: "west",
                xtype: "container",
                layout: "fit",
                region: "west",
                width: 200
            }],

tools

Что бы подключить какой-либо плагин к приложению нужно в общем случае указать его тип и место, где вы хотите его расположить.

            ptype: "gxp_featuremanager",
            id: "featuremanager",
            maxFeatures: 20

Не все добавляемые плагины могут быть отображены в виде кнопок на панелях инструментов. Например, плагин gxp_featuremanager не добавляет функциональности приложению, но используется для работы плагина gxp_featureeditor который уже может редактировать и рисовать объекты на выбранном слое причем не важно WMS это или WFS. Все настройки плагинов можно посмотреть в API.

sources

Этот раздел содержит источники для слоев карты. Можно добавлять как общедоступные источники вроде OSM:

osm: {
                    ptype: "gxp_osmsource"
               }

Так и данные с локального сервера:

local: {
                    url: "/geoserver/ows",
                    title: "Local GeoServer",
                    ptype: "gxp_wmscsource"
                }

Затем данные источники можно использовать в виде слоев карты так и для нужд работы плагинов.

map

Собственно главная часть приложения это карта. Определение карты в gxp мало отличается от ее определения в OpenLayers.

 map: {
            id: "mymap", // id needed to reference map in portalConfig above
            title: "Map",
            projection: "EPSG:900913",
            units: "m",
            maxExtent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
            center: [-10764594.758211, 4523072.3184791],
            zoom: 3,
            layers: [{
                source: "ol",
                type: "OpenLayers.Layer",
                args: ["Blank"],
                visibility: false,
                group: "background"
            }, {
                source: "mapquest",
                name: "osm",
                group: "background"
            }],
            items: [{
                xtype: "gx_zoomslider",
                vertical: true,
                height: 100
            }]
        }

Если вы знакомы с OpenLayers то все настройки будут вам понятны, если нет то лучше начать с OpenLayers. Источники, которые были определены в элементе sources подключаются в виде слоев к карте посредством указания имени источника. И Что бы все элементы отображались необходимо помимо их определения указывать где они будут отображаться. У плагинов для этих целей случит поле actionTarget где указывается место расположения кнопки плагина. Чаще всего для этого служит тулбар какой-либо панели. Для того что бы показать карту ее нужно добавить в итемы выбранной панели.

Недостатки gxp

Хотя gxp мощная библиотека, но все же у нее есть свои недостатки. Стандартный плагин gxp_featureeditor может создавать только точечные объекты. Потому, что инструмент рисования OpenLayers.Controls.DrawFeature настроен только на этот вид объектов. Так, что для того что бы получить полигоны или линии придется изменить код плагина сделав его универсальным, либо создать три копии плагина для каждого вида объектов. Другая неприятность с плагинами в том, что их навесить не на все кнопки. Хотя в документации и указано, что для того что бы сделать это достаточно в поле actionTarget плагина указать идентификатор желаемой кнопки, но этот способ не работает.

Что такое ReadyGXP?

ReadyGXP - это утилита, устанавливающая среду разработки, позволяющую создавать web-приложения и которую можно использовать в качестве простейшего бэкенда.

Ссылки

Скачать библиотеку можно с github'a https://github.com/opengeo/gxp. Там же расположены и ссылки на API и туториал.