Привет любителям карт! Вы когда-нибудь задумывались, что нужно для создания платформы геолокации, такой как Google Maps? Что, если я скажу вам, что это вполне возможно сделать с помощью бесплатных технологий с открытым исходным кодом? Звучит захватывающе, не так ли? Итак, приступим!
В этой статье мы рассмотрим создание простого картографического приложения с использованием OpenStreetMap (OSM), Java и среды Spring Boot. Прежде чем мы углубимся, давайте рассмотрим технологии, которые мы будем использовать.
OpenStreetMap (OSM)
OpenStreetMap — это совместный проект по созданию бесплатной редактируемой карты мира. Данные можно использовать бесплатно по открытой лицензии, что означает, что вы можете использовать их для создания собственной картографической платформы без каких-либо ограничений.
Весенняя загрузка Java
Spring Boot — это платформа на основе Java с открытым исходным кодом, используемая для создания автономных приложений производственного уровня на основе Spring. Он предназначен для упрощения начальной загрузки и разработки нового приложения Spring.
Обзор приложения
Мы создадим простое приложение, которое позволит пользователям искать местоположение и отображать результат на карте. Вот как мы это сделаем:
- Настройте проект Spring Boot.
- Реализуйте функцию поиска с помощью Nominatim API OpenStreetMap.
- Отобразите результаты с помощью библиотеки 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. Отсюда вы можете добавить дополнительные функции, такие как маршрутизация, размещение маркеров или геопространственный анализ. Нет предела возможностям, когда вы работаете с программным обеспечением с открытым исходным кодом!
Помните, что это только отправная точка, и в мире геопространственных приложений есть еще много чего для изучения. Продолжайте картографировать и кодировать!