• 人工智能
• 计算机视觉
• 机器学习
• 后端

在 Finding-missing-person-using-AI 项目中，失踪案件分布地图通过Folium 交互地图实现：登录管理门户后，仪表盘和专属 Map 页面会自动把数据库中每个城市的失踪案件数量绘制成红/绿圆点，圆点大小代表案件总数，颜色代表是否还有未解决案件。本文将带你从零看懂并复刻这套"失踪案件地图"的完整实现流程，不需要任何 GIS 基础。

🚀 快速运行项目

先克隆仓库并安装依赖，地图功能依赖 requirements.txt 中的folium和streamlit-folium两个库：

git clone https://gitcode.com/gh_mirrors/fi/Finding-missing-person-using-AI cd Finding-missing-person-using-AI pip install -r requirements.txt

启动管理门户（地图所在应用）：

streamlit run Home.py

打开浏览器，登录后即可在首页看到 "Cases by City" 区域的下拉交互地图，左侧边栏的Map页面则是全屏版地图 + 城市统计表格。

📊 第一步：按城市聚合案件数据

地图上的每个圆点背后都是真实数据库记录。项目使用 SQLite + SQLModel 存储数据，聚合逻辑集中在 pages/helper/db_queries.py 的get_case_counts_by_city()函数中：

• 从RegisteredCases表取出每条案件的city和status两个字段
• 按城市累加，返回一个字典：{城市名: {"found": 已找到数, "not_found": 未找到数}}
• 空城市统一归入"Unknown"组

这一步是画地图的关键前置：先聚合，再渲染。地图本身不直接查库，只消费这份统计结果，页面才能做到一次查询、秒级渲染。

🗺️ 第二步：建立城市名 → 经纬度映射

Folium 需要在地图坐标系上定位，而数据库里存的只是城市名（如"Delhi"）。项目采用最简单的内置坐标字典方案，定义在 pages/5_Map.py 和 Home.py 中：

CITY_COORDS = { "Delhi": (28.6139, 77.2090), "Mumbai": (19.0760, 72.8777), "Bengaluru": (12.9716, 77.5946), ... "Unknown": (20.5937, 78.9629), # 未知城市落到印度中心 }

字典内置了 40 多个印度主要城市，并做了别名处理（Bengaluru/Bangalore指向同一坐标）。查找时先精确匹配，失败后再做忽略大小写的兜底匹配，仍未命中的城市会被记录到skipped列表，在页面底部以文字提示"未显示"。

🎯 第三步：用 Folium 画出圆点图层

地图画布初始化一行搞定，中心点设为印度地理中心：

m = folium.Map(location=[20.5937, 78.9629], zoom_start=5, tiles="CartoDB positron")

然后遍历每个城市，用folium.CircleMarker放置圆点。视觉编码规则（见 pages/5_Map.py）：

鼠标移到圆点上，提示框会直接展示该城市的完整统计，无需跳转其他页面——这就是交互地图相比静态图片的核心价值。

⚙️ 第四步：把 Folium 地图嵌入 Streamlit

Streamlit 本身不渲染 Leaflet 地图，需要streamlit-folium组件桥接：

st_folium(m, width=900, height=550)

一行调用即可在页面里得到可缩放、可平移的 Leaflet 交互地图（缩放按钮、OpenStreetMap 底图均来自 Leaflet 生态）。

专属 pages/5_Map.py 页面在此基础上还追加了两块内容：

• HTML 图例：用st.markdown(unsafe_allow_html=True)渲染红/绿圆点说明，标注"圆点大小 = 案件数量"
• City Summary 表格：用 pandas 把{城市, 总数, 已找到, 未找到}按总数降序输出为st.dataframe，弥补"地图上看不见小数字"的不足

首页仪表盘 Home.py 中的地图则是同一套逻辑的精简版（高度 420px、宽度 100%），方便管理员不切换页面就纵览全局。

💡 常见问题与扩展技巧

❓ 地图提示 "Map dependencies not installed" 怎么办？

pip install folium streamlit-folium

❓ 我输入的城市在地图上没出现？

说明该城市不在CITY_COORDS字典中。打开 pages/5_Map.py，补一行"城市名": (纬度, longitude)即可（注意 Home 页与 Map 页各有一份字典，两处都要加）。页面底部会以 caption 列出所有被跳过的城市，方便排查。

❓ 想换成中国地图或全球视图？

只需修改三处：CITY_COORDS的坐标内容、folium.Map(location=...)的中心点与zoom_start、底图 tiles（如OpenStreetMap、CartoDB positron）。其余聚合、着色、表格逻辑完全复用，这正是"数据与渲染分离"架构的便利之处。

📁 核心文件速查

掌握以上四步——聚合数据 → 坐标映射 → CircleMarker 视觉编码 → Streamlit 嵌入——你就可以在自己的数据可视化项目里，快速复刻出这样一张"失踪案件分布"交互地图了。

• 人工智能
• 计算机视觉
• 机器学习
• 后端