世界国旗/地图：世界各国国旗图标整理/与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);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

在线运行

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

图表配置项

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

2、世界国旗图标

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

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

参考代码及资源下载

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

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

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

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

比官网更丰富的echarts示例！

强烈推荐一个有非常丰富的echarts在线示例的网站：PPChart，但由于遭到DDOS攻击，PPChart服务不太稳定，大家也可以访问PPChart开发者推荐的另外两个站点：madeapie、isqqw
创作这篇博客时笔者还不知道PPChart，Emm…这三个站点上的echarts地图示例简直不要太多了，大家可自行跳转参考

参考网址

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