CC BY
17
УДК 004.42
Негодин В.А. студент 4 курса факультет информатики и робототехники ФГБОУВО «Уфимский Государственный Авиационный
Технический Университет» (УГАТУ)
Россия, г. Уфа
ИНТЕГРАЦИЯ КАРТОГРАФИЧЕСКИХ СЕРВИСОВ В СОБСТВЕННЫЕ ВЕБ-ПРИЛОЖЕНИЯ
Аннотация: в наше время самыми популярными являются интернет-технологии, позволяющие работать с программами, не устанавливая их на свое устройство. Поэтому в разработке на данный момент в приоритете являются веб-приложения. Иногда в приложениях появляется необходимость добавления интерактивной карты, для чего и существует картографические веб-сервисы. В статье рассматривается добавление элементов карты из различных картографических сервисов в окно веб-приложения.
Ключевые слова: картографический сервис, Яндекс.Карты, Google Maps, 2GIS, веб-приложение, JavaScript.
Negodin V.A. student
4 course, Faculty of Informatics and Robotics «Ufa State Aviation Technical University» (USATU)
Russia, Ufa
INTEGRATION OF CARTOGRAPHIC SERVICES IN OWN WEB
APPLICATIONS
Abstract: Nowadays, the most popular are Internet technologies that allow you to work with programs without installing them on your device. Therefore, web applications are a priority in development at the moment. Sometimes in applications it becomes necessary to add an interactive map, for which there are cartographic web services. This article discusses the addition of map elements from various map services to a web application window.
Key words: map service, Yandex.Maps, Google Maps, 2GIS, web application, JavaScript.
Введение. В настоящее время основным направлением является развитием веб-приложений, так как они позволяют получить доступ с любого устройства, имеющего доступ к сети Интернет. Веб-приложения не имеют зависимости от платформы устройства, и не занимают место в хранилище клиента. При необходимости добавления карты в веб-приложение сейчас не нужно создавать собственную карту, или добавлять на картинку элементы и размещать ее на сайте - для этого существуют интерактивные картографические веб-сервисы, которые позволяют расположить на карте собственные элементы. Картографические сервисы позволяют на карте
расположить полигональные элементы, линии, точки. Также позволяют в объекте разместить атрибутивную информацию, что позволяет сделать ее более интерактивной. Поэтому на данный момент картографические сервисы являются актуальными. [1]
Картографические сервисы с собственным API. На данный момент существует несколько картографических сервисов, которые имеют собственные API для интеграции в приложения. Самыми популярными являются: Google Maps, Яндекс.Карты и 2GIS.
Google Maps - картографический веб-сервис, созданный в 2005 году. Имеется высококачественная карта планеты Земля. Интегрирована карта автомобильных дорог с прокладкой маршрутов с охватом таких стран, как США, Канада, Япония, Россия, Гонконг, Китай, Ирландия, Великобритания. Имеется собственное приложение «Google Планета Земля», позволяющая просматривать снимки земной поверхности. Позволять отображать снимки вместе с рельефом. Также имеется сервис «Google Street View», позволяющий просматривать панорамы улиц. Мимо API для JavaScript, имеет SDK для приложений Android и iOS.
Яндекс.Карты - поисково-картографический сервис, разработанной компанией Яндекс. В картографическом сервисе «Яндекс.Карты» карты имеют следующее представление: векторные карты, спутниковые снимки и гибрид первых двух. Имеется возможность поиска как по географическим объектам, так и по организациям. API Яндекс.Карт основан на языке программирования JavaScript и не имеет дополнительных SDK для мобильных платформ, в отличии от Google Maps. Имеется поддержка загрузки данных из файла GeoJson. Также имеется поддержка просмотра панорам улиц.
2GIS - картографический справочный сервис, произведенный одноименной компанией 2ГИС. Первый выпуск сервиса 2GIS вышел 25 апреля 1999 года. Имеется как веб-версия сервиса, так и мобильные приложения. Также имеется версия для ПК с оффлайн картами. Одной из интересных особенностей является трехмерная векторная карта. Особенностью сервиса является собственное приложение для звонков 2GIS Dialer. Умеет определять входящие звонки из организаций и позволяет находить нужные номера в каталоге организаций. API также реализовано на языке JavaScript.
Пример интеграции каждого из картографических сервисов.
Пример интеграции карты Google Maps:
<body>
<div id="map"></div> <script> var map;
function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644},
zoom: 8 });
}
</script> <script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback= initMap" async defer></script>
</body>
Изначально создается div элемент с картой, затем добавляется элемент JavaScript с элементами карты, также добавляется ссылка на JavaScript API картографического сервиса. Также имеется добавление собственных элементов на карту.
Пример интеграции карты «Яндекс.Карты»:
<script src="https://api-maps.yandex.ru/2.1/?apikey=<ваш API-ключ>&lang=ru_RU" type="text/javascript"> </script>
<script type="text/javascript"> ymaps.ready(init); function init(){
var myMap = new ymaps.Map("map", { center: [55.76, 37.64], zoom: 7 }); } </script> </head> <body>
<div id="map"style="width: 600px; height: 400px"></div> </body>
Данный сервис также имеет функцию размещению собственных элементов на карту. [2]
Пример интеграции карты 2GIS:
<script src="https://maps.api.2gis.ru/2.0/loader.js?pkg=full"></script> <script type="text/javascript"> var map;
DG.thenfunction () { map = DG.map('map', { center: [54.98, 82.89], zoom: 13
});
DG.marker([54.98, 82.89]).addTo(map).bindPopup('Bhi кликнули
по мне!'); });
</script> </head> <body>
<div id="map"style="width:500px; height:400px"></div>
</body>
Имеет функцию добавления собственных элементов на карту и загрузки элементов карты с файла GeoJSON.
Заключение. Были изучены 3 картографических сервиса: Google Maps, Яндекс.Карты и 2GIS. Все схожи по функционалу и имеют API на основе JavaScript. Но, в отличии от других, картографический сервис «Яндекс.Карты» имеет возможность использования менеджера объектов для работы с большим количеством добавленных объектов на карту.
Использованные источники:
1. Лурье И.К. ЦИФРОВАЯ ЭПОХА В КАРТОГРАФИИ: ОТ АВТОМАТИЗАЦИИ К КАРТОГРАФИЧЕСКИМ СЕРВИСАМ / И.К. Лурье // Вопросы географии. 2017. № 144. С. 15-28.
2. Кочитов М.Е. ИСПОЛЬЗОВАНИЕ ИНТЕРАКТИВНЫХ КАРТ С ПОМОЩЬЮ СЕРВИСА ЯНДЕКС.КАРТЫ НА JAVASCRIPT / М.Е. Кочитов // Постулат. 2019. № 1-1 (39). С. 19.
