Разработка интерактивной карты городского пассажирского транспорта г. Ижевска

Размещено на http://www.allbest.ru/

Министерство образования и науки РФ

ФГБОУ ВПО «Удмуртский государственный университет»

Факультет информационных технологий и вычислительной техники

Кафедра высокопроизводительных вычислений и параллельного программирования

Контрольная работа

«Разработка интерактивной карты ГПТ г. Ижевска»

Выполнили Сарварова Г.М., Столярова Е. А.

Принял: Клочков М. А.

Ижевск 2012



Содержание

Введение

1. Обзор популярных карт общественного транспорта г. Ижевска

2. Описание средства разработки интерактивной карты

3. Описание основных этапов разработки

4. Листинг программы

Заключение

Список использованных источников



Введение

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

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

Целью данной работы является разработка интерактивной карты маршрутов городского пассажирского транспорта города Ижевска.



1. Обзор карт общественного транспорта г. Ижевска

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

Рассмотрим существующие проекты электронных карт общественного транспорта г. Ижевска.

Проект 3DГИС (http://www.gis3d.ru/)

3DГИС - это электронная карта-справочник города Ижевска.

Основные возможности программы:

· Трехмерная карта города Ижевска

· Структурированный каталог организаций

· Поиск по адресу

· Подробная информация об организации

· Просмотр и поиск маршрутов общественного транспорта

· Поиск остановок транспорта



Рис. 1. Главная оконная форма проекта 3DГИС.

электронный интерактивный карта программный

Проект «КОНТАКТ-НАВИГАТОР» (http://k-navigator.ru/)

«КОНТАКТ-НАВИГАТОР» - это первая и единственная справочно-информационная система, объединенная с картой городов Ижевск Киров Глазов и Воткинск.

Основные возможности программы:

· Трехмерная карта города Ижевска

· Каталог организаций

· Поиск по организации

· Поиск по адресу

· Просмотр и поиск маршрутов общественного транспорта

· Поиск остановок транспорта

Характеристики справочника и карты в системе «Контакт-Навигатор» по г. Ижевск Киров Глазов Воткинск



Рис. 2. Главная оконная форма проекта К-Навигатор.

2. Описание средств разработки интерактивной карты

Яндекс. Карты -- это поисково-информационный сервис, предоставляющий пользователям карты крупных городов России, Украины, Белоруссии, Казахстана и других стран СНГ, актуальные данные о пробках, схемы метро и другие возможности.

Пользователи имеют возможность размещать карты Яндекса или собственные карты на своих веб-страницах. Для этого существует бесплатный инструментарий -- API Яндекс. Карт и соответствующая документация.

API Яндекс. Карт позволяет манипулировать любыми картами -- то есть изображениями местности или любых объектов, каждой точке которых соответствуют определённые двумерные координаты.

Пользователи, которых интересует территория нашей планеты и, в особенности России и республик бывшего СССР, могут воспользоваться изображениями местности, предоставляемыми Яндексом. Яндекс предоставляет три набора изображений поверхности земного шара: схема, спутниковая карта и гибридное представление.

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

Рис. 3. Фрагмент Яндекс.Карт.

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

Сервис Яндекс.Карт обладает значительной аудиторией, с которой организована обратная связь. Учет замечаний и пожеланий пользователей, которые практически «с лупой» исследуют карты и сопоставляют их с местностью, позволяет непрерывно улучшать качество карт Яндекса. API Яндекс.Карт является отличным инструментом для создания собственных электронных интерактивных карт -- схемы офиса и подземных коммуникаций, плана корабля или просто навигатора по фотографии высокого разрешения.

API Яндекс.Карт позволяет формировать карты двух типов -- интерактивные и статические.

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

Для взаимодействия с пользователем в области карты может быть размещён набор специальных элементов управления -- как стандартных («лупа», «линейка» и пр.), так и определённых пользователем.

Интерфейс интерактивных карт, как программный, так и пользовательский реализован на JavaScript.

API Яндекс.Карт поддерживает возможность формирования карт определённых участков местности в виде обычных изображений -- т. н. статических карт. Статические карты генерируются с помощью HTTP-запросов. Так, изображение карты можно получить просто введя определённый адрес в адресной строке браузера.

API Яндекс.Карт позволяет получать статические изображения карт Яндекса, но не поддерживает формирование изображений пользовательских карт, созданных с помощью JavaScript API.

При работе с картами часто используется такой приём как размещение на изображении местности различных графических объектов. Это могут быть метки, «всплывающие» подсказки, линии, многоугольники и другие элементы.

API Яндекс.Карт содержит набор программных компонентов, реализующих отображение наиболее часто используемых графических объектов. Причём объекты могут размещаться как на интерактивных картах с помощью JavaScript, так и на статических изображениях местности с помощью обычных HTTP-запросов.

Интерактивность электронных карт подразумевает их реакцию на действия, совершаемые пользователем, например, на нажатие кнопки изменения масштаба. Когда пользователь совершает какие-либо действия в активной области карты, генерируются события. API Яндекс.Карт позволяет отслеживать эти события и программировать реакцию на их возникновение.

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

Реализованный в API Яндекс.Карт механизм обработки событий является хорошей базой для создания интерактивных картографических веб-приложений.

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

API Яндекс.Карт значительно упрощает задачу поиска объектов на местности. Для этого разработаны инструменты, позволяющие выполнять следующие действия:

Определение координат объекта по его адресу или названию -- геокодирование (JavaScript API и HTTP-запрос).

Определение адреса объекта по географическим координатам -- обратное геокодирование (JavaScript API и HTTP-запрос).

Поиск станций метро, находящихся наиболее близко к точке с заданными координатами (JavaScript API, модуль Метро).

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

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

· Пользовательское соглашение службы «API Яндекс.Карты».

· Пользовательское Соглашение службы "Яндекс.Карты".

· Пользовательское соглашение Яндекса.

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

3. Описание основных этапов разработки

Ш Регистрация в Яндекс

Ш Создание сайта (izhgpt.narod2.ru)

Ш Получение ключа API

Ш Создание программы на JavaScript

o Возможность передвижения по карте

o Возможность масштабирования

o Возможность измерять расстояние

o Возможность ставить метки

o Возможность поиска

o Вставка меток остановок общественного транспорта

Ш Вставка кода программы на сайт



Рис. 4 Разработанная интерактивная карта.

4. Листинг программы

<script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript"></script>

<script type="text/javascript">

try { var yaCounter13698901 = new Ya.Metrika({id:13698901});}

catch(e) { }

</script>

<noscript>&lt;div&gt;&lt;img src="//mc.yandex.ru/watch/13698901" style="position:absolute; left:-9999px;" alt="" /&gt;&lt;/div&gt;</noscript>

<!-- /Yandex.Metrika counter -->

<div class="b-body">

<table class="layout">

<colgroup><col width="15%"><col width="25%"><col width="60%">

</colgroup><tbody><tr>

<td style="width: 15%;">

<div class="holster">

</div>

</td>

<td>

<div class="holster">

</div>

</td>

<td>

<div class="holster">

</div>

</td>

</tr>

</tbody></table>

<table class="layout">

<colgroup><col width="80%"><col width="20%">

</colgroup><tbody><tr>

<td>

<div class="holster b-main">

<div class="block_container s3 b-counter b-widget " id="e_133356821045">

<title>Редактор Яндекс.Карт</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="http://api-maps.yandex.ru/1.1/?key=AAqjfE8BAAAAe4OxfwMAaBZV5H5vZi2eCmSoZFs_BPUCUXwAAAAAAAAAAAAEyJlyCvTiXp7R8Q4G6QIpfo_a1Q==" type="text/javascript"></script><link rel="stylesheet" href="http://api-maps.yandex.ru/1.1.21/_YMaps.css"><script type="text/javascript" charset="utf-8" src="http://api-maps.yandex.ru/1.1.21/_YMaps.js"></script><script type="text/javascript" charset="utf-8" src="http://api-maps.yandex.ru/1.1.21/xml/data.xml?v=1.86.4"></script><link rel="stylesheet" href="http://api-maps.yandex.ru/1.1.21/_YMaps.css"><script type="text/javascript" charset="utf-8" src="http://api-maps.yandex.ru/1.1.21/_YMaps.js"></script><script type="text/javascript" charset="utf-8" src="http://api-maps.yandex.ru/1.1.21/xml/data.xml?v=1.86.4"></script>

<script language="JavaScript" type="text/javascript">

var map;

// Создание обработчика для события window.onLoad

YMaps.jQuery(function () {

// Создание экземпляра карты и его привязка к созданному контейнеру

map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);

// Установка для карты ее центра и масштаба

map.setCenter(new YMaps.GeoPoint(53.225241,56.849384), 16);

map.addControl(new YMaps.Zoom());

map.addControl(new YMaps.TypeControl());

map.addControl(new YMaps.SearchControl());

var toolbar = new YMaps.ToolBar();

var pointBootion = new YMaps.ToolBarRadioButton(YMaps.ToolBar.DEFAULT_GROUP, {

icon: "http://api.yandex.ru/i/maps/tools/draw/add_point.png",

width: 20,

hint: "Режим добавления меток"

});

toolbar.add(pointBootion);

var plineBootion = new YMaps.ToolBarRadioButton(YMaps.ToolBar.DEFAULT_GROUP, {

icon: "http://api.yandex.ru/i/maps/tools/draw/add_line.png",

width: 20,

hint: "Режим добавления линии"

});

toolbar.add(plineBootion);

var polygonBootion = new YMaps.ToolBarRadioButton(YMaps.ToolBar.DEFAULT_GROUP,{

icon: "http://api.yandex.ru/i/maps/tools/constructor/add_polygon.png",

width: 20,

hint: "Режим добавления многоугольника"

});

toolbar.add(polygonBootion);

map.addControl(toolbar);

// При активной кнопке включаем добавление меток

YMaps.Events.observe(pointBootion, pointBootion.Events.Select, function () {

YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {

var newGeoPoint = mEvent.getGeoPoint();

YMaps.jQuery("#image").change(function() {

YMaps.jQuery("#imagePreview").empty();

if ( YMaps.jQuery("#image").val()!="" ){

YMaps.jQuery("#imagePreview").append("<img src=\"" + YMaps.jQuery("#image").val() + "\" />");

}

else{

YMaps.jQuery("#imagePreview").append("displays image here");

}

});

YMaps.jQuery("#formpoint").show();

document.getElementById('point_lat').value = newGeoPoint.getLng();

document.getElementById('point_lng').value = newGeoPoint.getLat();

})

})

// При неактивной - выключаем

YMaps.Events.observe(pointBootion, pointBootion.Events.Deselect, function () {

map.removeCursor(YMaps.Cursor.POINTER);

YMaps.jQuery("#formpoint").hide();

})

});

function addMarker() {

var overlayName = YMaps.jQuery('#overlayName').attr('value');

var overlayDescription = YMaps.jQuery('#overlayDescription').attr('value');

var ZnMetki = YMaps.jQuery('select[@name=image] option:selected').text();

var LatMetki = YMaps.jQuery('#point_lat').attr('value');

var LngMetki = YMaps.jQuery('#point_lng').attr('value');

var placemark = new YMaps.Placemark(new YMaps.GeoPoint(LatMetki, LngMetki), {hasHint: true, style: ZnMetki});

// Устанавливает содержимое балуна

placemark.name = overlayName;

placemark.description = overlayDescription;

// Добавляет метку на карту

map.addOverlay(placemark);

}

</script>

<script>window["_GOOG_TRANS_EXT_VER"] = "1";</script>

<div id="formazn" style="margin-left: 820px; width=" 250px"="">

<div id="formpoint" style="">

<p><strong>Форма ввода параметров остановки</strong></p>

<br>

Название: <input type="text" name="overlayName" id="overlayName" size="32"><br>

Описание: <textarea name="overlayDescription" id="overlayDescription" rows="2" cols="30"></textarea><br><br>

Широта: <input id="point_lat" type="text" size="25"><br>

Долгота: <input id="point_lng" type="text" size="25">'

<p><input name="addMarker" type="button" onclick="addMarker()" value="Добавить"></p>

</div>

</div>

</div>

</div>

</div>

</td>

<td style="width: 20%;">

<div class="holster">

</div>

</td>

</tr>

</tbody></table>

<table class="layout">

<colgroup><col width="33%"><col width="34%"><col width="33%">

</colgroup><tbody><tr>

<td style="width: 33%">

<div class="holster">

</div>

</td>

<td>

<div class="holster">

</div>

</td>

<td style="width: 33%">

<div class="holster">

</div>

</td>

</tr>

</tbody></table>

</div>

</body>



Заключение

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

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



Список использованных источников

1. http://api.yandex.ru/maps/

2. http://www.gis3d.ru/

3. http://k-navigator.ru/

4. Майкл Монкур «Освой самостоятельно JavaScript за 24 часа» 2-е издание. Издательство «Вильямс», 2001

Размещено на Allbest.ru