Создайте карту в реальном времени с сообщениями Leaflet.JS и Kafka

Итак, добро пожаловать в последнюю часть серии Карты в реальном времени с помощью Kafka, Python и Leaflet.JS. Мы рассмотрим, как вызвать Python Kafka Consumer API из нашего интерфейса Javascript с событиями, отправленными сервером, и отобразить их на карте листовки в режиме реального времени.

Сначала мы раскручиваем наш index.html. По сути, он включает в себя три шага для создания базовой карты буклета.

  1. включите файлы leaflet.css и leaflet.js (строки 3–8)
  2. создайте новый div с id="mapid" и определенной шириной и высотой (строка 11)
  3. создайте ссылку на свой собственный файл Javascript (строка 12)

Видите ли, волшебство должно произойти где-то еще. Итак, давайте подробнее рассмотрим наш leaf.js. Здесь необходимы еще два шага, чтобы базовая версия нашей карты заработала.

Во-первых, нам нужно создать новый объект карты и дать ему то же имя, которое мы использовали в качестве идентификатора для нашего div (mapid). Три параметра в setView() — это значения широты, долготы и коэффициента масштабирования (строка 1).

Наконец, нам нужно добавить плитку на нашу карту, которая в основном определяет стиль карты. Здесь я использую OpenStreetMap (строка 2). Здесь все еще нет магии, так что же делает остальная часть скрипта?

Мы создаем массив mapMarkers, который может содержать несколько маркеров (строка 1), прежде чем мы запустим новый источник событий, отправленных сервером (строка 3). Не забудьте указать здесь название вашей темы, а затем добавить EventListener (строка 4). Теперь в EventListener происходит большая часть волшебства.

Мы получаем сообщения о событиях с параметром нашей функции e. Мы можем получить доступ к данным события с помощью e.data и преобразовать их в объект JSON obj (строка 7). Мы можем вывести его на консоль, чтобы увидеть структуру, но она напомнит вам структуру, которую мы определили в производителе (строка 8).

Как только мы получим данные о событиях, доступные в структурированном JSON obj, мы сможем использовать их для доступа к различным атрибутам. Во-первых, мы проверим, является ли линия шины той, которую мы определили (линия 10). Если true, мы сначала удалим массив mapMarkers с карты (строки 11–13). В настоящее время в массиве нет маркеров и, следовательно, нет маркеров на карте. Но так как мы хотим, чтобы автобус двигался по карте, нам сначала нужно удалить все маркеры после потребления нового события.

После этого мы создаем новый маркер, берем значения широты и долготы из наших данных о событиях и, наконец, добавляем их на нашу карту (строка 14) и в массив mapMarkers (строка 15). Это уже. При появлении нового события снова выполняется та же логика (начиная со строки 4).

Это была последняя история цикла. Надеюсь, вам понравилось.

Полный код вы можете найти на GitHub. Если вам нравится эта серия, не стесняйтесь следовать за мной на Youtube. В серии видео есть еще несколько более глубоких объяснений.

Я разделю эту историю на серию из 4 историй, как показано в обзоре ниже. Это позволяет мне более подробно остановиться на каждой конкретной части общего решения. Поскольку это мой первый пост на среднем уровне, я буду очень признателен за любую обратную связь.

Развлекайся :-)