如何在Echarts世界地图中使用中文地名

如何在Echarts世界地图中使用中文地名

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 = zhFeatures
  return 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.":"南乔治亚岛与南桑威奇群岛"
};
  • 7
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
免费分享大家 [44.38652343750002,10.430224609374989],[44.94296875,10.43671875],[45.81669921875002,10.835888671874997],[46.565039062500006,10.745996093749994],[47.40498046875001,11.174023437499997],[48.01923828125001,11.139355468749997],[48.57255859375002,11.320507812499997],[48.938574218750006,11.258447265624994],[50.11005859375001,11.529296875],[50.79228515625002,11.983691406249989],[51.2548828125,11.830712890624994],[51.08427734375002,11.335644531249997],[51.140625,10.656884765624994],[51.031835937500006,10.444775390624997],[51.19296875,10.554638671874997],[51.390234375,10.422607421875],[50.93007812500002,10.33554687499999],[50.825,9.428173828124997],[50.10283203125002,8.199804687499991],[49.85205078125,7.962548828124994],[49.234960937500006,6.77734375],[49.04931640625,6.173632812499989],[47.97529296875001,4.497021484374997],[46.87880859375002,3.28564453125],[46.05117187500002,2.475146484374989],[44.92021484375002,1.81015625],[43.71757812500002,0.857861328124997],[41.97988281250002,-0.973046875],[41.53271484375,-1.6953125],[41.521875,-1.572265625],[41.42695312500001,-1.449511718750003],[41.24980468750002,-1.220507812500003],[40.97871093750001,-0.870312500000011],[40.964453125,2.814648437499997],[41.341796875,3.20166015625],[41.61347656250001,3.590478515624994],[41.88398437500001,3.977734375],[41.91533203125002,4.031298828124989],[42.02412109375001,4.137939453125],[42.85664062500001,4.32421875],[43.12568359375001,4.644482421874997],[43.58349609375,4.85498046875],[43.988867187500006,4.950537109374991],[44.940527343750006,4.912011718749994],[47.97822265625001,7.9970703125]]]},"properties":{"name":"索马里","childNum":1}},{"geometry":{"type":"Polygon","coordinates":[[[9.579979133936737,47.05856388629306],[9.409458596647225,47.02019676540292],[9.46249431093294,47.09010747968864],[9.46249431093294,47.19858962254578],[9.527658197470123,47.27026989773668],[9.579979133936737,47.05856388629306]]]},"properties":{"name":"列支敦斯登","childNum":1}},{"geometry":{"type":"Polygon","coordinates":[[[-8.683349609375,27.77800740805682],[-13.038761787013554,27.81190166624856],[-12.948925781249926,27.914160156250034],[-11.552685546874955,28.31010742187496],[-10.486474609374994,29.06494140625],[-10.200585937499994,29.380371093750057],[-9.667089843749949,30.10927734375005],[-9.652929687499977,30.447558593750045],[-9.875488281249943,30.717919921874966],[-9.80869140624992,31.42460937499996],[-9.347460937499932,32.086376953124955],[-9.245849609375,32.572460937499955],[-8.512841796874994,33.25244140625003],[-6.900976562499949,33.96904296874999],[-6.353125,34.77607421875001],[-5.924804687499943,35.78579101562502],[-5.277832031249943,35.90273437500002],[-5.252685546874972,35.61474609374997],[-4.628320312499966,35.206396484375006],[-4.329980468749937,35.161474609375006],[-3.693261718749994,35.27998046874998],[-3.394726562499926,35.21181640625005],[-2.972216796874989,35.40727539062499],[-2.839941406249949,35.127832031249994],[-2.731396484374955,35.13520507812498],[-2.636816406249977,35.11269531250002],[-2.423730468749994,35.12348632812498],[-2.219628906249966,35.10419921874998],[-1.795605468749926,34.751904296874955],[-1.67919921875,33.31865234375002],[-1.550732421874955,33.073583984375006],[-1.510009765625,32.877636718749955],[-1.45,32.784814453124966],[-1.352148437499977,32.70336914062497],[-1.29638671875,32.67568359375002],[-1.188232421875,32.608496093750006],[-1.111035156249983,32.55229492187502],[-1.065527343749949,32.46831054687496],[-1.16259765625,32.399169921875],[-1.275341796874983,32.089013671874966],[-2.863427734374937,32.07470703124997],[-2.930859374999926,32.04252929687499],[-2.988232421874983,31.874218749999983],[-3.01738281249996,31.834277343750017],[-3.439794921874949,31.704541015624983],[-3.604589843749949,31.686767578125],[-3.700244140624989,31.70009765625005],[-3.768164062499977,31.689550781250034],[-3.837109374999983,31.512353515624994],[-3.833398437499937,31.197802734375045],[-3.626904296874955,31.000927734374983],[-4.148779296874977,30.8095703125],[-4.322851562500006,30.698876953124994],[-4.52915039062492,30.62553710937499],[-4.778515624999926,30.552392578124994],[-4.968261718749943,30.465380859375045],[-5.061914062499937,30.326416015625057],[-5.180126953124955,30.166162109374994],[-5.293652343749983,30.058642578125045],[-5.44877929687496,29.956933593750023],[-6.00429687499999,29.83125],[-6.479736328124943,29.82036132812499],[-6.520556640624989,29.659863281249983],[-6.59775390624992,29.578955078125006],[-6.635351562499949,29.568798828124983],[-6.755126953125,29.583837890625034],[-6.855566406249949,29.601611328125017],[-7.142431640624949,29.61958007812504],[-7.427685546874983,29.425],[-7.485742187499994,29.392236328124994],[-8.659912109375,28.718603515625063],[-8.683349609375,27.900390625],[-8.683349609375,27.77800740805682]]]},"properties":{"name":"摩洛哥","childNum":1}},{"geometry":{"type":"Polygon","coordinates":[[[-13.038761787013554,27.81190166624856],[-8.683349609375,27.
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值