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

2024-07-09 08:43| 来源: 网络整理| 查看: 265

文章目录需求描述实现思路具体实现1、echarts世界地图echarts世界地图示例代码在线运行图表配置项 2、世界国旗图标参考代码及资源下载echarts显示自定义范围的地图图表比官网更丰富的echarts示例！参考网址

需求描述

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

实现思路

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

具体实现 1、echarts世界地图

在我的印象中，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

比官网更丰富的echarts示例！

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

参考网址

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

【本文地址】

公司简介

联系我们