前言

早期使用的 Lopwon Footprint 依赖 百度地图 API 免费服务。为摆脱第三方免费 API 限制，同时本地化与界面美观度，借助 ECharts 的 GeoJSON 地图渲染能力，结合阿里云 DataV.GeoAtlas 的开源地图数据，实现基于本地资源的旅行足迹展示新模板，完成对旧版百度地图模板的替换。¹

1 项目准备与思路

1.1 ECharts 与 GeoJSON

ECharts 是一个使用 JavaScript 实现的开源可视化库，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。²

GeoJSON 是一种对各种地理数据结构进行编码的格式，基于 Javascript对象表示法（JavaScript Object Notation, 简称 JSON）的地理空间信息数据交换格式。³

阿里云DataV——阿里巴巴集团旗下数据可视化产品,成熟的企业级数据可视化解决方案以及国产化环境部署,无需编程的一站式智能数据可视化平台.⁴

这里我们使用阿里提供的数据JSON文件，放在主题assets/geo/china.json

1.2 数据来源、思路

自定义字段可以添加坐标经纬度信息；标签可以分类标记点类型

利用 ECharts GeoJSON 地图渲染功能，展现多个标签标记点。

实现legend图例显隐控制图层显隐。

设置中心经纬度支持地图中心点、缩放级别自定义。

绘制航迹线连接不同点。

高亮行政区（adcode）划城市，标签区分。

2 项目分析

2.1 获取游记文章里面的自定义字段

2.2 开启exif识别第一张图片exif信息的经纬度

const pictureData = <?php echo $pictureData; ?>;
const tripData = <?php echo $tripData; ?>;
const highlightRegions = <?php echo $highlightRegions; ?>;
const geoJsonUrl = "<?php $this->options->themeUrl('assets/geo/china.json'); ?>";

3 编写 ECharts 配置

1. 使用 geo 组件加载地图。
2. 使用 series 绘制多个分类的散点，每类数据对应一个 series，设置颜色和图例。
3. 使用 lines 类型绘制航迹线。
4. 使用 geo 的 regions 配置高亮行政区划城市。
5. 通过 JS 控制对应 series 和 lines 的显示与隐藏。

其中echarts部分：

4 最终结果

5 更新内容

3.5版 更新：修复无法循环获取EXIF的GPS信息