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

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

Волжский политехнический институт (филиал) Волгоградский государственный технический университет

Технические науки

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

Бородавченко Денис Викторович, студент

Рыбанов Александр Александрович, кандидат наук, доцент, заведующий кафедрой



Статья посвящена реализации взаимодействия Google Maps API с базой данных MySQL, содержащей картографические данные.

Целью программной разработки - обеспечить возможность вывода на карту объектов, извлеченных из базы данных [1, 6, 9, 12], а именно - координат маркеров карты, информации об объектах. Для реализации были использованы такие инструменты, как GoogleMapsAPI и MySQL [4, 8, 11].

Google Maps API позволяет создавать приложения используя спутниковые снимки, технологию просмотра улиц, карты рельефа, маршруты для водителей, стилизованные карты, аналитические данные, огромную базу адресов и другие возможности картографической платформы Google [5].

В качестве источника картографических данных, визуализация которых необходима, используется база данных MySQL.

Работа с Google Maps API

Чтобы добавить на страницу своего сайта карту нужно подключить js скрипт:

Листинг 1.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ& sensor=false"> </script>

Далее в теле документа необходимо создать который будет содержать в себе карту.

Листинг - 2.

<div id="map "></div>

Следующим этапом является инициализация карты. Функцию navigator.geolocation.getCurrentPosition() передаются текущие координаты пользователя, на основе которых определяется географическое положение пользователя.

Листинг 3.

navigator.geolocation.getCurrentPosition(function(position) {

var latitude = position.coords.latitude;

var longitude = position.coords.longitude;

varcoords = new google.maps.LatLng(latitude, longitude);

varmapOptions = { zoom: 13, center: coords, mapTypeControl: true,

navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},

mapTypeId: google.maps.MapTypeId.ROADMAP};

var map = new google.maps.Map(document.getElementById("map"), mapOptions );}

При инициализации карты, используя переменную mapOptions, можно определить следующие параметры:

1. center: <координаты> - координаты центра карты;

2. zoom: <число> - увеличение при инициализации;

3. mapTypeControl: <bool> - отвечает за скрытие и отображение переключателя типов карт;

4. navigationControlOptions - внешний вид для панели навигации (маштабирование и панарамирование) карты;

5. google.maps.NavigationControlStyle.SMALL - элемент масштабирования, который позволяет масштабировать карту;

6. mapTypeId - тип (политическая, физическая, гибрид);

7. google.maps.MapTypeId.ROADMAP - один из типов карт, в данном случае обычная карта;

Затем в переменной map создается сам объект карты, который помещается в с идентификатором «map» на HTML странице, вместе со всеми опциями. Результат инициализации карты показан на рис. 1.



Рисунок 1. Инициализированная карта на веб-странице.

Для отрисовки маркеров на карте необходимо использовать функцию new google.maps.Marker().

Листинг 4.

new google.maps.Marker({

position: coords,

map: map,

title: "Your current location!"});

В функцию new google.maps.Marker передаются следующие параметры:

1. position: <координаты> - координаты метки;

2. map: <идентификатор карты> - на какую карту, помещается метка;

3. title: <string>- сообщение, выдаваемое при наведении курсора мыши.

Для того чтобы по нажатию на маркер выводилось информационное окно с данными необходимо инициализировать данные и затем использовать функцию google.maps.event.addListener() для добавления события открытия окна после клика мыши по маркеру.

Листинг 5.

var infowindow = new google.maps.InfoWindow();

google.maps.event.addListener(markers[i], 'click',

function () { //ВЫВОД ОКНА С ИНФОРМАЦИЕЙ

infowindow.setContent(this.buborek);

infowindow.open(map, this); });

В функции используются следующие параметры:

1. markers[i]- массив маркеров на которые требуется выводить окна;

2. infowindow.setContent - устанавливает содержимое окна из текущего маркера.

3. infowindow.open(map,this) - отрисовывает окно на карту.

На рис. 2 приведен пример визуализации маркера и окна, с информацией об учебном заведении.

Рисунок 2. - Маркер и информационное окно

Вывод картографической информации из базы данных MySQL

Ниже приведен листинг процесса подключения к базе данных и извлечения из нее картографической информации посредством SQL запроса.

Листинг 6.

exec('SET CHARACTER SET utf8');

$res=$dbh->query("SELECT * FROM uchzav,info WHERE uchzav.id=info.id");

//Занесение данных из БД в массив

$mass=[];

while ($row=$res->fetch(PDO::FETCH_ASSOC))

{

$mass[]=array( 'name'=>$row['Name'],

'lat'=>$row['Lat'],

'lng'=>$row['Lng'],

'adr'=>$row['Adress'],

'contact'=>$row['Contact']);

};

//Кодировка массива в json формат с учетом кириллицы

$json=json_encode($mass,JSON_UNESCAPED_UNICODE);

header("Content-Type: text/html; charset=utf-8");

echo $json;

?>

В переменных host, user, pass, db_name записаны параметры для подключения к базе данных, которые используются в качестве параметров в функции создания подключения PDO. Для передачи картографических данных в JavaScript [2], необходимо произвести кодировку полученного массива данных в JSON формат при помощи функции json_encode().

Ниже приведена структура базы данных с картографической информацией. база данный картографический маркер

Листинг 7.

CREATE TABLE info (

id int(11) NOT NULL,

Adress varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,

Contact varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL

) ENGINE=InnoDB;

INSERT INTO info (id, Adress, Contact) VALUES

(1, 'г.Волжский, ул. Пушкина 1', 'school20@school.ru'),

(2, 'г.Волжский, ул. Карбышева 1', 'school18@school.ru'),

(3, 'г.Волжский, ул. Пионерская 1', 'school12@school.ru'),

(4, 'г.Волжский, ул. Космонавтов 1', 'school14@school.ru'),

(5, 'г.Волжский, ул.Машиностроителей 15', 'vl-vmt.ru'),

(6, 'г.Волжский, ул.Набережная 1 ', 'volpt.ru');

CREATE TABLE uchzav (

id int(11) NOT NULL,

Name varchar(256) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL,

Lat float NOT NULL,

Lng float NOT NULL

) ENGINE=InnoDB;

INSERT INTO uchzav (id, Name, Lat, Lng) VALUES

(1, 'МБОУ СОШ №20', 48.7926, 44.7684),

(2, 'МБОУ СОШ №18', 48.7899, 44.7607),

(3, 'МБОУ СОШ №12', 48.7733, 44.7812),

(4, 'МБОУ СОШ №14', 48.7961, 44.7515),

(5, 'Волжский машиностроительный техникум', 48.7868, 44.772),

(6, 'Волжский политехнический техникум', 48.8079, 44.7293);

Для переноса, закодированного JSON массива в JavaScript, необходимо выполнить AJAXзапрос в JavaScript файле:

Листинг 8.

$.ajax({

url:'output.php',//запрос данных из базы

type:'POST',

data: {},

success: function(res) {

res1=[];

res1 = JSON.parse(res);//парсинг в массив

} });

Используются следующие параметры запроса:

1. url: <string> - определяет адрес, на который будет отправлен запрос.

2. type: <string> - определяет тип выполняемого запроса (GET или POST).

3. data: <oбъект> - данные, которые будут отправлены на сервер.

4. success: <функция, массив> - функция, которая будет вызвана в случае удачного завершения запроса к серверу.

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

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

Листинг 9.

for (var i = 0; i<= res1.length; i++)

{

var info = '<p>' + res1[i].name + '</p>' + '<p>' + res1[i].adr + '</p>' + "<p>"

+ res1[i].contact + '</p>';

contentStr = '<p>' + info + '</p>';

markers[i] = new google.maps.Marker({

position: new google.maps.LatLng(res1[i].lat, res1[i].lng),

title: res1[i].name,

map: map,

buborek: contentStr

});

google.maps.event.addListener(markers[i], 'click',

function () { //ВЫВОД ОКНА С ИНФОРМАЦИЕЙ

infowindow.setContent(this.buborek);

infowindow.open(map, this);

});

markers[i].setMap(map);

}

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

Рисунок 3. - Вывод на карту картографических данных из БД



Заключение

Таким образом, работа с картами и базами данных картографической информации [3, 7, 10] значительно упрощает вывод любой информации на карту. Весь процесс работы можно разделить на следующие этапы:

1. Извлечение картографических данных из базы данных;

2. Кодирование полученных данных в JSON формат;

3. Парсинг картографических данных в JavaScript;

4. Визуализация полученных картографических данных на карте.



Список литературы

1. Азаров А.В., Рыбанов А.А. Автоматизированная система расчета метрических характеристик физической схемы базы данных с целью оценки трудоемкости процесса проектирования // Современная техника и технологии. 2014. № 5 (33). С. 39.

2. Жуйков Р., Шарыгин Е. Методы предварительной оптимизации программ на языке javascript // Труды Института системного программирования РАН. 2015. Т. 27. № -6. С. 67-86.

3. Кузьмин А.А., Рыбанов А.А. исследование методов количественной оценки схем реляционных баз данных // Успехи современного естествознания. 2011. № 7. С. 137-138.

4. Морозов А.О., Рыбанов А.А. Разработка автоматизированной системы расчета метрических характеристик mysql базы данных на основе концептуального графа физической схемы // NovaInfo.Ru. 2015. Т. 2. № 34. С. 34-48.

5. Радоуцкий К.Е., Островская Е.А., Сейфиева Р.А., Фарионик В.А. Использование api google maps для создания пользовательских геоинформационных систем // Iнформацiйно-керуючi системи на залiзничному транспортi. 2013. № 6. С. 6-9.

6. Рыбанов А.А. Анализ базовых возможностей программных продуктов для исследования метрических характеристик баз данных // NovaInfo.Ru. 2015. Т. 2. № 33. С. 20-28.

7. Рыбанов А.А. Оценка сложности физической схемы реляционной базы данных//Современная техника и технологии. 2014. № 9 (37). С. 26-30.

8. Рыбанов А.А., Коростелев Р.А., Киселев В.В. IDEF1X-модель базы данных web-ориентированной информационной системы оценки семантического качества меню пользователя // Молодой ученый. 2013. № 5. С. 170-172.

9. Рыбанов А.А., Морозов А.О. Автоматизация расчета метрических характеристик физических схем баз данных на основе концептуальных графов // Молодой ученый. 2014. № 9 (68). С. 26-30.

10. Рыбанов А.А., Усмонов М.С.О., Попов Ф.А., Ануфриева Н.Ю., Бубарева О.А. Информационные системы и технологии / Научный ред. И. А. Рудакова / Центр научной мысли (г. Таганрог). Москва, 2013. Том Часть 4. -90 с.

11. Рыбанов А.А., Фатеенков М.М. Разработка и анализ хранимой процедуры для получения глубины дерева связей таблицы и схемы базы данных // NovaInfo.Ru. 2015. Т. 1. № 34. С. 41-55.

12. Черняев А.О., Рыбанов А.А. Разработка и исследование алгоритмов автоматизированного проектирования логических схем реляционных баз данных // В мире научных открытий. 2010. № 4-11. С. 128-129.

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