足迹地图更新:区域高亮显示
距离我第一次发布
基于高德地图实现 Hugo 足迹地图短代码
已经过去了一段时间,一直都没有进行更新。
直到昨天 S 大佬提出了一个高品质需求,更新刻不容缓:
当然最终还是大佬靠自己解决了😈……大家可围观大佬的足迹:
足迹 - 旅行漫记
但是觉得这个想法还是挺实用的,有一种逐渐点亮整个世界的感觉,成就满满!
整个过程也很简单,借助 AI,很快实现了鼠标悬停时的高亮效果,后来又实现了已标记地点的自动保持高亮的效果,最后因这两种效果都想保持且希望实现随时转换,因此直接解耦成单独的 js 文件,实现插件化调用。
演示效果可访问:
足迹 - 小十的个人博客
一、主要特性
1. 国家与国内省份高亮
不再局限于孤立的标记点,地图集成了边界解析引擎,国内精确到省级行政区,国外精确到国家级,并实现两者兼容展示。足迹落在哪里,哪里的版图就会被点亮。
2. 高亮功能插件化
不同的使用者可能对高亮的展示有不同的偏好,将高亮功能的实现拆分成了两个独立的插件:
🌍 永久高亮模式 (plugin-visited.js):只要你的足迹数据里包含该区域的坐标,该省份/国家就会被永久高亮(默认呈现清新的薄荷青配色)。
🖱️ 悬浮高亮模式 (plugin-hover.js):默认地图保持纯净,只有当鼠标滑过标记点或地图空白区域时,该区域才会高亮。
3. 智能标签排除(如“计划”行程)
有些地点我们可能只是打了个 ["计划"] 的标签,人还没去过。现在,插件内置了标签过滤,可以通过配置排除特定标签,未成行的足迹不会干扰到区域的点亮状态。
二、如何获取与处理边界数据
要实现区域高亮,最核心的基础就是 GeoJSON 边界数据。
1. 获取国内省份数据
国内的省级边界数据相对容易获取,强烈推荐使用
阿里云 DataV 数据可视化平台
。
直接下载 GeoJSON 即可,并将文件命名为 provinces.geojson。
2. 获取全球国家数据
全球数据我使用的是 Natural Earth 提供的开源标准数据集:
Datahub - Geo Countries
。
在这个页面你可以下载到包含全球所有国家边界的 countries.geojson 文件。
📝 发布时间:2026-03-15 | 🕷️ 采集时间:2026-03-15 19:42
阅读 1 次 | 你可以给她点个赞 ❤️ 0
阅读全文