Ka Ka travel (визуализация путешествия)

Описание Проекта

Решение проблем с поездками, мобильное веб-приложение для записи маршрута путешествия, планирования маршрута и анализа визуализации данных.
Нажмите здесь, чтобы посмотреть проект

Скриншот проекта

частное путешествие

Общественный транспорт

Список истории

моя информация

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

• внешний интерфейс: Мобильный терминал, ведро семейства vue, библиотека компонентов Mand, Echarts.js, Scss.

• задняя часть: Node, Express framework, API карт Gaode

• база данных: MySQL

функциональный модуль

личное путешествие

Когда пользователь путешествует лично и не уверен в расстоянии, пункте назначения и другой информации, выберите инструмент путешествия, нажмите «Пуск», система отслеживает местоположение мобильного телефона пользователя в режиме реального времени, чтобы получить координаты широты и долготы WGS84 (стандарт геолокации w3c HTML5) , поездка заканчивается и записывается информация о путешествии, координаты широты и долготы. Преобразование системы координат GCJ-02 и рисование траекторий движения с помощью стороннего API, предоставляемого AutoNavi.

Общественный транспорт

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

Список истории

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

Моя информация (незаконченная)

Просматривайте мои данные, линейные диаграммы тенденций поездок, полученные в результате анализа данных о поездках, диаграммы анализа данных, связанные с данными о поездках, и другие функции, не написанные

сборка проекта

внешний интерфейс

внешний интерфейсvue-cli3По результатам разработки в проект проекта вносятся некоторые доработки в соответствии с требованиями проекта.view/в папке

• Адаптация мобильного терминала: я использовал его для мобильной разработки раньшеРешение для адаптации разрешения Hand Amoy, этот проект основан на пустыне«Как использовать vw для мобильной адаптации в проектах Vue», используйте webpack для настройки разрешения мобильного терминала в проекте.

• перехватчик запросов:существуетview/src/request/в, на основеaxiosкоторый предоставилinterceptorsДобавляйте соответствующие операции ко всем запросам и ответам ajax, например, добавляйте заголовки запросов, добавляйте маркеры, идентифицируйте и сообщайте об ошибках в ответ на коды состояния фоновой ошибки; просто инкапсулирует следующие запросы axios, в основном получение и отправку.

• навигационная охрана:существуетview/src/router/В , сделан глобальный навигационный сторож, и пользователи, которые не вошли в систему, могут получить доступ только к странице входа в проект.

• Инструменты:существуетview/src/utils/В , сделать модульную инкапсуляцию общих значений перечисления, глобальную регистрацию компонентов, общую инкапсуляцию классов и другие функции.

• css-стиль:существуетview/src/style/, глобальный общедоступный стиль, стиль инициализации.

• SVG-компонент:существуетview/src/icons/, пакет используется для компонентов отображения svg, используемых для отображения маленьких значков, а сам svg сохраняется в этой папке.

• модульный: Модульная инкапсуляция маршрутизации и vuex.

• карта: Все карты, географическая информация, трек, функции планирования маршрутаКарта ГаодеПредоставляется сторонний API

задняя часть

• использоватьNodeизexpressрама, соединениеMysqlБаза данных, разработка интерфейса данных, добавление, удаление, изменение и простая инкапсуляция данных.

резюме

Резюме проекта

• Сложность: легко
• Время разработки: предварительное исследование, одна неделя кодирования
• Ключевые слова: мобильный терминал, путешествие, визуализация, карта AutoNavi, карта Echart.

Краткое описание процесса

• производство идей: Из-за опыта стажировки в Didi Chuxing я планирую сделать продукт, связанный с туристической платформой и визуализацией интерфейса.

• запрос исследования: комбинированный出行 可视化Анализ потребности в ключевых словах, исследование悦动圈,悦跑圈,滴滴出行,百度地图,高德地图Определите несколько основных функций

  1. Позиционирование в реальном времени, рисование траектории движения (радостный беговой круг, завершено)

  2. Планирование маршрута, планирование маршрута и составление карты пути (карта Baidu, завершена)

  3. Заказ автомобиля онлайн, экспресс-автомобиль, специальный автомобиль, вызов автомобиля онлайн (Диди Чусин, незаконченный)

  4. Визуальный анализ, визуальный анализ данных о поездках (выполнено)

• Технические исследования:

  1. Выберите функцию мониторинга физического местоположения в режиме реального времени, предоставляемую геолокацией HTML5, чтобы получить координаты широты и долготы WGS84.

  2. Выберите сторонний API AutoNavi, чтобы предоставить такие функции, как карта, географическое положение, рисование траектории и планирование маршрута.

  3. Выберите проект развития мобильных терминалов, с DidiMandВ качестве библиотеки компонентов мобильного пользовательского интерфейса

  4. ВыбратьNodeдля сервера,Expressдля бэкэнд-фреймворка,Mysqlдля базы данных

Краткое содержание трудностей

Начать продукт с нуля - самое сложное. Хотя проект не сложный, он требует много времени для исследования продукта, технических исследований и разработки проекта на ранней стадии. По сравнению с готовым продуктом, существует много разных опыт.

Исходный код Github https://github.com/wwenj/tripRecord

Пополнить

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

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

Обновление 2019.11.15

Проект онлайн, вы можете нажать, чтобы испытатьdemo.wwenj.com/tripRecord

Когда проект загружен на сервер, вам нужно только клонировать проект, запустить внешний код, и интерфейс получит доступ к онлайн-серверу.
Если вы хотите получить доступ к своей собственной локальной службе, измените внешний запрос на свой собственный IP-адрес в /view/src/request/http.js и импортируйте таблицу для подключения к вашей собственной базе данных, спасибо.

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