Создание простого ГИС-портала на OpenGeo Suite. Часть 4 - GeoExt пользовательский интерфейс (так называемый frontend)

Портал должен отображаться на веб-станице. Для того чтобы сделать её нужно настроить ClientSDK.

Подготовка

• Установить свежую JDK (не JRE!!!) с сайта производителя
• Установить Ant - сайт

Я использовал следующие версии: джава 1.7u17, а Ant 1.9.

В Windows нужно добавить в системную переменную PATH пути к папкам ...\bin этих программ. Например, у меня ......C:\Java\jdk1.7.0_17\bin;C:\Java\apache-ant-1.9.0\bin.

Затем нужно использовать программу CMD.EXE (есть в Windows) или ещё лучше программу Far.exe (скачивается отдельно, бесплатна).

Рис.1 Far и CMD.

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

suite-sdk create path/to/myapp

Например, suite-sdk C:\WORK\OpenGeoSite\app.

C:\OpenGeo Suite\sdk\bin>suite-sdk.cmd create C:\WORK\OpenGeoSite\app
                                                                   
Creating application ...                                            
                                                                   
Buildfile: C:\OpenGeo Suite\sdk\build.xml                          
                                                                   
checkpath:                                                          
                                                                   
create:                                                            
Created dir: C:\WORK\OpenGeoSite\app                                
Copying 1042 files to C:\WORK\OpenGeoSite\app                      
Created application: C:\WORK\OpenGeoSite\app                        
                                                                   
BUILD SUCCESSFUL                                                    
Total time: 9 seconds                                                 

В указанной директории должны будут появиться 2  директории и 3 файла, как на Рис.2

Рис.2 Директория приложения.

Всё! Заготовка готова. теперь выполняйте команду 

suite-sdk debug path/to/myapp

У меня, 

C:\OpenGeo Suite\sdk\bin>suite-sdk.cmd debug C:\WORK\OpenGeoSite\app                                                                                                                      Starting debug server for application (use CTRL+C to stop)                                                                                                                                Buildfile: C:\OpenGeo Suite\sdk\build.xml                                                                                                                                                 checkpath:                                                                                
                                                                                              
debug:                                                                                    
 
0    [main] INFO  org.eclipse.jetty.util.log  - jetty-7.1.6.v20100715                        47   [main] INFO  org.eclipse.jetty.util.log  - Started SelectChannelConnector@0.0.0.0:9080  48   [main] INFO  ringo.httpserver  - Server on http://localhost:9080 started.               

и в браузере (в моём примере FireFox 20) набираем http://localhost:9080

Рис.3 Результат в браузере

Настройка

Вы видим, что страница разделена на две части: слева дерево слоев и слой один (OpenStreeMap), и саму карту (у нас же ГЕОпортал :)), а так же элементы управления - кнопки, для навигации по карте.

Более подробная информация.

Теперь нужно переходить к библиотеке GeoExt. Состоит она из библиотеки ExtJS и библиотеки OpenLayer. Первая добавляет на веб-страницу элементы управления аналогичные настольным приложениям: кнопки, выпадающие списки, деревья, таблицы и прочее, а вторая добавляет элемент управления который показывает карту.

GeoExt удобно объединяет их.

Все эти библиотеки написаны на специальном языке браузеров - JavaScript. 

В директории приложения\src есть файл app.js - это и есть наше приложение-заготовка (но не всё полностью!). Это простой текстовый файл содержащий инструкции на JavaScript.

Далее, я рекомендую использовать какой-нибудь текстовый редактор с подсветкой синтаксиса, например Notepad++.

Найдём следующие строки в app.js

}, {source: "local",

name: "usa:states",           

selected: true

это говорит о том, что должен быть добавлен слой states из workspace'а usa, расположенный в источнике local, но его нет. Для нашего нашего сервера из SDK необходимо явно указать расположение Geoserver. Для этого служит параметр -g после которого указывается URL сервера:

suite-sdk debug -g http://localhost:8080/geoserver /path/to/myviewer

После этого слой с границами штатов можно увидеть, для этого обновите страницу браузера с нашим приложением.


Теперь, используя тот же файл app.js, можно указать созданный в предыдущих статьях слой admin из геосервера, в качестве ещё одного слоя или вместо слоя states.

Пример создания приложения и его запуск в Ubuntu 12.10

Что касается работе в Ubuntu, то это намного проще: установка и настройка JDK, Ant, QGIS происходит из Центра приложений, редактор gedit поддерживает подсветку синтаксиса  много чего ещё полезного и совершенно бесплатно.

На этом я завершаю цикл вводных статей про OpenGeo Suite. Хочется выразить благодарность Victor Olaya за мастер-класс в Москве, осенью прошлого года, по этому замечательному продукту.

Читайте документацию на сайте OpenGeo и по ссылкам в dashboard