Веб-приложение с интерактивной картой океана

К нам обратился один из наших постоянных клиентов из США. Вместе мы сделали уже несколько проектов, на этот раз наша задача была разработать веб-приложение с интерактивной картой океана Восточного побережья США. Основные пользователи приложения — промышленные рыболовные и транспортные судна, энергетические и страховые компании.

Решение

Мы организовали работу над проектом в виде недельных спринтов. В финале спринта выкатывали заказчику версию для тестирования.

Cистема состоит из следующих компонентов: 

• парсер на Node.JS, который ежедневно разбирает данные из 1000+ файлов
• бэкенд и админка на PHP (Laravel)
• фронтенд на React

Основной функционал приложения позволяет:

• посмотреть температуру воды и рельеф дна на выбранном маршруте
• узнать направления ветров и течений
• сориентироваться по погоде на 3 дня вперёд
• выяснить, есть ли на маршруте рыба, всего в базе 34 вида

Также приложение показывает солёность морской поверхности, отражательную способность и многие другие параметры. Всё это можно узнать, настроив соответствующие слои в Layers List. Параметры имеют различное визуальное представление. Так, например, атмосферное давление показано контуром, а направления течений  — векторной анимацией. 

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

С помощью приложения пользователи могут строить маршруты и смотреть данные по установленным точкам маршрута в разделе меню Waypoints.

Чтобы быстро сохранить карту с текущими настройками, нужно нажать кнопку в правом верхнем углу. Созданные снэпшоты хранятся в разделе Snapshots, откуда их можно скачать.

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

Помимо этого нам нужно было сохранять и обрабатывать массивы текстовых данных в 10 Гб, раскиданных по нескольким сотням файлов. Чтобы упростить их отображение и уменьшить нагрузку на девайс пользователя, мы сохранили три варианта данных (по уровням приближения карты) в виде матрицы для каждого из 70 слоёв данных. 

Далее нам нужно было выбрать — хранить значения по точкам или просто матрицу значений. Второй вариант оказался в разы быстрее. Все значения в итоге сохранялись в базе данных в поле типа JSON. Благодаря этому нам удалось быстро получать значение конкретного слоя в конкретной точке. Изначальный результат был один слой за час, а мы сократили время до 20 минут на тестовом сервере. На стейджинге клиента на Amazon получилось добиться результата в несколько минут!

Результат

Мы уложились в жёсткие сроки, и наш клиент остался доволен результатом. Приложение помогает просматривать данные об океане: температуру воды, глубину, течения и направления ветра, наличие рыбы и другие показатели. Теперь рыболовные компании могут получать актуальную информацию, необходимую для планирования маршрутов, всего в несколько кликов.

Стек технологий

React, Laravel, PostgreSQL, Redis, Node.js