足迹地图更新：区域高亮显示

距离我第一次发布 基于高德地图实现 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 文件。