中文版Echarts世界地图
2024-05-12 01:15:04
Echarts地图中英文映射
需求背景
在Echarts官网下载的世界地图注册文件为英文的国家名称，为提升用户体验修改为中文的国家名称及中文的数据提示。
实现思路
1 - 从官网下载world.json地图注册文件
2 - 将注册文件中的英文名映射为中文名
3 - 将映射后的注册文件进行地图注册
具体实现
1 - 获取world.json文件
2 - 引入映射文件（根据要显示中文/英文，映入不同的映射文件）
说明：目前Echarts地图注册文件支持215个国家的显示。
import {mapZHName} from "./data/mapZHName"
3 - 数据库地图映射
formatWorldMapToZH(data) {let zhFeatures = [];if (data.features) {zhFeatures = data.features.map(item => {if (mapZHName[item.properties.name]){item.properties.name = mapZHName[item.properties.name];}return item;})}data.features = zhFeaturesreturn data;
},
4 - 注册地图
initWorldMap() {if (!this.worldMap){axios.get(worldMap).then(res => {// 地图映射this.worldMap = this.formatWorldMapToZH(res.data);let myChart = this.echarts.init(document.getElementById('worldMap'));this.echarts.registerMap('world', this.worldMap);})}
},
映射文件mapZHName.js
export let mapZHName = {'Afghanistan': '阿富汗','Angola': '安哥拉','Albania': '阿尔巴尼亚','United Arab Emirates': '阿联酋','Argentina': '阿根廷','Armenia': '亚美尼亚','Australia': '澳大利亚','Austria': '奥地利','Azerbaijan': '阿塞拜疆','Burundi': '布隆迪','Belgium': '比利时','Benin': '贝宁','Burkina Faso': '布基纳法索','Bangladesh': '孟加拉','Bulgaria': '保加利亚','Belarus': '白俄罗斯','Belize': '伯利兹','Bermuda': '百慕大','Bolivia': '玻利维亚','Brazil': '巴西','Brunei': '文莱','Bhutan': '不丹','Botswana': '博茨瓦纳','Canada': '加拿大','Switzerland': '瑞士','Chile': '智利','China': '中国','Cameroon': '喀麦隆','Colombia': '哥伦比亚','Costa Rica': '哥斯达黎加','Cuba': '古巴','Cyprus': '塞浦路斯','Germany': '德国','Djibouti': '吉布提','Denmark': '丹麦','Algeria': '阿尔及利亚','Ecuador': '厄瓜多尔','Egypt': '埃及','Eritrea': '厄立特里亚','Spain': '西班牙','Estonia': '爱沙尼亚','Ethiopia': '埃塞俄比亚','Finland': '芬兰','Fiji': '斐济','France': '法国','Gabon': '加蓬','United Kingdom': '英国','Georgia': '格鲁吉亚','Ghana': '加纳','Guinea': '几内亚','Gambia': '冈比亚','Greece': '希腊','Greenland': '格陵兰','Guatemala': '危地马拉','Guyana': '圭亚那','Honduras': '洪都拉斯','Croatia': '克罗地亚','Haiti': '海地','Hungary': '匈牙利','Indonesia': '印度尼西亚','India': '印度','Ireland': '爱尔兰','Iran': '伊朗','Iraq': '伊拉克','Iceland': '冰岛','Israel': '以色列','Italy': '意大利','Jamaica': '牙买加','Jordan': '约旦','Japan': '日本','Kazakhstan': '哈萨克斯坦','Kenya': '肯尼亚','Kyrgyzstan': '吉尔吉斯斯坦','Cambodia': '柬埔寨','Korea': '韩国','Kuwait': '科威特','Lebanon': '黎巴嫩','Liberia': '利比里亚','Libya': '利比亚','Sri Lanka': '斯里兰卡','Lesotho': '莱索托','Lithuania': '立陶宛','Luxembourg': '卢森堡','Latvia': '拉脱维亚','Morocco': '摩洛哥','Moldova': '摩尔多瓦','Madagascar': '马达加斯加','Mexico': '墨西哥','Macedonia': '马其顿','Mali': '马里','Myanmar': '缅甸','Montenegro': '黑山','Mongolia': '蒙古','Mozambique': '莫桑比克','Mauritania': '毛里塔尼亚','Malawi': '马拉维','Malaysia': '马来西亚','Namibia': '纳米比亚','New Caledonia': '新喀里多尼亚','Niger': '尼日尔','Nigeria': '尼日利亚','Nicaragua': '尼加拉瓜','Netherlands': '荷兰','Norway': '挪威','Nepal': '尼泊尔','New Zealand': '新西兰','Oman': '阿曼','Pakistan': '巴基斯坦','Panama': '巴拿马','Peru': '秘鲁','Philippines': '菲律宾','Papua New Guinea': '巴布亚新几内亚','Poland': '波兰','Puerto Rico': '波多黎各','Portugal': '葡萄牙','Paraguay': '巴拉圭','Qatar': '卡塔尔','Romania': '罗马尼亚','Russia': '俄罗斯','Rwanda': '卢旺达','Saudi Arabia': '沙特阿拉伯','Sudan': '苏丹','Senegal': '塞内加尔','Sierra Leone': '塞拉利昂','El Salvador': '萨尔瓦多','Somalia': '索马里','Suriname': '苏里南','Slovakia': '斯洛伐克','Slovenia': '斯洛文尼亚','Sweden': '瑞典','Swaziland': '斯威士兰','Syria': '叙利亚','Chad': '乍得','Togo': '多哥','Thailand': '泰国','Tajikistan': '塔吉克斯坦','Turkmenistan': '土库曼斯坦','Trinidad and Tobago': '特立尼达和多巴哥','Tunisia': '突尼斯','Turkey': '土耳其','Uganda': '乌干达','Ukraine': '乌克兰','Uruguay': '乌拉圭','United States': '美国','Uzbekistan': '乌兹别克斯坦','Venezuela': '委内瑞拉','Vietnam': '越南','Vanuatu': '瓦努阿图','Yemen': '也门','South Africa': '南非','Zambia': '赞比亚','Zimbabwe': '津巴布韦','Liechtenstein':'列支敦士登','Serbia':'塞尔维亚',"Aland": "奥兰群岛","Andorra": "安道尔","American Samoa": "美属萨摩亚","Antigua and Barb.": "安提瓜和巴布达","Bahrain": "巴林","Bahamas": "巴哈马","Bosnia and Herz.": "波斯尼亚和黑塞哥维那","Barbados": "巴巴多斯","Central African Rep.": "中非","Dem. Rep. Congo": "刚果民主共和国","Congo": "刚果","Comoros": "科摩罗","Cape Verde": "佛得角","Curaçao": "库拉索","Cayman Is.": "开曼群岛","Czech Rep.": "捷克","Dominica": "多米尼克","Falkland Is.": "福克兰群岛","Faeroe Is.": "法罗群岛","Micronesia": "密克罗尼西亚联邦","Guinea-Bissau": "几内亚比绍","Eq. Guinea": "赤道几内亚","Grenada": "格林纳达","Guam": "关岛","Isle of Man": "马恩岛","Br. Indian Ocean Ter.": "英属印度洋领地","Jersey": "泽西岛","Kiribati": "基里巴斯","Lao PDR": "老挝","Saint Lucia": "圣卢西亚","Malta": "马耳他","N. Mariana Is.": "北马里亚纳群岛","Montserrat": "蒙特塞拉特岛","Mauritius": "毛里求斯","Niue": "纽埃岛","Palau": "帕劳","Dem. Rep. Korea":"韩国","Palestine": "巴勒斯坦","Fr. Polynesia": "法属波利尼西亚","S. Sudan": "南苏丹","Singapore": "新加坡","Saint Helena":"圣赫勒拿","Solomon Is.": "所罗门群岛","St. Pierre and Miquelon": "圣皮埃尔和密克隆群岛","São Tomé and Principe": "圣多美和普林西比","Seychelles": "塞舌尔","Turks and Caicos Is.": "特克斯和凯科斯群岛","Timor-Leste": "东帝汶","Tonga": "汤加","Tanzania": "坦桑尼亚","St. Vin. and Gren.": "圣文森特和格林纳丁斯","U.S. Virgin Is.": "美属维尔京群岛","Samoa": "萨摩亚","W. Sahara":"西撒哈拉","Fr. S. Antarctic Lands":"马提尼克岛","Côte d'Ivoire":"科特迪瓦","N. Cyprus":"东塞浦路斯","Dominican Rep.": "多米尼加","Heard I. and McDonald Is.":"赫德岛和麦克唐纳群岛","Siachen Glacier":"锡亚琴冰川","S. Geo. and S. Sandw. Is.":"南乔治亚岛与南桑威奇群岛"
};
中文版Echarts世界地图相关推荐
- echarts 世界地图 地图不渲染问题
这两天新接到需求,要求做一个echarts世界地图,然后去Gallery中找到了一各demo 编写的时候出现了地图不显示,而柱状图和饼状图没问题的情况 解决方法 1.首先,引入第三方脚本,里面存放的是 ...
- Echarts世界地图汉化及其数据包
Echarts世界地图是英文的 ,显示汉化常规有两个办法: 1.使用汉化后的地图数据 [推荐] 2.添加nameMap映射对象 1.使用汉化后的地图数据[推荐] 汉化包下载地址:mrz8 链接:htt ...
- Echarts世界地图的国家名称中文化
Echarts的世界地图的国家名称是英文,但是给的数据是中文名称,会导致在地图上标出来点来,为了解决这个问题,可以参见http://echarts.baidu.com/echarts2/doc/exa ...
- 在VUE中使用Echarts世界地图，并根据经纬度标记位置
项目需求: 根据经纬度在地图上标记(14种不同类型的标记)出位置,点击标记后出现 详细内容,再点击内容跳转页面 一.下载 echarts 包 npm install --save echarts 二. ...
- echarts世界地图
<!-- 世界地图页面 --> <template><div class="map-wrap"><div class="worl ...
- Vue Echarts世界地图
1.绘制世界地图如下: 2,开始绘制地图 //安装Echarts npm install echarts --save 3.在Main.js中引入word.js世界地图 import '../node ...
- echarts世界地图，国家名称翻译
用echarts绘制世界地图,world.json里面的国家名称都是英文的,需要再引入一个地名翻译json文件,我在网上找过几个,都翻译的不太完整,下面是我补充后的,整个地图望上去的地方都翻译出来了. ...
- Echarts世界地图以中国为中心
世界地图常用的展示方式有两种,分别以太平洋和大西洋为中心,一个中国在右侧,一个中国在左侧偏中间, 目前使用Echarts绘制世界地图,出来的都是西半球地图,中国在右边, 想要实现世界地图以中国为中心, ...
- echarts世界地图中美国、俄罗斯的文字标注偏移bug
一.bug描述 我们在使用world.js文件生成的世界地图时,发现美国和俄罗斯的文字标注存在严重偏移: 二.解决办法 找到引入的echarts.min.js文件并打开 <head>< ...
最新文章
- linux系统photoshop安装教程,在ubuntu中安装photoshop cs6
- linux大文件拷贝,Linux如何提高大文件的拷贝效率
- 导致溢出_由整数类型溢出导致的英雄联盟峡谷惨案
- matlab p-tite分割图像,P'tite fourmi
- 更新pip到指定版本
- React Native Weex 区别
- python编码格式有哪些_Python JSON编解码的方式有哪些
- mysql 存取字符集_MySQL字符集设置—MySQL数据库乱码问题详解
- httpservletresponse 重定向浏览器不变的原因_正确区分火狐浏览器(Firefox)中国版和国际版amp;下载方法...
- WPF中，输入完密码回车提交 ，回车触发按钮点击事件
- java 学习资料总结
- 基于SSM的大学生助学贷款管理系统
- 自然资源部标准地图底图转矢量Shapefile并配准
- 如何用html放音乐播放器,如何用html+js实现音乐歌词同步播放器
- 我的世界服务器怎么无限附魔,我的世界无限附魔书指令
- 143578-65-8，CYCLO(-D-PHE-HIS-TRP-ALA-VAL-GLY-HIS-LEU-LEU)
- VIP邮箱移动办公平台软件，疫情居家办公小助手
- c语言实现utf-8编码解码器
- 单片机（MCU）复位电路
- 如何在局域网中查看其他电脑上的文件