Слайд 1 из 19

«Интерактивная карта главного здания ГУАП»

Выполнил: Ромашкевич А.О. Руководитель: ассистент каф. 14

гр. 7921ВЦ Абрамов А.Д.

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ Федеральное государственное автономное образовательное учреждение

высшего профессионального образования «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ

АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ»

Дипломный проект:

Санкт-Петербург 2014

Слайд 2 из 19

Слайд 3 из 19

Цель дипломного проекта:

• разработка веб-приложения с интерактивной картой для основного здания ГУАП, предоставляющее пользователям информацию о расположении объектов внутри здания, а также визуализацию кратчайшего пути к конкретным объектам.

Слайд 4 из 19

Основные требования предъявляемые к разрабатываемому приложению:

• Кроссплатформенность; • Адаптивное отображение; • Возможность расширяемости; • Использование бесплатных инструментов и средств для

разработки.

Слайд 5 из 19

Задачи, решаемые в дипломном проекте:

• Провести обзор и анализ технологий для создания интерактивных карт;

• Спроектировать архитектуру веб-приложения; • Разработать пользовательский интерфейс веб-

приложения; • Реализовать модуль рендеринга SVG карт; • Разработать модуль поиска кратчайшего пути,

основанный на алгоритме Дейкстры; • Разработать модуль визуализации маршрута.

Слайд 6 из 19

Инструменты и средства, используемые в ходе разработки

Рис. 1 Фреймворк Twitter Bootstrap

http://getbootstrap.com/

Слайд 7 из 19

Рис. 2 Библиотека Raphaël JS

http://raphaeljs.com/

Инструменты и средства, используемые в ходе разработки

Слайд 8 из 19

Рис. 3 Библиотека Kartograph JS

http://kartograph.org/

Инструменты и средства, используемые в ходе разработки

Слайд 9 из 19

Архитектура веб-приложения

Модуль рендеринга SVG-графики

Модуль поиска кратчайшего пути

Модуль карт Модуль визуализации

маршрута

Слайд 10 из 19

Прототип пользовательского интерфейса

Слайд 11 из 19

Результат работы модуля рендеринга SVG карт

Слайд 12 из 19

Результат работы модуля рендеринга SVG карт

Слайд 13 из 19

Модуль поиска кратчайшего пути

• В основе лежит алгоритм Дейкстры; • Каждый этаж имеет виртуальное описание в виде

графа; • Результатом работы, является объект, хранящий

информацию о метках кратчайшего маршрута.

Слайд 14 из 19

Визуализация маршрута

Слайд 15 из 19

Тестирование адаптивного отображения

http://www.responsinator.com/

640 x 1136 px

Слайд 16 из 19

Тестирование адаптивного отображения

http://www.responsinator.com/

1024 x 768px

Слайд 17 из 19

Нагрузочное тестирование

http://loadimpact.com/

Время загрузки веб-приложения

Количество активных клиентов

Слайд 18 из 19

Заключение

Разработано веб-приложение с интерактивной картой основного здания ГУАП.

Слайд 19 из 19