世界国旗/地图：世界各国国旗图标整理/与echarts世界地图配置对应

需求描述

将接口返回的中文国家名称做两种展示：①在echarts世界地图中高亮显示对应的国家区域；②在一个列表中显示带有国旗图标的国家名称，预期效果如下图所示：

实现思路

带有国旗图标的列表实现思路较简单，通过网络收集所有国旗图标后显示即可；由于实现世界地图高亮效果使用echarts，其引用的国家轮廓经纬度列表world.json中使用了固定的英文字符串命名每个国家，所以必须将接口返回的中文国家名称与world.json中的英文字符串一一对应，且使用world.json中的英文字符串（若其中存在空格则替换成下划线）来命名对应的国旗便于引用。

具体实现

1、echarts世界地图

在我的印象中，echarts有提供与效果图类似的在线示例，但翻遍了官网只找到以下这则相关声明：

最后根据一位同事提供的示例代码，在官网的在线示例中运行得到了预期的效果（现在官网的旧版/新版在线示例中确实找不到这个世界地图了，但还是可以运行的）：

echarts世界地图示例代码

// echarts世界地图示例代码
myChart.showLoading();
let projection;
$.when($.get(ROOT_PATH + '/data/asset/geo/world.json'),$.getScript('https://fastly.jsdelivr.net/npm/d3-array'),$.getScript('https://fastly.jsdelivr.net/npm/d3-geo')
).done(function (res) {myChart.hideLoading();echarts.registerMap('world', res[0]);projection = d3.geoOrthographic();option = {series: [{type: 'map',map: 'world',itemStyle: {borderColor: '#333',borderWidth: 1,borderJoin: 'round',color: 'grey'},emphasis: {label: {show: false},itemStyle: {color: 'skyblue'}},regions: [{name: 'graticule',itemStyle: {borderColor: '#bbb'},emphasis: {disabled: true}}],data: [{ name: 'China', selected: true }]}]};myChart.setOption(option);
});option && myChart.setOption(option);

在线运行

可以拷贝到这个在线示例运行调试：2012年美国人口统计

图表配置项

echarts地图的配置项看这里：配置项-地图系列
在vue中使用echarts地图图表的Demo和国旗图标资源均可通过文末的Gitee链接拉取

2、世界国旗图标

这个收集过程其实没有什么技术含量。。笔者花了将近两天从网络一个一个下载了所有能找到的国旗图标（整理不易，求赞求收藏哈~★▼★~；此外，依然可能有未收集到、或中文名称不同导致匹配不到对应国旗的情况，那就麻烦自行处理一下啦），其中大多数图标来源于世界各国国旗图案这一网站，为了保持格式统一，笔者整理的所有国旗图标都是“.git”格式，还请留意。

其余的国旗图标大多来自百度百科，这里分享一个亲测有效去除百度图片水印的方法：最简单的百度图片去水印

参考代码及资源下载

国旗图标资源以及vue中引用图标、使用echarts世界地图的参考代码都已上传到笔者个人的Gitee仓库，有需要的小伙伴可自行拉取（代码仅提供核心逻辑实现参考，无法直接运行）：

仓库链接：https://gitee.com/smm311/my-demos.git
分支：worldMapFlagDemo

echarts显示自定义范围的地图图表

如果需要在echarts显示自定义范围的地图图表，只需要下载对应的轮廓经纬度列表json并引用（与示例中引用world.json一样）即可，下载方法可参考：echarts map中如何获取所需要的json

参考网址

[1] echarts在线示例-2012年美国人口统计
[2] echarts配置项-地图系列
[3] 世界各国国旗图案
[4] 最简单的百度图片去水印
[5] echarts map中如何获取所需要的json