世界咖啡传播历史与迁徙地图｜使用Highcharts实现迁移地图开发

使用图表工具本案例基于Highcharts.mapChart演示如何用动画表达全球咖啡豆的早期发展过程可视化完整三层系列叠加map 填充色块层各国行政区底色标记咖啡传入地绑定悬浮介绍文本mapline 迁徙路线层地理线段绘制咖啡跨国传播路径mappoint 标记点位层发源地 / 中转地终点圆点标注传入年份。 业务场景展示咖啡豆从也门起源历经数百年向全球各大洲扩散的完整历史脉络。依赖说明地图图表必须引入两个核心脚本highcharts.js基础库highcharts-map.js地图扩展模块 拓扑数据通过异步请求加载高精度世界地图world-highres.topo.json。地图图表是显示跨地理区域如国家、土地等数据流动的绝佳选择。咖啡传播历史整理地图路线逻辑起源也门1414 年全球咖啡种植发源地所有传播线路起点向东传播也门→印度1670、也门→印尼爪哇1696阿拉伯商人将咖啡传入南亚、东南亚荷兰人在爪哇建立大型种植园欧洲中转爪哇→荷兰阿姆斯特丹1696荷兰殖民者将咖啡带回欧洲开启西欧饮用风潮印度洋航线也门→留尼汪岛1708法国殖民岛屿作为中转点南美扩散留尼汪→巴西1770咖啡传入巴西巴西后续成为全球第一大咖啡产国英法海外殖民英国传入加勒比安的列斯群岛、法国传入法属圭亚那完成美洲全域扩散。完整可运行代码html预览!DOCTYPE html html langzh-CN head meta charsetUTF-8 title咖啡豆全球传播历史地图/title script srchttps://code.highcharts.com/highcharts.js/script script srchttps://code.highcharts.com/maps/modules/map.js/script style #container { width: 100%; height: 650px; } /* 可拓展迁徙路线流动动画 */ .animated-line { stroke-dasharray: 8; animation: dash 2s linear infinite; } keyframes dash { to { stroke-dashoffset: -16; } } /style /head body div idcontainer/div script (async () { // 加载高清世界地图拓扑 const topology await fetch( https://code.highcharts.com/mapdata/custom/world-highres.topo.json ).then(response response.json()); // 国家色块数据hc-key国家编码、填充色、中文介绍 const data [ { hc-key: ye, color: #ffa500, info: 也门咖啡全球种植发源地1414年开始规模化饮用种植 }, { hc-key: br, color: #c0ffd5, info: 巴西咖啡从留尼汪岛传入现已成为全球最大咖啡出产国 }, { hc-key: fr, color: #c0ffd5, info: 法国咖啡经荷兰传入通过殖民扩散至南美法属领地 }, { hc-key: gb, color: #c0ffd5, info: 英国咖啡风靡国内后引种至加勒比殖民地 }, { hc-key: id, color: #c0ffd5, info: 印度尼西亚爪哇荷兰人从也门引进东南亚核心产区 }, { hc-key: nl, color: #c0ffd5, info: 荷兰欧洲最早规模化咖啡贸易国家中转全球引种 }, { hc-key: gf, color: #c0ffd5, info: 法属圭亚那法国殖民引种咖啡种植 }, { hc-key: re, color: #c0ffd5, info: 留尼汪岛印度洋咖啡中转枢纽传入巴西的关键节点 }, { hc-key: in, color: #c0ffd5, info: 印度阿拉伯商人从也门引入亚洲大陆咖啡 } ]; Highcharts.mapChart(container, { chart: { map: topology }, title: { text: 咖啡豆全球传播历史地图 ☕, align: left }, subtitle: { text: 起源也门数百年间通过海上贸易、殖民活动扩散至全球, align: left }, legend: { enabled: false }, tooltip: { headerFormat: b{point.key}/bbr/, pointFormat: {point.info} }, mapView: { fitToGeometry: { type: MultiPoint, coordinates: [ [-164, 54], [-35, 84], [179, -38], [-68, -55] ] } }, series: [ // 第一层国家填充色块 { data, keys: [hc-key, color, info], name: 咖啡种植国家 }, // 第二层传播迁徙路线 { type: mapline, data: [ { geometry: { type: LineString, coordinates: [[48.516388, 15.552727], [110.004444, -7.491667]] }, className: animated-line, color: #666 }, { geometry: { type: LineString, coordinates: [[48.516388, 15.552727], [55.5325, -21.114444]] }, className: animated-line, color: #666 }, { geometry: { type: LineString, coordinates: [[55.5325, -21.114444], [-43.2, -22.9]] }, className: animated-line, color: #666 }, { geometry: { type: LineString, coordinates: [[48.516388, 15.552727], [78, 21]] }, className: animated-line, color: #666 }, { geometry: { type: LineString, coordinates: [[110.004444, -7.491667], [4.9, 52.366667]] }, className: animated-line, color: #666 }, { geometry: { type: LineString, coordinates: [[-3, 55], [-61.030556, 14.681944]] }, className: animated-line, color: #666 }, { geometry: { type: LineString, coordinates: [[2.352222, 48.856613], [-53, 4]] }, className: animated-line, color: #666 } ], lineWidth: 2, enableMouseTracking: false }, // 第三层关键城市标记点位 { type: mappoint, color: #333, dataLabels: { format: b{point.name}/bbrspan stylefont-weight: normal; opacity: 0.5传入年份{point.custom.arrival}/span, align: left, verticalAlign: middle }, data: [ { name: 也门, geometry: { type: Point, coordinates: [48.516388, 15.552727] }, custom: { arrival: 1414 }, dataLabels: { align: right } }, { name: 爪哇, geometry: { type: Point, coordinates: [110.004444, -7.491667] }, custom: { arrival: 1696 } }, { name: 留尼汪岛, geometry: { type: Point, coordinates: [55.5325, -21.114444] }, custom: { arrival: 1708 } }, { name: 巴西, geometry: { type: Point, coordinates: [-43.2, -22.9] }, custom: { arrival: 1770 }, dataLabels: { align: right } }, { name: 印度, geometry: { type: Point, coordinates: [78, 21] }, custom: { arrival: 1670 } }, { name: 阿姆斯特丹, geometry: { type: Point, coordinates: [4.9, 52.366667] }, custom: { arrival: 1696 } }, { name: 安的列斯群岛, geometry: { type: Point, coordinates: [-61.030556, 14.681944] }, custom: { arrival: 1714 }, dataLabels: { align: right } }, { name: 法属圭亚那, geometry: { type: Point, coordinates: [-53, 4] }, custom: { arrival: 1714 }, dataLabels: { align: right } } ], enableMouseTracking: false } ] }); })(); /script /body /htmlHighcharts 实现迁徙地图核心优势三层地理图层原生支持原生map/mapline/mappoint三类地理系列分层实现行政区、路线、点位叠加无需自定义 Canvas 绘制地理元素标准拓扑地图兼容 支持 TopoJSON 全球 / 区域地图内置hc-key国家编码匹配机制快速绑定业务数据自定义扩展字段 data 内可自由增加info/custom等业务字段tooltip、dataLabel 直接读取无需改造数据结构地理坐标原生解析 线段、点位直接使用标准经纬度自动适配地图投影不用坐标换算视野自动适配fitToGeometry根据点位坐标自动缩放地图视野保证所有地理元素完整展示高度可拓展动画 路线支持自定义 CSS 虚线流动动画适合历史传播、物流航线、人口迁徙叙事类可视化多框架轻量化集成 支持 Vue/React适配文旅科普大屏、贸易航线分析、历史人文展示系统。Highcharts Maps类似案例的典型应用场景人文历史农作物 / 物种全球传播、古代文明迁徙、丝绸之路路线国际贸易商品进出口航线、跨境物流流向、产业链全球布局文旅地理旅游客流迁徙、文化遗产全球分布公共卫生传染病全球传播路径、病毒溯源扩散地图产业分析矿产资源分布、海外工厂 / 仓储全球点位可视化。