Stsezhka

Appearance

Use Case #12: Цветовое кодирование покрытий (Где асфальт, а где болото) ​

1. Жизненная ситуация (Боль пользователя) ​

Представь пользователя: у него красивый шоссейный велосипед на очень тонких, гладких шинах (или он едет на машине с низкой посадкой). Он строит маршрут на 100 километров к красивому озеру. Сайт рисует ему идеальную, непрерывную синюю линию. Пользователь радуется, скачивает трек и едет. 80 километров он летит по идеальному гладкому асфальту. А потом синяя линия на навигаторе сворачивает в лес. А там — глубокий песок, болото и торчащие корни деревьев. На тонких шинах там проехать физически невозможно. Пользователю приходится тащить велосипед на себе 10 километров, он поцарапан ветками, весь в грязи и в бешенстве.

Кого он винит? Твой сайт. Потому что сайт не предупредил его, что гладкая дорога закончится. Ведь на экране это была всё та же "скучная синяя линия".

2. Как это ДОЛЖНО работать (Магия для пользователя) ​

Твоя линия маршрута не имеет права быть просто скучной синей полосой. Она должна работать как умный светофор! Что видит юзер на идеальном сайте:

  • Линия-хамелеон: Маршрут на карте раскрашен разными цветами, как гирлянда.
    • ⬛ Темно-серый цвет: это ровный асфальт (можно лететь на скорости).
    • 🟧 Оранжевый цвет: это гравий или мелкие камушки (ехать можно, но будет трясти).
    • 🟫 Коричневый пунктир: это лесная дикая тропа или песок (опасно для тонких колес).
  • Полоска-подсказка (Сводка): Прямо под названием маршрута сайт заботливо пишет итог поездки. Например: [ Асфальт: 80 км | Гравий: 15 км | Песок: 5 км ].

Юзер с шоссейным велосипедом, сидя дома на диване, посмотрит на эту надпись и скажет: "Ого, целых 5 километров песка! Не, туда я не поеду, перестрою-ка я маршрут по асфальту". Ты только что спас ему выходные! Он будет обожать твой сервис.

3. СЕКРЕТ ДЛЯ ПРОГРАММИСТА (Как это сделать легко) ​

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

Инструкция для кода:"Когда наш умный сервер ищет маршрут, в базе (OSM) к каждому метру дороги уже приклеена невидимая текстовая бирка (тег). Например: surface=asphalt (асфальт) или surface=sand (песок). Попроси сервер отдавать нам эти слова-бирки вместе с координатами! А потом напиши простое правило для дизайна слоя карты (data-driven styling): если сервер прислал слово asphalt — крась этот кусок линии на карте в серый. Если прислал sand — крась в коричневый!"

4. Важная ловушка (Где можно облажаться) ​

Иногда на открытых картах люди забывают указать, какое там покрытие. Дорога на карте есть, а «бирки» у нее нет. Сервер скажет: surface=unknown (неизвестно).

❌ Как делают плохие сайты: Они просто красят такую неизвестную дорогу цветом обычного асфальта (фолбэк по умолчанию). Юзер верит, приезжает туда, а там болото. ✅ Как делать ПРАВИЛЬНО: Если сайт не знает покрытия, мы ОБЯЗАНЫ раскрасить этот кусок маршрута в опасный, предупреждающий цвет (например, в желто-черную штриховку, как лента на стройке, или в ярко-красный).

Юзер посмотрит на эту желто-черную линию и поймет: "Ага, сайт честно говорит, что не знает, что там. Может быть ровно, а может быть грязь. Поеду на свой страх и риск". Ты честно его предупредил — к тебе претензий нет.

Эпики и Задачи ​

Epic 1: Маппинг и Парсинг поверхностей ​

  • Task 1.1: Написать парсер ответов от роутинга, который мапит десятки OSM surface-тегов в 3-4 укрупненные категории (paved, unpaved, rough, unknown).
  • Task 1.2: Вычислить процентное соотношение (длину) каждого типа покрытия к общей длине трека для вывода в Сводку (UI Бар).

Epic 2: Рендер карты (MapLibre) ​

  • Task 2.1: Использовать data-driven styling в слое line-color MapLibre, чтобы раскрашивать отрезки пути на основе свойства surfaceCategory внутри Feature геометрии (Линия-хамелеон).
  • Task 2.2: Подготовить специальный паттерн (Image/Sprite) для рендера unknown поверхностей (желто-черная предупреждающая штриховка).

Epic 3: Интерактивная легенда ​

  • Task 3.1: Сверстать компонент Stacked Bar для сводки.
  • Task 3.2: При onMouseEnter по конкретному типу покрытия сетить в глобальный стейт highlightedSurface. В MapLibre добавлять слой-фильтр, который пульсирует нужные участки и затухает остальные.