Привет любителям карт! Вы когда-нибудь задумывались, что нужно для создания платформы геолокации, такой как Google Maps? Что, если я скажу вам, что это вполне возможно сделать с помощью бесплатных технологий с открытым исходным кодом? Звучит захватывающе, не так ли? Итак, приступим!

В этой статье мы рассмотрим создание простого картографического приложения с использованием OpenStreetMap (OSM), Java и среды Spring Boot. Прежде чем мы углубимся, давайте рассмотрим технологии, которые мы будем использовать.

OpenStreetMap (OSM)

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

Весенняя загрузка Java

Spring Boot — это платформа на основе Java с открытым исходным кодом, используемая для создания автономных приложений производственного уровня на основе Spring. Он предназначен для упрощения начальной загрузки и разработки нового приложения Spring.

Обзор приложения

Мы создадим простое приложение, которое позволит пользователям искать местоположение и отображать результат на карте. Вот как мы это сделаем:

  1. Настройте проект Spring Boot.
  2. Реализуйте функцию поиска с помощью Nominatim API OpenStreetMap.
  3. Отобразите результаты с помощью библиотеки Leaflet.js.

Ладно, давайте засучим рукава и приступим к работе!

Шаг 1: Настройка проекта Spring Boot

Самый простой способ создать новый проект Spring Boot — использовать инструмент Spring Initializr. Для нашего проекта нам понадобятся зависимости Web, Thymeleaf и OkHttp3. Как только вы настроите свой проект, импортируйте его в свою любимую IDE.

Шаг 2: Реализация функции поиска

Далее нам нужно реализовать функцию поиска местоположения. Для этого мы будем использовать Nominatim API, поисковую систему для данных OpenStreetMap.

Начнем с создания GeocodingService, который будет взаимодействовать с Nominatim API:

import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.Response;
import org.json.JSONArray;
import org.json.JSONObject;
import org.springframework.stereotype.Service;

import java.io.IOException;

@Service
public class GeocodingService {

    private final OkHttpClient httpClient = new OkHttpClient();

    public JSONObject search(String query) throws IOException {
        Request request = new Request.Builder()
            .url("https://nominatim.openstreetmap.org/search?format=json&q=" + query)
            .build();

        try (Response response = httpClient.newCall(request).execute()) {
            if (!response.isSuccessful()) throw new IOException("Unexpected code " + response);

            JSONArray jsonArray = new JSONArray(response.body().string());

            if(jsonArray.length() > 0) {
                return jsonArray.getJSONObject(0);
            }

            return null;
        }
    }
}

Эта служба отправляет HTTP-запрос к Nominatim API и возвращает первый результат в виде JSONObject.

Шаг 3: Отображение результатов поиска

Для отображения результатов поиска мы будем использовать библиотеку Leaflet.js. Это современная библиотека JavaScript с открытым исходным кодом для мобильных интерактивных карт.

Давайте начнем с добавления Leaflet.js и его файла CSS в наш HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>

Далее нам понадобится элемент div для нашей карты и форма для поля поиска:

<div id="map" style="height: 180px;"></div>
<form th:action="@{/search}" method="post">
    <input type="text" name="query" placeholder="Search for a location" required>
    <input type="submit" value="Search">
</form>

Теперь добавим код Leaflet.js для отображения карты:

<script>
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
    }).addTo(map);
</script>

Этот код инициализирует новую карту и задает вид для заданного местоположения и уровня масштабирования. В строке L.tileLayer мы определяем источник наших фрагментов карты — в данном случае OpenStreetMap.

Шаг 4: Подключение бэкенда к внешнему интерфейсу

Далее нам нужно создать контроллер Spring MVC для обработки наших поисковых запросов:

import org.json.JSONObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.io.IOException;

@Controller
public class GeocodingController {

    @Autowired
    private GeocodingService geocodingService;

    @PostMapping("/search")
    public String search(@RequestParam("query") String query, Model model) {
        JSONObject location;
        try {
            location = geocodingService.search(query);
            model.addAttribute("location", location);
        } catch (IOException e) {
            e.printStackTrace();
        }

        return "index";
    }
}

Этот контроллер вызывает наш GeocodingService и добавляет результат в модель. Затем данные о местоположении можно получить в нашем шаблоне Thymeleaf.

Наконец, нам нужно обновить наш код JavaScript, чтобы отобразить результат поиска на карте:

<script th:inline="javascript">
    /*<![CDATA[*/
    var location = /*[[${location}]]*/ 'default';
    var map = L.map('map').setView([location.lat, location.lon], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
    }).addTo(map);

    L.marker([location.lat, location.lon]).addTo(map)
        .bindPopup(location.display_name)
        .openPopup();
    /*]]>*/
</script>

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

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