WebGIS开发实战：武汉旅游资源可视化平台开发与应用

项目背景

智慧城市与数字文旅发展

随着智慧城市和数字文旅的快速发展，传统的旅游资源管理和信息发布方式已难以满足现代城市精细化管理和游客多样化需求。武汉作为中部地区重要的旅游城市，拥有丰富的自然与人文景观、完善的交通网络和多样的配套服务，如何将这些资源以直观、动态、交互的方式呈现出来，成为提升城市形象、优化旅游服务、辅助科学决策的重要课题。

本项目旨在通过三维可视化、数据分析和地图交互等前沿技术，将武汉市的旅游资源、游客流量、交通线路、医疗保障等多维数据进行整合与可视化展示。平台不仅为管理部门提供科学的决策支持，也为游客和市民提供便捷的信息查询和出行参考，推动武汉旅游业的数字化、智能化升级。

项目介绍

本项目是一套基于 Web 的武汉旅游资源可视化展示平台，利用三维地图、数据可视化和交互技术，全面、直观地展现武汉市的旅游资源分布、游客流量、交通状况、重点景区、医疗配套等信息。平台集成了多种可视化图表和空间分析工具，支持用户对城市旅游资源进行多维度的探索与分析，助力政府决策、旅游管理和公众服务。

平台采用现代 Web 技术栈，结合地理信息系统（GIS）和三维可视化技术，构建了一个高效、可扩展的旅游资源可视化系统。通过集成多种开源库和框架，实现了地图渲染、数据交互、空间分析等功能，为用户提供了一个功能丰富、操作便捷的可视化平台。

功能模块

1. 自转功能

自转功能是指地图视角自动、持续地围绕某个中心点进行旋转，用户无需手动操作即可从不同角度观察城市全貌或重点区域。这种功能常用于大屏展示、城市漫游、空间分析等场景，提升可视化的动态效果和观赏性。

实现方式：

地图底层：使用 `@antv/l7` 和 `mapbox-gl` 作为地图渲染和交互基础。
旋转实现：通过获取地图当前中心点，定时或事件驱动地修改中心点经度，实现地图的平滑旋转。利用 `map.easeTo` 方法实现动画过渡，保证旋转过程流畅。监听地图的 `moveend` 事件，持续触发旋转，形成循环。

2. 测量工具

用户选择测量类型（线段、多边形、圆、矩形）。在地图上交互式绘制，实时显示测量结果（距离、面积）。切换类型或离开页面时，自动清理上一次的测量结果。

实现方式：

初始化与类型切换：通过 `useRoute` 获取当前路由参数，判断用户选择的测量类型（如 `line`、`polygon`、`circle`、`rect`）。根据类型实例化对应的测量工具（如 `DrawLine`、`DrawPolygon` 等）。
交互式绘制：用户在地图上点击、拖动，完成线段、多边形、圆、矩形的绘制。工具自动计算距离（线段长度）或面积（多边形、圆、矩形）。

3. 数据展示

`plot.vue` 页面主要用于城市多维数据的可视化展示，通过多种图表和列表，直观展现武汉市相关的旅游、公交、景点、医院、机场、火车站等数据。页面分为左右两栏，内容包括：近几年游客数量（柱状图）、武汉各区实时公交在线表（玫瑰图）、武汉各区 A 级景点数量（饼图）、武汉三甲医院、门诊部、病床数量（图文列表）、天河机场与火车站吞吐量（图文列表）。

实现方式：

组件化开发：使用自定义的 `card` 组件对每个数据板块进行封装，提升复用性和页面结构清晰度。
数据与配置管理：通过 `@/data/bus`、`@/data/cityPeople`、`@/data/people` 等模块，分别获取公交、景点、游客等数据和图表配置。医院、机场、火车站等数据以静态数组形式直接在页面中定义。

4. 景点查询

用户点击"拉框查询"按钮。在地图上拉框，绘制多边形选区。系统自动查询该区域内的事件点，并在地图和表格中高亮显示。用户可通过表格查看详情，双击可定位到具体点位。

实现方式：

地图交互与绘制：使用 `@antv/l7-draw` 的 `DrawPolygon`，让用户在地图上拉框绘制多边形选区。选区绘制完成后，自动触发查询逻辑。
空间数据分析：查询区域内的点位，使用 `@turf/turf` 的 `pointsWithinPolygon` 方法。该方法判断哪些事件点（如武汉事件数据）落在用户绘制的多边形内。
数据展示与交互：查询结果通过 `element-plus` 的 `el-table` 组件以表格形式展示，显示如车牌号、联系电话、景点等级等信息。用户双击表格行，地图自动飞到该点位（`scene.map.flyTo`）。

5. 导航功能

导航功能允许用户在地图上输入起点和终点，自动进行路径规划，并在地图上展示推荐路线及详细的导航指引。用户可以切换导航控件的显示与隐藏，获得步行、驾车等多种出行方式的路线规划体验。

实现方式：

地图底层：使用 `mapbox-gl` 作为地图渲染引擎。通过 `@antv/l7` 的 `Scene` 和 `Mapbox` 进行地图场景管理和扩展。
导航控件：集成 `@mapbox/mapbox-gl-directions` 插件，作为导航路径规划和指引的核心。通过按钮控制导航控件的添加与移除，实现开关效果。

6. 3D 地图

页面实现了城市三维建筑与道路的可视化展示，主要用于展示武汉市的高层建筑和城市道路网络。用户可以通过页面上的"保存"按钮保存当前视角，并可通过图层切换控件自由开关建筑和道路的显示。

实现方式：

三维建筑与道路渲染：使用 `@antv/l7` 的 `CityBuildingLayer` 渲染三维高层建筑，支持高度、颜色、动画、扫光等多种视觉效果。使用 `LineLayer` 渲染城市道路，不同类型的道路采用不同颜色，支持动画效果。
数据驱动：通过 `Request.getWuhanBuilidings()` 和 `Request.getWuhanRoads()` 异步获取建筑和道路的 GeoJSON 数据。
图层管理与交互：使用 `LayerSwitch` 控件实现建筑和道路图层的开关。支持建筑高亮、扫光等交互动画，提升可视化效果。

7. 漂浮板块

`boundary.vue` 页面实现了城市边界的三维可视化展示与交互。主要功能包括：在地图上以三维线条或多边形的形式展示城市或行政区的边界。用户点击任意边界线段，可以弹出显示该边界的详细信息（如名称、简介等）。支持保存和飞行到边界视角，方便用户快速定位和浏览。

实现方式：

三维边界渲染：使用 `@antv/l7` 的 `LineLayer` 或 `PolygonLayer` 图层，以 `arc3d` 或多边形形状渲染边界，支持多种颜色区分不同边界。边界数据通过接口 `Request.getWuhanBoundaries()` 异步获取，数据驱动渲染。
交互与弹窗：监听边界图层的点击事件，获取被点击边界的属性（如名称、详细信息）。使用 `Popup` 弹窗，在点击位置展示边界详情，提升交互体验。

8. 飞行路径

进入飞行路径页面，地图自动飞到起点。地图上显示飞行路线、飞机动画和终点高亮。用户可点击"保存"按钮保存当前视角。离开页面时，自动清理所有相关资源。

实现方式：

1.初始化与数据加载：注入地图场景（`scene`）。调用 `useCamera(scene, "flyCamera")`，获取保存和飞行到相机视角的方法。通过接口请求飞行路径（`getFlyPath`）和终点（`getFlyEnd`）数据。

图层与动画渲染：使用 `LineLayer` 渲染飞行路径（虚线）和飞机动画（带贴图、动态移动）。使用 `PointLayer` 渲染终点，并添加动画高亮。地图添加自定义图片（如飞机图标）。
飞行控制：调用 `flyToCameraData()`，让地图视角自动飞到预设的飞行起点。用户可点击"保存"按钮，保存当前相机视角。

项目难点与亮点

1. 多源异构数据整合

武汉旅游资源涉及景区、交通、人口、医疗等多类型数据，数据来源多样、格式不一，实现高效的数据采集、清洗、融合与实时更新具有较大挑战。

2. 三维可视化与大数据渲染性能

城市级三维建筑、道路、桥梁等空间数据量大，如何保证在 Web 端流畅渲染和交互，避免卡顿和延迟，是前端开发的技术难点。

3. 空间分析与交互设计

实现如测量、路径飞行、框选查询等空间分析工具，需要精确的地理计算和友好的交互体验，涉及地理信息算法与前端交互的深度结合。

4. 地图与业务数据的联动

如何将地图上的空间对象与后台业务数据（如游客流量、公交实时信息）动态联动，做到数据驱动的可视化和智能分析，考验系统架构设计。

5. 跨终端适配与用户体验

需兼顾大屏展示、PC 端操作等多种使用场景，对界面自适应、交互流畅性提出更高要求。

项目亮点

1. 三维城市级可视化

利用三维地图和建筑渲染技术，真实还原武汉城市空间结构，提升旅游资源展示的沉浸感和科技感。

2. 多维数据融合展示

将景区、交通、人口、医疗等多维数据在同一平台集成展示，支持多图层切换和数据联动，信息一目了然。

3. 丰富的空间交互工具

支持测量、路径飞行、框选查询、视角自转等多种空间分析与交互操作，极大增强用户探索和分析能力。

4. 智能导航与路径规划

集成地图导航控件，支持用户自定义起终点，自动生成最优路线，提升出行参考价值。

5. 美观易用的界面设计

采用现代化 UI 设计和响应式布局，界面美观、操作便捷，适合大屏展示和多终端访问。

6. 可扩展性强

平台采用组件化、模块化开发，便于后续功能扩展和数据接入，支持更多城市和业务场景的推广应用。

心得体会

1. 技术能力提升

经过为期一个月的实训学习与项目开发，我和团队共同完成了"武汉旅游资源可视化展示平台"的建设。这不仅是一次技术能力的锻炼，更是一次专业素养和团队协作的全面提升。在项目开发过程中，我们深刻体会到地理信息科学的独特魅力。将空间数据、三维可视化与现代 Web 技术相结合，让原本抽象的地理信息以直观、动态的方式呈现在用户面前。每当看到武汉的建筑、道路、景点在屏幕上逐渐成型，内心都充满了成就感和自豪感。

2. 团队协作精神

实训期间，我们遇到了数据整合、三维渲染、交互设计等诸多挑战。面对大体量的空间数据，如何保证渲染流畅、交互自然？如何让地图与业务数据深度融合，提升平台的实用性和美观性？这些问题不断激发着我们查阅资料、团队讨论、反复试验。每一次技术难题的攻克，都是对地信专业知识的深化和应用能力的提升。

3. 未来展望

这次实训中大家分工协作、互相支持，从需求分析到代码实现，从界面设计到功能测试，每一步都凝聚着集体的智慧和汗水。正是这种团结协作、迎难而上的精神，让我们最终呈现出一个功能完善、界面美观的可视化平台。通过本次项目，仅提升了 GIS 数据处理、Web 可视化开发等专业技能，更加坚定了自己在地理信息科学领域深耕的信心。未来，希望能将所学知识应用到更广阔的实际场景中，为智慧城市、数字文旅等行业的发展贡献自己的力量。

视频演示效果：

WebGIS开发实战|武汉旅游资源可视化平台开发与应用https://www.bilibili.com/video/BV1komTB5Exo/