菜单 搜索
首页 前端知识 Echarts获取国家json文件（非洲国家地图，动态选中地图上国家）

Echarts获取国家json文件（非洲国家地图，动态选中地图上国家）

2024-02-11 10:02:23 前端知识 前端哥 560 718 我要收藏 
复制

前言

需求：使用echarts构建非洲地图并通过下拉框动态选中地图中得国家。

思路：网上没有现成的非洲国家地图json坐标数据，只有世界国家地图json坐标数据，所以首先找到非洲所有国家中英文名称，然后根据非洲国家名称从世界国家地图json坐标数据提取出来非洲国家json坐标数据。然后再根据非洲国家json坐标数据填充Echarts,然后再实现动态选中地图上的国家。

一、非洲国家地图json坐标数据文件获取

步骤1、非洲国家名称中英文对照表。

对照表如下：

[{"zh":"埃及","en":"Egypt"},{"zh":"苏丹","en":"Sudan"},{"zh":"利比亚","en":"Libya"},{"zh":"突尼斯","en":"Tunis"},{"zh":"摩洛哥","en":"Maroc"},{"zh":"阿尔及利亚","en":"Algeria"},{"zh":"西撒哈拉","en":"Western Sahara"},{"zh":"毛里塔尼亚","en":"Mauritania"},{"zh":"塞内加尔","en":"Senegal"},{"zh":"冈比亚","en":"Gambia"},{"zh":"马里","en":"Mali"},{"zh":"几内亚比绍","en":"Guine"},{"zh":"几内亚","en":"Guine"},{"zh":"塞拉利昂","en":"Sierra Leone"},{"zh":"佛得角","en":"Cape Verde"},{"zh":"利比里亚","en":"Liberia"},{"zh":"科特迪瓦","en":"Cote dIvoire"},{"zh":"加纳","en":"Ghana"},{"zh":"多哥","en":"Togo"},{"zh":"贝宁","en":"Benin"},{"zh":"布基纳法索","en":"Burkina faso"},{"zh":"尼日尔","en":"Niger"},{"zh":"乍得","en":"Chad"},{"zh":"尼日利亚","en":"Nigeria"},{"zh":"喀麦隆","en":"Cameroun"},{"zh":"赤道几内亚","en":"Equatorial Guinea"},{"zh":"中非","en":"Central African"},{"zh":"埃塞俄比亚","en":"Ethiopia"},{"zh":"厄立特里亚","en":"Eritrea"},{"zh":"吉布提","en":"Djibouti"},{"zh":"索马里","en":"Somali"},{"zh":"肯尼亚","en":"Kenya"},{"zh":"布隆迪","en":"Burundi"},{"zh":"乌干达","en":"Uganda"},{"zh":"坦桑尼亚","en":"Tanzania"},{"zh":"赞比亚","en":"Zambia"},{"zh":"纳米比亚","en":"Namibia"},{"zh":"莱索托","en":"Lesotho"},{"zh":"南非","en":"South Africa"},{"zh":"斯威士兰","en":"Swaziland"},{"zh":"卢旺达","en":"Rwanda"},{"zh":"莫桑比克","en":"Mozambique"},{"zh":"津巴布韦","en":"Zimbabwe"},{"zh":"博茨瓦纳","en":"Botswana"},{"zh":"马拉维","en":"Malawi"},{"zh":"刚果（金)","en":"Congo(K)"},{"zh":"刚果（布)","en":"Congo(B)"},{"zh":"加蓬","en":"Gabon"},{"zh":"圣多美和普林西比","en":"Sao Tome and Principe"},{"zh":"安哥拉","en":"Angola"},{"zh":"马达加斯加","en":"Madagascar"},{"zh":"毛里求斯","en":"Mauritius"},{"zh":"科摩罗","en":"Comores"},{"zh":"塞舌尔","en":"Seychelles"},{"zh":"留尼汪","en":"Reunion"},{"zh":"圣赫勒拿","en":"Saint Helena"},{"zh":"南苏丹","en":"S. Sudan"},{"zh":"中非共和国","en":"Central African Republic"},{"zh":"喀麦隆","en":"Cameroon"},{"zh":"赤道几内亚","en":"Eq. Guinea"},{"zh":"赤道几内亚","en":"Republic of the Congo"},{"zh":"赤道几内亚","en":"Democratic Republic of the Congo"},{"zh":"赤道几内亚","en":"Ivory Coast"},{"zh":"赤道几内亚","en":"Burkina Faso"},{"zh":"赤道几内亚","en":"Guinea"},{"zh":"赤道几内亚","en":"Guinea-Bissau"},{"zh":"赤道几内亚","en":"Cape Verde"},{"zh":"赤道几内亚","en":"Tunisia"},{"zh":"赤道几内亚","en":"Morocco"},{"zh":"赤道几内亚","en":"W. Sahara"},{"zh":"赤道几内亚","en":"Somalia"},{"zh":"赤道几内亚","en":"Côte d'Ivoire"},{"zh":"赤道几内亚","en":"Dem. Rep. Congo"},{"zh":"赤道几内亚","en":"Central African Rep."},{"zh":"赤道几内亚","en":"Congo"}]
复制

 步骤2、下载世界国家地图json坐标数据文件。

https://echarts.apache.org/examples/data/asset/geo/world.json

步骤3、提取非洲国家坐标数据

我是使用js做的提取，用别的语言也行，就是循环匹配，没啥难度，见下方代码

   //worldjson:世界地图json ，循环获取世界地图所有国家名称
    var crrty =[];
	  for(var i=0;i<worldjson.features.length;i++){
      crrty.push(worldjson.features[i].properties.name) 
    }
    //非洲国家中英文
    var feizhouguojia =[{"zh":"埃及","en":"Egypt"},{"zh":"苏丹","en":"Sudan"},{"zh":"利比亚","en":"Libya"},{"zh":"突尼斯","en":"Tunis"},{"zh":"摩洛哥","en":"Maroc"},{"zh":"阿尔及利亚","en":"Algeria"},{"zh":"西撒哈拉","en":"Western Sahara"},{"zh":"毛里塔尼亚","en":"Mauritania"},{"zh":"塞内加尔","en":"Senegal"},{"zh":"冈比亚","en":"Gambia"},{"zh":"马里","en":"Mali"},{"zh":"几内亚比绍","en":"Guine"},{"zh":"几内亚","en":"Guine"},{"zh":"塞拉利昂","en":"Sierra Leone"},{"zh":"佛得角","en":"Cape Verde"},{"zh":"利比里亚","en":"Liberia"},{"zh":"科特迪瓦","en":"Cote dIvoire"},{"zh":"加纳","en":"Ghana"},{"zh":"多哥","en":"Togo"},{"zh":"贝宁","en":"Benin"},{"zh":"布基纳法索","en":"Burkina faso"},{"zh":"尼日尔","en":"Niger"},{"zh":"乍得","en":"Chad"},{"zh":"尼日利亚","en":"Nigeria"},{"zh":"喀麦隆","en":"Cameroun"},{"zh":"赤道几内亚","en":"Equatorial Guinea"},{"zh":"中非","en":"Central African"},{"zh":"埃塞俄比亚","en":"Ethiopia"},{"zh":"厄立特里亚","en":"Eritrea"},{"zh":"吉布提","en":"Djibouti"},{"zh":"索马里","en":"Somali"},{"zh":"肯尼亚","en":"Kenya"},{"zh":"布隆迪","en":"Burundi"},{"zh":"乌干达","en":"Uganda"},{"zh":"坦桑尼亚","en":"Tanzania"},{"zh":"赞比亚","en":"Zambia"},{"zh":"纳米比亚","en":"Namibia"},{"zh":"莱索托","en":"Lesotho"},{"zh":"南非","en":"South Africa"},{"zh":"斯威士兰","en":"Swaziland"},{"zh":"卢旺达","en":"Rwanda"},{"zh":"莫桑比克","en":"Mozambique"},{"zh":"津巴布韦","en":"Zimbabwe"},{"zh":"博茨瓦纳","en":"Botswana"},{"zh":"马拉维","en":"Malawi"},{"zh":"刚果（金)","en":"Congo(K)"},{"zh":"刚果（布)","en":"Congo(B)"},{"zh":"加蓬","en":"Gabon"},{"zh":"圣多美和普林西比","en":"Sao Tome and Principe"},{"zh":"安哥拉","en":"Angola"},{"zh":"马达加斯加","en":"Madagascar"},{"zh":"毛里求斯","en":"Mauritius"},{"zh":"科摩罗","en":"Comores"},{"zh":"塞舌尔","en":"Seychelles"},{"zh":"留尼汪","en":"Reunion"},{"zh":"圣赫勒拿","en":"Saint Helena"},{"zh":"南苏丹","en":"S. Sudan"},{"zh":"中非共和国","en":"Central African Republic"},{"zh":"喀麦隆","en":"Cameroon"},{"zh":"赤道几内亚","en":"Eq. Guinea"},{"zh":"赤道几内亚","en":"Republic of the Congo"},{"zh":"赤道几内亚","en":"Democratic Republic of the Congo"},{"zh":"赤道几内亚","en":"Ivory Coast"},{"zh":"赤道几内亚","en":"Burkina Faso"},{"zh":"赤道几内亚","en":"Guinea"},{"zh":"赤道几内亚","en":"Guinea-Bissau"},{"zh":"赤道几内亚","en":"Cape Verde"},{"zh":"赤道几内亚","en":"Tunisia"},{"zh":"赤道几内亚","en":"Morocco"},{"zh":"赤道几内亚","en":"W. Sahara"},{"zh":"赤道几内亚","en":"Somalia"},{"zh":"赤道几内亚","en":"Côte d'Ivoire"},{"zh":"赤道几内亚","en":"Dem. Rep. Congo"},{"zh":"赤道几内亚","en":"Central African Rep."},{"zh":"赤道几内亚","en":"Congo"}];
    //循环匹配，记录下标
    var carryindex = [];
    for(var i=0;i<crrty.length;i++){
      for(var j=0;j<feizhouguojia.length;j++){
          if(feizhouguojia[j].en==crrty[i]){
            var derre = {};
            derre.index = i;
            derre.name = crrty[i];
            carryindex.push(derre)
            break;
          }
      }
    }
    //组装非洲国家json坐标数据结构
    var dataf = {
      "type":"FeatureCollection",
      "crs":{
          "type":"name",
          "properties":{
            "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
          }
      },
      "features":[]
    }
    //开始组装非洲国家json坐标数据
    for(var i=0;i<carryindex.length;i++){
      if(carryindex.name!="")
      dataf.features.push(worldjson.features[carryindex[i].index])
    }
    //打印后保存到文件中
    console.log("非洲国家json")
    console.log(dataf)
复制

步骤4、查漏补缺非洲国家坐标数据

登陆网站：geojson.io | powered by Mapbox

 将刚刚保存的非洲国家json导入到系统中

  

 就会在地图上看到非洲国家的地图了

图上白色未缺失的国家坐标，说明有国家和收集的非洲名字不一样导致数据没抓取过来，

 这个时候需要打开echarts官网找到一个世界地图模板http://chartlib.datains.cn/detail?id=map-world-dataRange

 找到缺失的国家的名字，添加或修改步骤1非洲国家中英文对照表里，然后再次重新，提取非洲国家json坐标数据

 提取完再次导入，ok,补充完整.

二、Echarts引入非洲国家json坐标文件

1.环境

我是用的nginx 做的访问，下载nignx,后修改配置文件，指定静态资源访问路径。

 

 完事后，就可以进行集成了。

html引入

echarts.min.js ，jquery-3.1.1.min.js

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Africa Map</title>
</head>
<script src="http://127.0.0.1/echarts.min.js"></script>
<script src="http://127.0.0.1/jquery-3.1.1.min.js"></script>
<body>
    <div style="width: 600px;height:600px; border: 1px solid royalblue;">
        <div id="AfricaMap" style="width: 100%;height:100%;"></div>
    </div>
    <select id="dfgjkg"></select>
 
</body>
 
<script>
        // 非洲地图
        var myChart = echarts.init(document.getElementById("AfricaMap"));
        // 开启加载loading的动画
        myChart.showLoading();
        // jquery读取json文件
        $.get('http://127.0.0.1/echartsAfrica.json', function (africaJson) {
            // 隐藏loading的动画
            myChart.hideLoading();
            echarts.registerMap('Africa', africaJson);
            option = {
                title: {
                    text: '中国-非洲',
                    subtext: '非洲地图',
                    sublink: 'http://127.0.0.1/Africa.html',
                    left: 'center'
                },
                //中文名称
                //nameMap: nameMap,
                // 提示框组件
                tooltip: {
                    trigger: 'item',
                    // 浮层显示的延迟
                    showDelay: 0,
                    // 提示框浮层的移动动画过渡时间
                    transitionDuration: 0.2
                },
                series: [
                    {
                        name: '通报数量',
                        type: 'map',
                        // 开启鼠标缩放和平移漫游
                        roam: true,
                        map: 'Africa',
                        // 显示标签
                        emphasis: {
                            label: {show: true}
                        },
                        // 文本位置修正
                        textFixed: {Alaska: [20, -20]},
                        //中文名称
                        //nameMap,
                        data: []
                    }
                ]
            };
            myChart.setOption(option);
        });
 
 
  
    $(document).ready(function(){
        var nameMap = [{"Somalia":"索马里"},{"Morocco":"摩洛哥"},{"W. Sahara":"西撒哈拉"},{"Angola":"安哥拉"},{"Burundi":"布隆迪"},{"Benin":"贝宁"},{"Burkina Faso":"布基纳法索"},{"Botswana":"博茨瓦纳"},{"Central African Rep.":"中非共和国"},{"Côte d'Ivoire":"科特迪瓦"},{"Cameroon":"喀麦隆"},{"Dem. Rep. Congo":"刚果民主共和国"},{"Congo":"刚果"},{"Cape Verde":"佛得角"},{"Djibouti":"吉布提"},{"Algeria":"阿尔及利亚"},{"Egypt":"埃及"},{"Eritrea":"厄立特里亚"},{"Ethiopia":"埃塞俄比亚"},{"Gabon":"加蓬"},{"Ghana":"加纳"},{"Guinea":"几内亚"},{"Gambia":"冈比亚"},{"Guinea-Bissau":"几内亚比绍"},{"Eq. Guinea":"赤道几内亚"},{"Kenya":"肯尼亚"},{"Liberia":"利比里亚"},{"Libya":"利比亚"},{"Lesotho":"莱索托"},{"Madagascar":"马达加斯加"},{"Mali":"马里"},{"Mozambique":"莫桑比克"},{"Mauritania":"毛里塔尼亚"},{"Mauritius":"毛里求斯"},{"Malawi":"马拉维"},{"Namibia":"纳米比亚"},{"Niger":"尼日尔"},{"Nigeria":"尼日利亚"},{"Rwanda":"卢旺达"},{"Sudan":"苏丹"},{"S. Sudan":"南苏丹"},{"Senegal":"塞内加尔"},{"Saint Helena":"圣赫勒拿"},{"Sierra Leone":"塞拉利昂"},{"Swaziland":"斯威士兰"},{"Seychelles":"塞舌尔"},{"Chad":"乍得共和国"},{"Togo":"多哥"},{"Tunisia":"突尼斯"},{"Tanzania":"坦桑尼亚"},{"Uganda":"乌干达"},{"South Africa":"南非"},{"Zambia":"赞比亚"},{"Zimbabwe":"津巴布韦"}];
        //初始化下拉框
        $('#dfgjkg').html("");
        for (let index = 0; index < nameMap.length; index++) {
            const element = nameMap[index];
            for(var key in element){
                $('#dfgjkg').append('<option value="'+key+'">'+element[ key ]+'</option>');
            }
        }
 
        var selectedAfName = "";
        $('#dfgjkg').change(function(){  
            //取消之前选中
            myChart.dispatchAction({
                type: 'downplay',
                name: selectedAfName
            })
 
            //选中当前国家
            selectedAfName = $(this).children('option:selected').val();
            myChart.dispatchAction({
                type: 'highlight',
                name: selectedAfName
            })
        })
        
    })  
</script>
 
</html>
复制

2.展示

浏览器输入：http://127.0.0.1/Africa.html

总结

以上就是非洲国家的地图，同理也可以别的洲

转载请注明出处或者链接地址：https://www.qianduange.cn//article/1787.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

使用jQuery ajax完成对表格数据的刷新

2024-02-26 20:02:26

jQuery 总结

2024-02-09 20:02:40

jQuery实现轮播图

2024-02-26 20:02:24

jQuery的基本使用

2024-02-26 20:02:21

jQuery 常见面试题

2024-02-26 20:02:21

springboot如何解决跨域问题(4种方式)

2024-02-26 20:02:18

炫酷登录注册 完整功能版【本地存储 JS HTML CSS jQuery】

2024-02-26 20:02:52

【前后端构建侧边栏多级动态导航栏---树形结构】

2024-02-26 20:02:48

jQuery中常需引用的jquery.min.js文件的内容

2024-02-26 20:02:48

JQuery框架保姆级介绍

2024-02-26 20:02:48

广告位招租：QQ85750956
大家推荐的文章
1

ECharts 饼状图颜色设置

2024-02-16 14:02:001000
2

echarts实现动态渲染多柱图

2024-02-12 14:02:341000
3

移动端css布局大全

2024-02-06 15:02:421000
4

使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000
5

JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000
6

HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999
7

web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999
8

尚硅谷css3笔记

2024-02-13 10:02:44998
9

如何利用浏览器测试跨域

2024-02-11 10:02:28998
10

【JS逆向】某麻将游戏数据生成JS加密逆向分析探索！

2024-02-22 10:02:34997

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！