Внешняя функция слоя в 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 - Добавляем внешнюю функцию
 

Теперь у нас есть простая в реализации внешняя функция слоя, с помощью которой по клику на объект карты выводится информация о нем из внешней базы данных.

   Скачать текст скрипта >>