Внешняя
функция слоя в GIS WebServer SE для отображения данных PostgreSQL
Автор:
Валерий Стасюк
Достаточно часто при создании геопортала приходится
учитывать, что у пользователя могут быть не только карты, матрицы или
растры, но и связанные с ними данные в каких-то внешних базах данных.
Давайте посмотрим, как можно доработать геопортал, построенный на основе
GIS WebServer SE, чтобы он отображал не только карты, но и данные из базы
данных, связанные с объектами карт.
В нашем примере нужно по нажатию на объект в окне карты
обеспечить вывод небольшой справки с фотографией данного объекта и его
описанием, которые хранятся в базе PostgreSQL. Выглядеть это будет так:
Рисунок 1 - Пример панели с информацией об объекте из
БД PostgreSQL
Реализовать поставленную задачу проще всего с помощью
создания внешней функции для слоя, которая и будет по клику на объект
карты брать данные о нем из БД и выводить на панель.
Данными для нашего георортала будут:
- карта
с нужными нам объектами в формате sitx;
- база
PostgreSQL;
В качестве подложки будем использовать данные web-сервисов Google Maps,
Bing или OpenStreetMap.
Сначала развернем и настроим у себя на компьютере приложения
GIS WebService SE и GIS WebServer SE.
Для GIS WebServer SE заходим на страницу администратора:
http://localhost/GISWebServerSE/admin/admin.php. Пропишем название и описанием
проекта, адрес GIS WebService SE (http://localhost/giswebservicese/service.php).
Координаты центра карты при первом запуске приложения: широта - 50.9171,
долгота - 34.81.
Рисунок 2 - Настройка параметров GIS WebServer SE
На закладке слои добавим нужный нам слой, в данном случае
- Sumy. Смотрите рисунки 3-4.
Рисунок 3 - Добавление нового слоя
Рисунок 4 - Выбор слоя из списка данных предоставляемого
GIS WebService SE
Далее, в разрешениях пропишем пользователя "гость"
право на просмотр данного слоя (рис. 5)
Рисунок 5 - Устанавка для гостя разрешений на просмотр
карт
Далее, в разрешениях пропишем пользователя "гость"
право на просмотр данного слоя (рис. 5)
Создаем таблицу mapObject в базе данных PostgreSQL и
заполняем ее нужной нам информацией про объекты.
Структура таблицы следующая:
id - первичный ключ, автоинкремент (bigserial);
linkSheet - имя слоя (character varying (40));
linkObject - номер объекта (intenger);
description - описание объекта (text);
img - путь к изображению(character varying (50)).
Рисунок 6 - Таблица mapObject в базе PostgreSQL
Примечание: нам обязательно потребуется
установить связи между записями в базе данных и объектами карты. Эту задачу
можно легко решить, используя ГИС "Панорама-Мини". Как подлючить
к карте внешнюю БД и настроить связи можно узнать из этих видеоуроков:
Следующий шаг: напишем скрипт example.js, задача которого
создать панель информации объекта с id = 'descObject' после полной загрузки
страницы. По событию 'featurelistclick' (клик по объекту карты) выполняется
ajax-запрос, который отсылает идентификатор объекта и слоя скрипту myFunc.php
для работы с базой данных.
var myFunc = {
infoObject: $(document).ready(function () {
// Создаем блок для описания объекта id='descObject'
$().ready(function (){
$("#mapPane").append("<div class='objects-panel map-panel-def'
id='descObject' style='display:none' > </div>");
var descobj = $('#descObject');
descobj.append('<div class="panel-info-header"><span>Информация</span><img
src="data:image/gif;base64,R0lGODlhEAAQAMQfAPf39+fn5+Pj4/7+/v39/dvb2/X19eDg4N7e3vP
z8/b29uXl5d3d3fT09Orq6uHh4enp6evr6/n5+dnZ2eLi4ujo6Obm5tra2vj4+NfX19jY2H9/f5+fn9bW1
v///////yH5BAEAAB8ALAAAAAAQABAAAAWN4Cd+SsB0HROM7LegMLy0QqdVmOdhldZRI0unkNMZMYWOhdT
JFI3HTAdQ6VR0G46Os9FVKwgNYJvlaj0ADSJzGRi5WePgomG7yXEd4TI5aAxkHGY6BhoHEB0BWGdcOgEdE
B9NY1BGAFIYH0IXCZUeCRdKIzVKDQQEDUIdAi0RUjFNES0jDg8aGg8OEiwhADs="
title="Закрыть" class="panel-info-close" ></div>');
descobj.append('<div id="textObject"> </div>');
descobj.draggable({containment: 'parent'});
descobj.draggable('option', 'handle' ,'.panel-info-header');
});
//Выбор объекта в окне найденных объектов карты по клику
$('#dvMap').on('featurelistclick', function (ui) {
var obj = ui.gid; //id объекта
var lay = ui.layer; // id слоя
// ajax запрос POST, отпраляем id объекта и слоя
$.ajax({
type: 'POST',
url: 'myFunc.php', // Путь к скрипту php
data: {'idObject':obj,'layer':lay}, // Данные, которые передаем
success: function(data){
var descobj = $('#descObject');
// Делаем блок видимым
descobj.css('display','block');
// Вставляем данные, переданные php скриптом
$('#descObject > #textObject').html(data);
}
});
});
// Функция закрывает панель по клику на крестик
$().ready(function(){
$('#descObject .panel-info-close').click(function(){
$('#descObject').css('display','none');
})
})
})
}
Далее создаем скрипт myFunc.php, с помощью которого
будем извлекать данные из базы данных и выводить информацию.
<?php
$mass = explode('.',$_POST["idObject"]);
$numObj = $mass[1]; // id объекта
$layer = $_POST['layer']; id слоя
// Соединение, выбор базы данных
$dbconn = pg_connect("host=localhost dbname=gis user=postgres ")
or die('Could not connect: ' . pg_last_error());
// Выполнение SQL-запроса
$query = 'SELECT * FROM "mapObject" WHERE "linkSheet"='."'$layer'".'
and "linkObject"='.$numObj;
$result = pg_query($query) or die('Ошибка запроса: ' . pg_last_error());
// Ассоциативный массив
$row = pg_fetch_assoc($result);
// Очистка результата
pg_free_result($result);
// Закрытие соединен
pg_close($dbconn);
// Вывод данных
echo "<img width='280px' src=".$row['img'].">";
echo $row['description'];
if (empty($row)) echo "Нет данных";
?>
Подлючаем скрипт в index.php
<script src="example.js" type="text/javascript"></script>
Еще понадобятся подключить стили
<link href="myStyle.css" rel="stylesheet" />
#descObject {
width: 300px;
height: 300px;
float: left;
position: absolute;
overflow: auto;
text-align: justify;
}
Последний шаг: на странице администратора GIS WebServer
SE указать, что для нашей карты Sumy существует внешнюю функцию - myFunc.infoObject
(рис. 7).
Рисунок 7 - Добавляем внешнюю функцию
Теперь у нас есть простая в реализации внешняя функция
слоя, с помощью которой по клику на объект карты выводится информация
о нем из внешней базы данных.
Скачать текст скрипта >>
|