echarts 渲染 geojson 常见问题记录

2023-11-09

转载请加原文链接。

希望各位转载本文章的时候不要直接复制粘贴（因为格式可能会乱，你也不希望每次百度到的结果前篇一律且参差不齐吧！）

效果图

如何找 GeoJson 数据

找到具有案例的某某官网，如：echarts
控制台查看网络请求
找到官网所使用的数据来源，可能是 js 也可能是 json 数据。
下载下来提取想要的数据即可

本人常用的数据下载地址：

阿里云的地图选择器、Natural Earth 、GeoJson.io 、Highcharts 世界地图

合并 GeoJson 数据

你可能希望画一个 世界地图 ，又希望这份数据里面包含详细的 中国省份地图 。那你不妨把 china.json 的数据直接拷贝到 world.json 的源数据中去。（可以代码实现也可以手动拷贝，请不要破坏原有的数据结构）

渲染地名发生位置偏移

经常有数据的地名不在区域内部显示，本人尝试设置 label.offset 来解决问题，但设置无效。最终修改 json 文件，添加 "cp": [lng, lat] 解决了问题。如：

"properties": {
  "name": "Japan",
  "cp": [139.2612315007275, 37.21842217845101], // 没有就添加此属性
  "childNum": 28
}

自定义渲染地名

参考官方文档：geo.regions

大家应该都遇到过地图上地名挤作一团的情况，有的时候其实我们并不关心某些地区。那么我们可以自定义显示想要显示的地名。

第一步：先设置不显示地名

geo: {
  ...
  label: {
    show: false
  }
  ...
}

第二步：单独设置 regions

geo: {
  ...
  regions: [{
    name: '中华人民共和国', // 地名
    label: {
        show: true, // 单独控制显隐
        color: 'red'
    }
  }],
  ...
}

为不同区域上色也可以使用此方式。

获取点击位置的经纬度

参考官方文档：echartsInstance.convertFromPixel

echartsInstance.getZr().on('click', (params) => {
  console.log(echartsInstance.convertFromPixel({ geoIndex: 0 }, [params.event.offsetX, params.event.offsetY]));
});

这里直接用 echartsInstance.on('click', (params) => { /*...*/ }) 将无法获取非 geojson 数据外的坐标。

拖动和缩放画布事件

这个官方文档暂时没有明确提供说明。

echartsInstance.on('georoam', (params) => {
  // zoom 作为标识判断事件类型
  if (params.zoom) {
    console.log('触发缩放事件')
  } else {
    console.log('触发拖拽事件')
  }
})

你可能会在画布上画一些散点图，然后在对画布进行缩放的时候导致散点图慢慢发生偏移，不妨尝试设置 animation: false。

改变尺寸

参考官方文档：echartsInstance.resize

打开调试的时候发现地图的大小不会随窗口的大小而自适应的发生改变，查阅官方文档发现需要手动触发 echartsInstance.resize()

window.addEventListener('resize', () => { echartsInstance.resize() })

地名映射表（英对中）

用于 geo 的 nameMap。

{
   'Afghanistan': '阿富汗',
   'Angola': '安哥拉',
   'Albania': '阿尔巴尼亚',
   'United Arab Emirates': '阿联酋',
   'Argentina': '阿根廷',
   'Armenia': '亚美尼亚',
   'French Southern and Antarctic Lands': '法属南半球和南极领地',
   'Australia': '澳大利亚',
   'Austria': '奥地利',
   'Azerbaijan': '阿塞拜疆',
   'Burundi': '布隆迪',
   'Belgium': '比利时',
   'Benin': '贝宁',
   'Burkina Faso': '布基纳法索',
   'Bangladesh': '孟加拉国',
   'Bulgaria': '保加利亚',
   'The Bahamas': '巴哈马',
   'Bosnia and Herzegovina': '波斯尼亚和黑塞哥维那',
   'Belarus': '白俄罗斯',
   'Belize': '伯利兹',
   'Bermuda': '百慕大',
   'Bolivia': '玻利维亚',
   'Brazil': '巴西',
   'Brunei': '文莱',
   'Bhutan': '不丹',
   'Botswana': '博茨瓦纳',
   'Central African Republic': '中非共和国',
   'Canada': '加拿大',
   'Switzerland': '瑞士',
   'Chile': '智利',
   'China': '中华人民共和国',
   'Ivory Coast': '象牙海岸',
   'Cameroon': '喀麦隆',
   'Democratic Republic of the Congo': '刚果民主共和国',
   'Republic of the Congo': '刚果共和国',
   'Colombia': '哥伦比亚',
   'Costa Rica': '哥斯达黎加',
   'Cuba': '古巴',
   'Northern Cyprus': '北塞浦路斯',
   'Cyprus': '塞浦路斯',
   'Czech Republic': '捷克共和国',
   'Germany': '德国',
   'Djibouti': '吉布提',
   'Denmark': '丹麦',
   'Dominican Republic': '多明尼加共和国',
   'Algeria': '阿尔及利亚',
   'Ecuador': '厄瓜多尔',
   'Egypt': '埃及',
   'Eritrea': '厄立特里亚',
   'Spain': '西班牙',
   'Estonia': '爱沙尼亚',
   'Ethiopia': '埃塞俄比亚',
   'Finland': '芬兰',
   'Fiji': '斐',
   'Falkland Islands': '福克兰群岛',
   'France': '法国',
   'Gabon': '加蓬',
   'United Kingdom': '英国',
   'Georgia': '格鲁吉亚',
   'Ghana': '加纳',
   'Guinea': '几内亚',
   'Gambia': '冈比亚',
   'Guinea Bissau': '几内亚比绍',
   'Equatorial Guinea': '赤道几内亚',
   'Greece': '希腊',
   'Greenland': '格陵兰',
   'Guatemala': '危地马拉',
   'French Guiana': '法属圭亚那',
   'Guyana': '圭亚那',
   'Honduras': '洪都拉斯',
   'Croatia': '克罗地亚',
   'Haiti': '海地',
   'Hungary': '匈牙利',
   'Indonesia': '印尼',
   'India': '印度',
   'Ireland': '爱尔兰',
   'Iran': '伊朗',
   'Iraq': '伊拉克',
   'Iceland': '冰岛',
   'Israel': '以色列',
   'Italy': '意大利',
   'Jamaica': '牙买加',
   'Jordan': '约旦',
   'Japan': '日本',
   'Kazakhstan': '哈萨克斯坦',
   'Kenya': '肯尼亚',
   'Kyrgyzstan': '吉尔吉斯斯坦',
   'Cambodia': '柬埔寨',
   'South Korea': '韩国',
   'Dem. Rep. Korea': '韩国',
   'Kosovo': '科索沃',
   'Kuwait': '科威特',
   'Laos': '老挝',
   'Lao PDR': '老挝',
   'Lebanon': '黎巴嫩',
   'Liberia': '利比里亚',
   'Libya': '利比亚',
   'Sri Lanka': '斯里兰卡',
   'Lesotho': '莱索托',
   'Lithuania': '立陶宛',
   'Luxembourg': '卢森堡',
   'Latvia': '拉脱维亚',
   'Morocco': '摩洛哥',
   'Moldova': '摩尔多瓦',
   'Madagascar': '马达加斯加',
   'Mauritius': '毛里求斯',
   'Seychelles': '塞舌尔',
   'Br. Indian Ocean Ter.': '印度洋',
   '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': '波多黎各',
   'North Korea': '北朝鲜',
   'Korea': '朝鲜',
   'Portugal': '葡萄牙',
   'Paraguay': '巴拉圭',
   'Qatar': '卡塔尔',
   'Romania': '罗马尼亚',
   'Russia': '俄罗斯',
   'Rwanda': '卢旺达',
   'Western Sahara': '西撒哈拉',
   'Saudi Arabia': '沙特阿拉伯',
   'Sudan': '苏丹',
   'South Sudan': '南苏丹',
   'Senegal': '塞内加尔',
   'Solomon Islands': '所罗门群岛',
   'Sierra Leone': '塞拉利昂',
   'El Salvador': '萨尔瓦多',
   'Somaliland': '索马里兰',
   'Somalia': '索马里',
   'Republic of Serbia': '塞尔维亚共和国',
   'Suriname': '苏里南',
   'Slovakia': '斯洛伐克',
   'Slovenia': '斯洛文尼亚',
   'Sweden': '瑞典',
   'Swaziland': '斯威士兰',
   'Syria': '叙利亚',
   'Chad': '乍得',
   'Togo': '多哥',
   'Thailand': '泰国',
   'Tajikistan': '塔吉克斯坦',
   'Turkmenistan': '土库曼斯坦',
   'East Timor': '东帝汶',
   'Trinidad and Tobago': '特里尼达和多巴哥',
   'Tunisia': '突尼斯',
   'Turkey': '土耳其',
   'United Republic of Tanzania': '坦桑尼亚联合共和国',
   'Uganda': '乌干达',
   'Ukraine': '乌克兰',
   'Uruguay': '乌拉圭',
   'United States of America': '美国',
   'United States': '美国',
   'Uzbekistan': '乌兹别克斯坦',
   'Venezuela': '委内瑞拉',
   'Vietnam': '越南',
   'Vanuatu': '瓦努阿图',
   'West Bank': '西岸',
   'Yemen': '也门',
   'South Africa': '南非',
   'Zambia': '赞比亚',
   'Zimbabwe': '津巴布韦'
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

echarts

地图

GeoJson

GIS

解决