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

news/2024/11/22 12:13:14/

需求描述

将接口返回的中文国家名称做两种展示:①在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


http://www.ppmy.cn/news/404205.html

相关文章

世界各国国旗大全

类别: 转帖精华? 查看评论

国庆节快到了,用 Python 给自己制作国旗头像,其实很简单。

国庆节的时候,很多地方都会升挂国旗,庆祝祖国一年一度的节日。给自己制作国旗头像,是一件很有意义的事。微信官方就曾经举办过活动。 制作国旗头像的方法有很多,本文给大家介绍用Python制作渐变的微信国旗头像。 效果展示 渐变的…

新加坡国旗的绘制(完整版)

1、结果展示 2、数据处理 首先,我们在网上找了一个新加坡图片的矢量图,将其放进CAD 中进行测量,采集数据。数据结果如下: 找出图形之间位置关系: 对采集的数据进行处理: 3、代码展示: 1&#…

马来西亚国国旗

马来西亚国旗初步 (1)国旗图片 十四条红白相见的横条 十四角星 弦月 红色代表勇敢 蓝色象征团结 白色表示纯净 黄色表示国家元首 (2)国旗设计坐标长度比例关系 弦月 两个半径不同的圆组合出 十四角星 两个半径不…

巴基斯坦国旗

巴基斯坦国旗 巴基斯坦国旗呈长方形,长与宽之比为3:2。左侧是白色竖长方形,宽度占整个旗面的1/4;右侧为深绿色长方形,中央有一颗白色五角星和一弯白色新月。白色象征和平,代表国内信奉印度教、佛教、基督教、祆教的居…

以色列国旗

一 国旗样式 二 国旗介绍 以色列国国旗,是以色列国的国旗,国旗的形状是长方形;国旗的长宽之比约为3:2旗地为白色,上下各有一条蓝色宽带。蓝白两色来自犹太教徒祈祷时用的披肩的颜色。 1354年,波希米亚国王查理四世为…

canvas绘制中国国旗!

绘制中国国旗 1、题目 今天刚学了H5中的画布canvas元素,课堂上的案例挺有意思,就心血来潮想利用canvas绘制中国国旗; 2、思路 第一步,创建画布元素,在画布内作好辅助线和网格线来确定圆的位置;第二步&…

加密与解密 调试篇 动态调试技术 (五)-WinDbg

windbg主要厉害的地方是在他可以对内核调试 并且本身微软的产品 对windows调试适配度够高 注意 windbg给出的图形操作并不好用 主要是使用命令行来进行操作 我们省略安装 直接进入调试 file 可以打开软件 可以附加也可以分析dump文件还可以进行内核和 远程调试内核调试分为…