Главная/Портфолио/Веб-приложение с интерактивной картой океана
Marine Analytics CompanyВеб-приложение с интерактивной картой океана
К нам обратился один из наших постоянных клиентов из США. Вместе мы сделали уже несколько проектов, наша новая задача — разработка веб приложения с интерактивной картой океана Восточного побережья США. Основные пользователи приложения — промышленные рыболовные и транспортные судна, энергетические и страховые компании.
Решение
Мы организовали работу над проектом в виде недельных спринтов. В финале спринта выкатывали заказчику версию для тестирования.
Cистема состоит из следующих компонентов:
- парсер на Node.JS, который ежедневно разбирает данные из 1000+ файлов;
- бэкенд и админка на PHP (Laravel);
- фронтенд на React.
Основной функционал приложения позволяет:
- посмотреть температуру воды и рельеф дна на выбранном маршруте;
- узнать направления ветров и течений;
- сориентироваться по погоде на 3 дня вперёд;
- выяснить, есть ли на маршруте рыба, всего в базе 34 вида.
Также приложение показывает солёность морской поверхности, отражательную способность и многие другие параметры. Всё это можно узнать, настроив соответствующие слои в Layers List. Параметры имеют различное визуальное представление. Так, например, атмосферное давление показано контуром, а направления течений — векторной анимацией.

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

С помощью приложения пользователи могут строить маршруты и смотреть данные по установленным точкам маршрута в разделе меню Waypoints.
Чтобы быстро сохранить карту с текущими настройками, нужно нажать кнопку в правом верхнем углу. Созданные снэпшоты хранятся в разделе Snapshots, откуда их можно скачать.
В рамках проекта требовалось обрабатывать и визуализировать данные сложных вычислений. Для этого мы использовали математические алгоритмы. Например, с помощью линейной и бикубической интерполяции отрисовали температуру, а для изолиний применили метод шагающих квадратов.
Помимо этого нам нужно было сохранять и обрабатывать массивы текстовых данных в 10 Гб, раскиданных по нескольким сотням файлов. Чтобы упростить их отображение и уменьшить нагрузку на девайс пользователя, мы сохранили три варианта данных (по уровням приближения карты) в виде матрицы для каждого из 70 слоёв данных.
Далее нам нужно было выбрать — хранить значения по точкам или просто матрицу значений. Второй вариант оказался в разы быстрее. Все значения в итоге сохранялись в базе данных в поле типа JSON. Благодаря этому нам удалось быстро получать значение конкретного слоя в конкретной точке. Изначальный результат был один слой за час, а мы сократили время до 20 минут на тестовом сервере. На стейджинге клиента на Amazon получилось добиться результата в несколько минут!
Результат
Мы уложились в жёсткие сроки, и наш клиент остался доволен результатом. Разработанное веб-приложение помогает просматривать данные об океане: температуру воды, глубину, течения и направления ветра, наличие рыбы и другие показатели. Теперь рыболовные компании могут получать актуальную информацию, необходимую для планирования маршрутов, всего в несколько кликов.
Стек технологий
React, Laravel, PostgreSQL, Redis, Node.js
Примеры проектов
-
Azoft Webchat
Подробнее