Web-разработка

Создание клона Google Maps с открытым исходным кодом. Часть 1

28.03.2025

Клон Google Maps с открытым исходным кодом, Albatros

Сервис Google Maps чрезвычайно полезен в повседневной жизни. Раньше, чтобы найти какой-то населенный пункт, надо было узнать дорогу у местных жителей или воспользоваться бумажной картой. Сегодня можно отыскать нужное место в навигационных приложениях вроде Google Maps или Waze, и маршрут будет показан мгновенно.

Будучи программистом, я всегда интересовался принципом работы Google Maps. Как в одном приложении могут помещаться карты всего мира и отображаться с таким коротким временем отклика? Как этот сервис точно определяет местоположение при поиске по имени? Как он генерирует маршрут от одного места до другого, учитывая такие факторы, как тип транспортного средства, улицы с односторонним движением и многое другое?

Рассмотрим процесс создания веб-приложения, подобного Google Maps, с использованием полностью открытых библиотек и бесплатных API. Это руководство не требует предварительных знаний в области геопространственных и географических информационных систем (ГИС), хотя подобная подготовка только пошла бы на пользу. Однако предполагается наличие у вас определенного представления о веб-разработке, включая фронтенд, бэкенд, серверы и API.

Конечно, у Google Maps есть множество функций, но мы остановимся на трех основных:

отображение карты;

поиск интересующих объектов (POI);

определение маршрута между двумя интересующими объектами.

Отображение карты

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

Для отображения карты в браузере необходимы тайл-сервер (сервер фрагментов карты) и библиотека для отображения карт.

Если попытаться быстро увеличить или уменьшить масштаб в Google Maps, можно заметить, что карта загружается фрагментарно, а не как одно большое изображение. Именно так карты отображаются в браузере. Приложение полагается на тайл-сервер, который предоставляет предварительно отрендеренные фрагменты карты при различных уровнях масштабирования. Сервер отправляет только те фрагменты, которые будут отображаться.

Проще говоря, при увеличении масштаба браузер запрашивает и загружает только видимые фрагменты для данного уровня масштабирования. Существует несколько методов отображения карт в интернете, таких как стандарты WMS и WFS. Подробнее об этих методах можно прочитать позже, если вам интересно!

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

Для фронтенда понадобится библиотека, которая будет отображать карту, обеспечивать перемещение и масштабирование, а также обрабатывать запросы фрагментов при изменении представления карты. Для этого я использую Leaflet.js — библиотеку JavaScript с открытым исходным кодом для интерактивных карт. Она предоставляет основные функции картографии, обеспечивая простоту, производительность и удобство использования, поддерживает множество плагинов и предлагает подробно документированный API. Leaflet.js поддерживается в современных UI-фреймворках, таких как React, Angular и Vue.

Основная идея использования Leaflet.js со слоем фрагментов OSM заключается в предоставлении URL фрагмента OSM объекту Leaflet. Ниже представлена минимальная реализация Leaflet.js на HTML и JavaScript:

<html>
<head>
    <title>Leaflet Map Example</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map {
            height: 100vh;
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        // Создание объекта карты 
        var coords = [51.505, -0.09]
        var map = L.map('map').setView(coords, 13); 

        // Добавление слоя фрагментов к карте 
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
         .addTo(map);
    </script>
</body>
</html>

Вот так создается интерактивное картографическое веб-приложение.