综合设计——多源异构数据采集与融合应用综合实践
这个项目属于哪个课程
组名
在大大的数据里面挖呀挖呀挖
项目简介
项目名称： 城市记忆
项目Logo：
项目介绍：
我们希望通过一种直观、生动的方式，让用户感受城市发展变迁的魅力。因此设计了一个以时间轴为核心的多媒体展示平台“城市时光地图”。该平台基于历史和现代多源异构数据，结合地图标注功能，展示城市重要地标的历史图像、现代照片及相关信息，为用户提供一种探索城市历史的全新体验。
项目背景：
随着时间的推移，城市的面貌发生了翻天覆地的变化，但人们对过去的记忆却逐渐模糊。我们希望通过技术手段，将历史与现代的城市面貌在数字空间中并列呈现，让城市记忆焕发新生。
项目意义：
该项目不仅是一种文化传承和教育手段，更是一种对城市发展的全面展示。其应用场景包括教育、旅游、文化研究等多个领域。通过这种创新的方式，人们可以更加直观地理解城市变迁的历程。
团队成员学号
魏雨萱（102202150） 张静雯（102202152）杨美荔（102202118）农晨曦（102202114）赖越（1022021447）傅钰(102202144)
项目目标
本系统旨在实现以下功能：
- 地标数据动态标注： 后端数据传递到前端，实现地图上动态标记城市地标功能。
- 时间轴交互效果： 提供滑动时间轴功能，用户可对比历史与现代图片。
- 多源异构数据融合： 实现文本、图片、音频、视频等多媒体数据的融合展示。
- 用户内容上传： 允许用户上传与地点相关的历史内容，并分享给其他用户。
- 实时地图交互： 用户可通过地图缩放，查看地标详细信息。
其他参考文献
- 高德地图开发文档
- 《数据可视化设计指南》
系统总体技术概述
1. 系统架构概述
系统分为前端、后端、数据库、AI接口、爬虫模块等多个层级，各层级协同工作。架构设计如下：
- 前端： 使用HTML、CSS和JavaScript设计界面，提供地图展示、时间轴交互等功能。
- 后端： 使用Python搭建Flask框架，实现数据处理和API接口调用。
- 数据库： 采用MySQL存储地标、图片链接等内容。
- 爬虫模块： 利用Selenium爬取历史地标信息与图片资源。
- AI接口： 调用百度AI或其他服务完成图片分类与历史图像识别。
- 部署： 基于华为云平台的弹性计算服务（ECS）部署全系统，确保稳定运行。
2. 各模块技术实现
2.1 地标数据动态标注
目标： 根据数据库中存储的地标数据，在地图上动态添加标注。
技术方案：
- 利用高德地图API进行地标标注。
- 后端提供数据接口，前端根据用户视图范围实时更新地图显示内容。
2.2 时间轴交互效果
目标： 通过滑动时间轴对比地标的历史与现代图片。
技术方案：
- 使用前端库（如D3.js）实现时间轴动态效果。
- 图片通过RESTful API加载，结合时间点触发更新事件。
2.3 多媒体融合展示
目标： 在地图弹窗中显示地标的图片、视频和音频信息。
技术方案：
- 前端利用HTML5标签展示多媒体内容。
- 后端将融合的数据打包为JSON格式，通过API传递给前端。
2.4 用户内容上传
目标： 用户可上传历史照片与文字说明，丰富系统内容。
技术方案：
- 用户通过前端表单上传内容，后端校验后存储至数据库。
- 数据通过管理员审核后上线展示。
2.5 实时地图交互
目标： 随着地图缩放，动态加载地标详细信息。
技术方案：
- 前端监听地图缩放事件，根据缩放级别调用不同API获取地标数据。
个人分工及具体实现
1. 前端开发与交互功能
- 负责功能
地图标记功能实现：动态添加标记点，根据用户操作调整缩放级别显示详细标记。
实现地图的路径高亮功能，设计路径视觉效果。
工具：vscode、HTML、CSS、JavaScript。 - 具体任务
调用 AMap API 进行地图交互开发。
实现动态展示历史标记点、用户自定义内容上传功能。
用户体验优化：设计友好的 UI 界面，提升地图功能的使用便捷性。 - 代码展示：
<body>
<div class="map-container">
<div class="background-image"></div>
<div class="overlay"></div>
<h1>探索中国地图</h1>
<div id="map"></div>
<button class="back-button" onclick="goBack()">返回</button>
</div>
<script type='text/javascript'>
window._AMapSecurityConfig = {
securityJsCode: '安全密钥',
}
</script>
<script type="application/javascript"
src="https://webapi.amap.com/maps?v=2.0&key=eda3dd9617ed730c1717e9673bd0459f"></script>
// 初始化高德地图
const map = new AMap.Map('map', {
zoom: 4,
center: [104.195397, 35.86166], // 中国地理中心
});
// 渲染地图标记
function renderMarkers() {
photoData.forEach(photo => {
const marker = new AMap.Marker({
position: [photo.longitude || 104.195397, photo.latitude || 35.86166],
title: photo.city_name,
content: `
<div style="
width: 10px;
height: 10px;
background-color: #3FB1CE; /* 贴近地图的蓝绿色 */
border-radius: 50%;
border: 1px solid #FFFFFF; /* 白色边框增强可见性 */
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); /* 轻微阴影效果 */
position: relative;
"></div>
`,
offset: new AMap.Pixel(-5, -5) // 确保居中
});
map.add(marker);
});
}
2、搭建与维护数据库（如 MySQL 或 MongoDB），支持前端动态查询与数据更新。
将队友爬取到的数据导入到数据库中，由后端调取使用
- 代码展示：
import pandas as pd
import mysql.connector
from openpyxl import load_workbook
# 连接到MySQL数据库
db_connection = mysql.connector.connect(
host="localhost",
user="root",
password="031212",
database="city_data"
)
cursor = db_connection.cursor()
# 加载XLSX文件
xlsx_file = 'D:/project_folder_data/音频3.xlsx'
df = pd.read_excel(xlsx_file)
# 创建表（如果尚未存在）
create_table_query = """
CREATE TABLE IF NOT EXISTS audio_links3 (
city_name varchar(255),
audio_url varchar(255),
jingdu float,
weidu float
);
"""
cursor.execute(create_table_query)
# 插入数据
insert_query = """
INSERT INTO audio_links3 (city_name, audio_url, jingdu, weidu)
VALUES (%s, %s, %s, %s)
"""
for row in df.itertuples():
cursor.execute(insert_query, (row.city_name, row.audio_url, row.jingdu, row.weidu))
# 提交所有数据插入操作
db_connection.commit()
# 关闭连接
cursor.close()
db_connection.close()
心得体会：
在本次任务分配与团队协作中，我深刻体会到任务细化与分工对于项目高效推进的重要性。通过将任务按前端、后端和数据处理三个大类进行划分，每个人能够专注于自己的领域，同时又能实现团队间的高效协同。作为团队的一员，我在专注于自己的任务时，也学习到了其他成员的工作内容。例如，前端在开发地图功能时，了解了后端如何处理数据接口，数据处理如何进行内容的预处理。这种跨领域的了解提升了我的整体视野和综合能力
标签：用户,前端,地图,融合,实践,采集,地标,数据,时间轴 From： https://www.cnblogs.com/zjw-1212/p/18606934