在当今数字化时代，旅游爱好者们越来越依赖便捷且个性化的工具来规划他们的行程。本文将深入探讨如何开发一个集旅游路线规划、地图展示以及实时天气查询等功能于一体的 Web 应用，为用户提供全方位的旅游辅助服务。
一、功能概述
该应用主要分为左右两个部分：左侧是聊天交互区域，用户可以输入旅游目的地和游玩天数，点击按钮获取定制化的旅游路线；右侧则是地图展示区域，不仅能实时显示经纬度，还能根据获取到的景点 POI（Point of Interest）信息在地图上标记景点，并规划自驾路线。同时，应用还具备天气查询功能，根据用户输入的目的地自动获取当地实时天气情况。
二、技术栈
- 前端框架：使用 Vue.js 进行应用的构建，Vue.js 的组件化开发模式使得代码结构清晰，易于维护和扩展。
- 地图组件：引入了自定义的 UCMap 组件，基于 OpenLayers 等地图库进行二次开发，实现了地图的初始化、图层切换、POI 标记以及路线绘制等功能。
- HTTP 请求：通过 axios 库进行 HTTP 请求，与后端服务进行数据交互，如获取旅游路线、地理编码以及天气信息等。
- Markdown 解析：利用 marked 库将后端返回的 Markdown 格式的旅游路线和天气信息解析为 HTML，并通过 DOMPurify 进行安全过滤，防止 XSS 攻击。
三、核心功能实现
- 旅游路线规划
用户在左侧输入目的地和游玩天数后，点击 “获取旅游路线” 按钮