Разработка геоинформационной системы позиционирования городских объектов

• Введение
• 1. Техническое задание
• 1.1 Требования к составу и параметрам технических средств
• 1.2 Специальные требования
• 1.3 Анализ технических требований
• 2. Обзор существующих проектов
• 3. Проектирование системы
• 4. Реализация
• 4.1 Реализация отображения информации
• 4.2 Реализация модуля добавления проблемы
• 4.3 Реализация модуля комментирования проблемы
• 5. Контрольный пример
• Заключение
• Список использованной литературы

геоинформационный система позиционирование объект

На сегодняшний день в сфере ЖКХ, дорожного строительства, экологии существует ряд проблем. Работа по решению этих проблем лежит не только на властях, но и на гражданах. В основу принципов демократического общества заложено, что помогать себе должны мы сами.

При составлении планов по ремонту дорожного покрытия во дворах зачастую не учитываются реалии. Ремонтируется участок дороги, который заложен в плане по ремонту, но износ этого участка оказывается значительно ниже, чем участок в 100−200 метрах от него. Стихийно возникающие свалки тоже являются одной из главных проблем в больших и средних городах. Борьба с ними возложена на управляющие компании и городские власти, но зачастую они обходят их стороной, просто не зная о них, или не принимая во внимание жалобы жильцов. Разбитые дороги, текущие крыши, обсыпавшаяся штукатурка в подъезде — всё это проблемы, которые определяют качество и комфорт жителей городов, их настроение. Это те проблемы, которые требуют безотлагательного решения. Разрабатываемая геоинформационная система не позволяет решить данные проблемы сразу. Но дает возможность систематизировать и графически отобразить проблемы, которые существуют на данный момент, и призвана помочь ответственным организациям в составлении планов по ремонту крыш, укладке нового асфальта. Еще одно немаловажное применение данной системы: использование данных предоставленных жителями в отчетах чиновников, ДУКов. Статистические данные помогут очень точно и полно отобразить реальное положение дел на вверенном должностному лицу участке, и, сделать выводы.

Одна из главных задач, которую должна решать разрабатываемая система заключается в предоставлении гражданам возможностей объединяться в борьбе за свои права — право на комфортное и качественное проживание в своем городе, районе, доме.

1. Техническое задание

Назначением разрабатываемой системы является сбор, хранение и отображение информации о состоянии городских объектов. Система реализуется в виде web-сайта и будет доступна через сеть Интернет. Это дает возможность доступа к сервису большинству пользователей компьютеров

1.1 Требования к составу и параметрам технических средств

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

? Фреймворк PHP — CodeIgniter (php 5).

? Базы данных (MySQL 5).

? Фреймворк Javascript — jQuery.

? API Яндекс. Карт (поисково-информационный сервис, который предоставляет пользователям карты крупных городов России и Украины, актуальные данные о пробках, схемы метро и другие возможности).

? API Loginza (система идентификации, обеспечивающая единый доступ к популярным Web-сервисам).

Исходя из вышеизложенных данных, предъявляются следующие минимальные требования к хостингу, на котором будет размещаться система:

Процессор: 2.40 GHz

Память: 256Mb

Диск: 15GB (RAID 10)

Трафик: Без ограничений Порт: 100Mbit

PHP version 5.1+

MYSQL version 5.0.2+

1.2 Специальные требования

Для полноценного использования системы необходима авторизация, так как размещаемый контент должен иметь владельца, который в случае подлога, нарушения правил сайта, нарушения законодательства РФ будет нести ответственность за размещенный контент.

Для регистрации на сайте должна использоваться система идентификации, построенная на протоколе OpenID — пользователь, имеющий учетную запись на одном из следующих сайтов: http://vk.com, http://facebook.com, http://gmail.com, http://yandex.ru, http://mail.ru, имеет возможность быстро войти в систему.

Также программными средствами должны быть введены ограничения на добавление файлов пользователями, размер загружаемого файла фотографии настройками PHP ограничен 5 мегабайтами, это сделано для сохранения места и снижения нагрузки на сервер.

1.3 Анализ технических требований

Требования, применяемые к системе:

1. Пользовательские требования:

1.1 Быстрый доступ.

1.2 Возможность активного участия в работе системы, и необходимые для этого технические и интерфейсные решения.

1.3 Получение информации в полном объеме.

1.4 Возможность высказать свое мнение, дополнить уже существующую информацию.

2. Функциональные требования — вытекают напрямую из пользовательских требований. Задача разработчика — реализовать в web-системе необходимый функционал согласно требованиям технического задания.

2.1 Отсутствие регистрации в привычной форме, с вводом логина, пароля, e-mail и других полей.

2.2 Добавление информации на сайт пользователями через разработанный интерфейс.

2.3 Отображение информации о городских объектах добавленной пользователями.

2.4 Возможность комментирования существующего контента.

2.5 Без участия в комментировании, возможность оставить мнение путем голосования.

2. Обзор существующих проектов

На сегодняшний момент есть ряд организаций, которые пытаются бороться с подобным произволом. Также существует и ряд Интернет-проектов созданных специально для решения подобных проблем:

· http://россиябездураков.рф — проект, целью которого является борьба с нецелесообразными решениями чиновников, борьба с бюрократией и коррупцией.

· http://rosyama.ru — гражданский проект, созданный для борьбы с дорожными проблемами.

· http://imhonn.ru — гражданский проект, работающий по принципу «книга жалоб», в основном преобладают жалобы граждан на некачественный сервис и обслуживание.

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

Часть представленных сайтов имеет схожую структуру и принципы функционирования: пользователи сайта самостоятельно добавляют проблемы, однако не все проекты используют карту для геопозиционирования проблемных объектов. Кроме того, некоторые сервисы имеют достаточно узкую направленность, не имеют возможности для голосования или комментирования.

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

По представлению информации, сайт не имеет привычной ленты публикаций, хотя она доступна в разделе сайта. Система позволяет визуально представить положение дел в различных сферах жизнедеятельности человека.

Одна из главных задач, для решения которой должен разрабатываться данный проект — решение проблем, определяющих качество и комфорт проживания граждан.

3. Проектирование системы

Геоинформационную систему можно условно разделить на несколько функциональных слоев, каждый из которых выполняет набор специфических задач (рис. 3.1).

Рисунок 3.1 — Общая структура веб-приложения Пользователь, обращаясь к сайту, видит внешнюю его реализацию.

Слой HTML — отображает страницу, построенную компонентом PHP (контроллером фреймворка CodeIgniter), пользователю. Также на странице сайта подключены необходимые скрипты и файлы каскадных таблицей стилей (CSS).

Слой PHP в свою очередь разделяется на два логических компонента: модель — компонент отвечает за работу с базой данных, и контроллер — компонент отвечающий за логику работы системы (рис. 3.2).

Таким образом, реализовано разделение: Представление (HTML), Контроллер, Модель (PHP). Данная реализация называется моделью MVC.

Рисунок 3.2 — Схема приложения, работающего по модели MVC

Концепция шаблона проектирования MVC (Model-View-Controller, «Модель-представление-контроллер»): модель данных приложения, пользовательский интерфейс и взаимодействие с пользователем разделены на три отдельных компонента так, что модификация одного из компонентов оказывает минимальное воздействие на остальные (рис. 3.2).

Таким образом, все компоненты системы разделены и выполняют каждый отдельную функцию:

? Модель (Model). Модель предоставляет знания: данные и методы работы с этими данными, реагирует на запросы, изменяя своё состояние. Не содержит информации, как эти знания можно визуализировать.

? Представление, вид (View). Отвечает за отображение информации (визуализация). Часто в качестве представления выступает форма (окно) с графическими элементами.

? Контроллер (Controller). Обеспечивает связь между пользователем и системой: контролирует ввод данных пользователем, и использует модель и представление для реализации необходимой реакции.

Для разработки системы по принципу MVC был выбран популярный MVC фреймворк CodeIgniter с открытым исходным кодом, написанный на языке программирования PHP.

CodeIgniter отличает простота, которая достигается благодаря следующим факторам:

? Качественная и полная документация, а также большое сообщество разработчиков.

? Фреймворк не создает каких-либо структурных ограничений и конвенций.

? От разработчика не требуется использования генераторов кода из командной строки.

? CodeIgniter работает практически на любом хостинговом плане, который имеет поддержку PHP версии 5.1 и выше.

? CodeIgniter считается одним из быстрых и не требовательных к ресурсам Фреймворков.

? Малый размер дистрибутива (размер версии 2.1.1 составляет всего 2.2 Мб).

Фреймворк CodeIgniter включает ряд вспомогательных функций для работы с БД, URL и пр. (helpers), которые позволяют разрабатывать более надежные от ошибок приложения. В данном случае команды:

$this->db->where ('uid', $options['uid']);

$this->db->limit ($options['limit'], $options['offset']);

$this->db->order_by ($options['sortBy'], 'ASC');

$query = $this->db->get ('comments');

заменяют привычный SQL запрос

SELECT * FROM 'comments' WHERE 'uid' = $options['uid'] ORDER BY 'ASC' LIMIT $options['limit'], $options['offset'];

Данный подход более удобен для разработчика, так как риск ошибки минимален и код более читаем.

Слой MySQL — задача слоя: хранение данных, сохранение их целостности, доступности и конфиденциальности. Для разработки информационной системы была выбрана реляционная система управления базами данных MySQL. Она наиболее полно подходит под требования разрабатываемой системы.

MySQL является решением для малых и средних приложений. Эта свободная для распространения СУБД имеет большое сообщество разработчиков.

Гибкость СУБД MySQL обеспечивается поддержкой большого количества типов таблиц, таких как MyISAM, поддерживающих полнотекстовый поиск, так и таблиц InnoDB, поддерживающих транзакции на уровне отдельных записей.

Слой Javascript и CSS файлов — функциональны слой для реализации интерфейса, загрузки данных с помощью AJAX и др.

Для реализации скриптов, используемых в интерфейсе пользователя, был использован популярный фреймворк на языке JavaScript — jQuery.

Библиотека jQuery помогает легко получать доступ к любому элементу DOM на HTML-странице, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими. Также библиотека jQuery предоставляет удобный API по работе с Ajax.

В качестве сервиса получения информации о расположении объектов, а также для визуального отображение информации об объектах используется сервис Яндекс. Карты (API Яндекс. Карт).

Яндекс.Карты — это поисково-информационный картографический сервис Яндекса. Здесь наиболее точно и полно представлены карты России.

Доступен поиск как по географическим объектам (адресам, улицам, городам, регионам и странам), так и по организациям.

Сервис бесплатен.

4. Реализация

Геоинформационная система о городских объектах создавалась двумя разработчиками, каждый из которых отвечал за определенную часть функционала. Данная часть разработки включала:

? реализацию позиционирования городских объектов (добавление и отображение объектов на карте);

? создание необходимого функционала для комментирования проблем на городских объектах.

4.1 Реализация отображения информации

При загрузке главной страницы main. php отображается карта проблем, на которой метками отмечены проблемные городские объекты, добавленные пользователями. Процесс загрузки карты можно условно разделить на два основных этапа:

? Инициализация карты и передача параметров загрузки по умолчанию javascript-файлам map.js (инициализации карты и обработчиков событий на ней) и placemarks.js (файл работы с отображением меток на карте, создание списка меток под картой, подсветка меток на карте при наведении мыши на элемент списка)

? Загрузка меток, удовлетворяющих заданным критериям по средствам HTTP-запроса AJAX-обработчику (контроллер ajax. php)

Этап инициализации включает в себя:

? Создание карты и, в зависимости от передаваемых параметров, выполнение привязки различных обработчиков событий на карте. (Пример: если установлен параметр mapOpts['addEnable'], то необходимо назначить обработчик по двойному клику на карте — добавление информации)

? Создание стилей для разных типов маркеров на карте (дорожные, экологические и др.), а также разные размеры — большие (для основного списка) и в виде точек (для тех точек, которые не продублированы в списке под картой).

? Если передается параметр mapOpts['filter'], то выполнить инициализацию фильтра под картой (рис. 4.1).

Рисунок 4.1 — Отображение информации. Алгоритм

В целом, массив параметров mapOpts содержит настройки для загрузки карты и проблем, таких как количество загружаемых проблем на карту, количество элементов списка под картой, id пользователя (для отображения проблем, добавленных отдельным пользователем, на странице его профиля) и др.

Этап загрузки меток подразумевает выполнение HTTP-запроса с передачей выбранных параметров к контроллеру ajax.php и получение массива точек (рис. 4.2), для последующего отображения их на карте. Функция loadPlacemarks (mapOpts) в файле placemarks.js обрабатывает полученные данные, отображает метки на карте (функция showPlacemark (issue)), при необходимости создает список под картой (функция addItemToList (issue)).

Если вместе с картой проблем используется фильтр (на главной странице), то при изменении параметров в фильтре — выполняется аналогичный асинхронный запрос к контроллеру ajax.php (рис. 4.2) и последующее отображение проблем, удовлетворяющих новым критериям.

Рисунок 4.2 — Обработка AJAX-запросов

4.2 Реализация модуля добавления проблемы

Реализация системы подразумевает обязательную идентификацию пользователя для возможности добавления какого-либо контента, поэтому для отправки проблемы, необходимо выполнить проверку авторизации пользователя в системе. При удачном входе на сайт в базе данных системы и на локальном компьютере пользователя сохраняется уникальный идентификатор. При загрузке страницы контроллер страницы main.php проверяет наличие данного идентификатора. Если пользователь авторизован, то двойной клик по карте открывает форму добавления информации о проблеме на городском объекте (рис. 4.3). Одновременно с этим на карте под указателем мыши появляется маркер, который указывает на расположение городского объекта. Координаты данной метки отправляются HTTP-запросом к сервису геокодирования API Яндекс.Карт. Геокодирование предоставляет возможность поиска объекта, размещённого на карте по географическим координатам и определение его адреса (обратное геокодирование). Поисковый запрос осуществляется с помощью обращения к определённому URL, а результат возвращается в формате JSON (JavaScript Object Notation — простой формат обмена данными, удобный для чтения и написания как человеком, так и компьютером), который содержит список наиболее подходящих адресов. Первый адрес из списка принимается как верный результат геокодирования.

Далее пользователь производит заполнение полей ввода в форме, выбирает тип проблемы и производит прикрепление фотографий иллюстрирующих проблему. После нажатия кнопки «Отправить» данные форм, результаты геокодирования, координаты точки отправляются к обработчику AJAX запросов (рис. 4.2). Данная технология построения интерактивных пользовательских интерфейсов веб-приложений, заключается в асинхронном («фоновом») обмене данными браузера с веб-сервером. Результат обработки данных сервер возвращает в формате JSON. Если в ходе обработки возникли ошибки (заполнены не все обязательные поля, пользователь не авторизован, данные не добавлены в БД), то выдается соответствующее сообщение об ошибке (рис. 4.4). Если данные были успешно добавлены, то форма ввода закрывается и производится повторная загрузка меток на карту с параметрами по умолчанию.

Рисунок 4.3 — Добавления информации. Алгоритм

Работа алгоритма детально проиллюстрирована на UML-диаграмме последовательностей (рис. 4.4).

Рисунок 4.4 — Добавление информации. UML диаграмма последовательности

4.3 Реализация модуля комментирования проблемы

На странице отдельной проблемы вне зависимости от того — авторизован пользователь или нет — выводится лента комментариев. Однако, если пользователь не вошел в систему, то он не имеет возможности оставлять новые комментарии, при этом вместо формы для ввода комментария выводится текстовое предложение входа в систему.

Если пользователь авторизован, то под лентой комментариев выводится форма ввода нового сообщения (рис. 4.5). Кроме этого пользователь имеет возможность ответить на чье-либо сообщение, нажав на кнопку «Ответить» напротив какого-либо сообщения ленты.

Рисунок 4.5 — Комментирование проблемы. Алгоритм При нажатии кнопки «Отправить» параметры (значение текстового поля, ID пользователя, ID проблемы, ID комментария, к которому предназначался ответ — по умолчанию «0») передаются с помощью HTTP-запроса на сервер к обработчику ajax.php в виде JSON-объекта (рис. 4.2). Результатом ответа сервера также будет JSON-объект, который содержит статус операции (выполнена без ошибок/присутствуют ошибки). Если запрос завершился ошибкой, то текст ошибки выводится в специальном окне, иначе, если комментарий был добавлен в базу данных и не присутствует прочих ошибок, то комментарий добавляется в общую ленту.

Если комментарий оставлен в ответ другому сообщению, то при наведении на него курсора комментарий-родитель выделяется цветом, с помощью jQuery.

5. Контрольный пример

Рисунок 5.1 — Главная страница системы Такой видит главную страницу неавторизованный пользователь. В шапке сайта находится ссылка на авторизацию (рис. 5.1). На карте отображены различные типы проблем, при клике по ним открывается балун с текстом проблемы.

Ниже под картой располагаются функциональные переключатели, которые позволяют отфильтровать необходимую нам информацию (рис. 5.3). Так, например можно отобразить проблемы только определенной категории, или вывести последние 9 добавленных проблем. А также, при наведении на проблемы под картой, они подсвечиваются на карте.

Рисунок 5.2 — Карта проблем Рисунок 5.3 — Фильтрация проблем Авторизация через Loginza. API происходит в несколько кликов мыши: выбор провайдера, подтверждение разрешения получения информации от провайдера сервиса через который авторизуемся, подтверждение на нашем сайте, что переданная информация верна (рис. 5.4).

Рисунок 5.4 — Пользователь авторизован в системе После авторизации становится доступен функционал добавления собственной информации об объекте на сайт. Форма вызывается двойным кликом по карте в месте, где существует проблема (рис. 5.5). Выйти из нее возможно нажатие клавиши ESC.

Рисунок 5.5 — Добавление проблемы

При перемещении курсора по карте адрес перестраивается заново. Поэтому если пользователь сразу не смог указать точное место, позднее он может это отредактировать. Пользователь системы может добавить заголовок, текст проблемы и выбрать категорию, к которой она относится, в зависимости от этого выбирается соответствующая иконка, которая отображается на карте. Также пользователь может прикрепить файлы. Стандартным загрузчиком, или же воспользовавшись технологией Drag-and-Drop, просто перенести мышью необходимые файлы на поле добавления.

С главной страницы можно перейти на страницу проблемы.

Рисунок 5.6 — Страница проблемы Страница проблемы содержит: интерактивную миниатюру карту с точкой указанной пользователем, прикрепленные файлы, адрес полученный от сервиса геокодирования API ЯндексКарт, заголовок и описание проблемы, а также дату размещения (рис. 5.6). Также на странице отображается голосование и форма комментирования. Если пользователь авторизован и не голосовал, то ему отображается голосование с возможностью выбора.

Рисунок 5.7 — Форма комментирования Если пользователь авторизован и уже проголосовал или он не авторизован, ему отображаются результаты голосования на данный момент. Также для авторизованных пользователей доступна форма комментирования (рис. 5.7). Для неавторизованных пользователей выводится только обсуждение.

Рисунок 5.8 — Подсветка комментариев Рисунок 5.9 — Страница пользователя На странице пользователя (рис. 5.9) отображается сводная статистика о пользователе. Имя с сервиса, через который он авторизовался, иконка фотографии, условная характеристика на сайте (карма), группа к которой принадлежит пользователь, сколько проблем добавил и сколько оставил комментариев. Также его добавленные проблемы отображены на карте, и список располагается ниже.

Заключение

В процессе проектирования геоинформационной системы, были поставлены и успешно решены следующие задачи:

· Проектирование базы данных.

· Написание модуля авторизации (регистрации).

· Написание модуля добавления информации на сайт от пользователей с применением API Яндекс.Карт.

· Отображение добавленной информации с применением API Яндекс.Карт.

· Комментирование созданного контента.

· Голосование.

Все компоненты системы также необходимо было связать в единую функционирующую систему.

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

Добавление информации на сайт пользователем: модуль полностью реализован, имеет свой, на мой взгляд, удобный интерфейс. Все операции выполняются на Ajax, пользователь без перезагрузки страницы видит, все вносимые изменения. В форме загрузки фотографий, использованы последние технологии в HTML5, такие как Drag-and-Drop. Модуль добавления информации взаимодействует с API Яндекс. Карт, не создавая при этом существенных нагрузок на сервер.

Отображение информации: модуль отображения информации плотно работает с базой данных. Запросы Ajax на различные выборки не создает проблем. Карта с отображением маркеров информации об объектах, интерактивна.

Комментирование: модуль комментирования реализован по технологии Ajax, добавленный комментарий пользователя появляется без перезагрузки страниц. Режим ответов, реализован по принципу подсветки сообщения, на который был дан ответ, при наведении на него мышью.

На данный момент, реализован весь основной функционал системы. Но есть и пути развития. Существуют некоторые варианты доработки безопасности системы, например, введение капчи (CAPCHA) при добавлении информации на сайт, так как сейчас есть потенциальная уязвимость перед DDOS-атаками (возможность отправки данных на сайт каждую секунду). При добавлении комментариев возможно введение тайм-аута на отправку сообщений. Несмотря на это, безопасность остаётся на достаточно высоком уровне, так как PHP фреймворк CodeIgniter позволяет защитить систему от некоторых видов атак, таких как SQL-injection и XSS-атаки.

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

Доработка компонента управления системой: добавление вывода различных выборок (для составления отчетов за периоды, районы), различный функционал для администраторов, редакторов и модераторов, представителей управляющих компаний.

В остальном проект на данный момент самодостаточен и функционирует в режиме альфа-тестирования.

1. Бенкен Е. С. PHP, MySQL, XML: программирование для Интернета. — С. Пб.:BHV, 2008. -570 с.

2. Конверс Т. А. PHP 5 и MySQL. Разработка и внедрение. Библия пользователя. — М.: «Вильямс», 2006. -1216 с.

3. Б. Бибо, И. Кац — jQuery. Подробное руководство по продвинутому JavaScript (2009)

4. MySQL // MySQL 5.1 Reference Manual http://dev.mysql.com/doc/refman/5.1/en/index.html

5. MVC // MSDN — Model-View-Controller http://msdn.microsoft.com/en-us/library/ff649643.aspx

6. CodeIgniter // CodeIgniter User Guide http://codeigniter.com/user_guide/

7. API Яндекс. Карт// JavaScript API http://api.yandex.ru/maps/doc/jsapi/

8. API Loginza // Руководство по Loginza. API http://loginza.ru/api-overview

9. JSON // Введение в JSON http://www.json.org/json-ru.html

10. AJAX // XMLHttpRequest Level 2 http://www.w3.org/TR/XMLHttpRequest/

11. jQuery // jQuery API http://api.jquery.com/

12. OpenID // OpenID specifications http://openid.net/developers/specs/