跟着表哥学开发 Echarts geojson 制作乡镇地图数据

逍遥子大表哥

发布于 2025-07-28 14:37:43

24600

代码可运行

文章被收录于专栏：kali blogkali blog

运行总次数：0

代码可运行

前言

最近大表哥接手了一个好几个亿的大项目。在开发关于乡镇地图相关的业务。通过本文记录开发的过程和遇到的问题。希望通过本文对有同样需求的小伙伴有所帮助。

面临的问题

在开发乡镇地图过程中，最麻烦的问题时解决乡镇地图的geojson数据问题。很多平台如阿里云仅仅支持县级平台。乡镇的地图数据是没有的。之前用过bigemap来下载地图的边界数据，但是现在收费了。在寻求无果的情况下，在万能的tb花重金（12元）购买了本市的所有乡镇的边界地图。

开发需求

利用echarts实现乡镇地图展示
实现散点图效果
实现飞线图效果
实现地图下钻

开发过程

01 处理边界数据

我们的边界数据是kml格式的。echarts中不能直接用，我们需要处理成json格式。这里我用https://geojson.io/这个网站进行处理。将乡镇边界地图依次导入网站。这里我以陇南市武都区为例。依次导入，注意不要漏掉。

依次导入后，save为geojson数据或者json格式。到这里我们的地图数据就处理完成了。

02 引用echarts相关文件

我们在html中引入echarts相关的js文件

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>

03 定义地图div框架

<div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>

04 注册地图

$.get('./shell.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('武都区', geoJson);

shell.json就是我们导入的地图数据。

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script> 
 <title>陇南市武都区乡镇地图</title>
</head>
<body>
 <div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>
</body>
 <script type="text/javascript">
    var dom = document.getElementById('map');
    var myChart = echarts.init(dom, null, { 
    });
    var option;
 window.onresize = myChart.resize;
  myChart.showLoading();
$.get('./shell.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('武都区', geoJson);
  myChart.setOption(
    (option = {
  // backgroundColor:'rgb(4,46,84)',//地图背景色
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>'
      },
 
      series: [
        {
          name: '武都区信息',
          type: 'map',
          map: '武都区',
   
   itemStyle: {
         normal: {
         areaColor: '#0f58cc',
         borderColor: '#fff',
     
                },
  emphasis: {
        areaColor: '#389bb7', //鼠标指上市时的颜色 
                }
            },
          label: {
         normal: {
         formatter: '{b}',
         position: 'bottom',
         show: true, //不显示
         textStyle: { // 地图上散点的字体样式
         fontSize: 16,
         fontWeight: '400',
        color: '#fff' // 点上字的颜色
                  }
                },
         emphasis: {
         show: true
                }
                },

        }
      ]
    })
  );
});
   
  </script>
</html>

散点图效果

定义散点坐标

var scatterData = [
{name: '大梁上', value: [105.05970756713864,33.26926121706097]},
{name: '月照乡', value: [105.156731,33.14043]},
{name: '鱼龙镇', value: [105.184746,33.508073]}     
    ]

然后首先定义一个散点图层

geo: {
 type: 'map',
 map: '武都区', //chinaMap需要与registerMao中的变量名称保持一致
 raom: true,
 label: {
 show: true
    },
   },

在series中设置散点层参数。

{
data:scatterData,
type:'effectScatter', //effectScatter为散点层
coordinateSystem:'geo', //指明散点使用geo系统
rippleEffect:{
scale:8,    
   }
  }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script> 
 <title>陇南市武都区乡镇地图</title>
</head>
<body>
 <div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>
</body>
 <script type="text/javascript">
    var dom = document.getElementById('map');
    var myChart = echarts.init(dom, null, { 
    });
    var option;
  //定义散点坐标
  var scatterData = [
   {name: '大梁上', value: [105.05970756713864,33.26926121706097]},
      {name: '月照乡', value: [105.156731,33.14043]},
      {name: '鱼龙镇', value: [105.184746,33.508073]}
        
    ]
  myChart.showLoading();
$.get('./shell.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('武都区', geoJson);
  myChart.setOption(
    (option = {
  // backgroundColor:'rgb(4,46,84)',//地图背景色
  geo: {
                type: 'map',
                map: '武都区', //chinaMap需要与registerMao中的变量名称保持一致
                raom: true,
                label: {
                    show: true
                },
            },
  
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>'
      },
 
      series: [
        {
          name: '武都区信息',
          type: 'map',
          map: '武都区',
   
   itemStyle: {
         normal: {
         areaColor: '#0f58cc',
         borderColor: '#fff',
     
                },
  emphasis: {
        areaColor: '#389bb7', //鼠标指上市时的颜色 
                }
            },
          label: {
         normal: {
         formatter: '{b}',
         position: 'bottom',
         show: true, //不显示
         textStyle: { // 地图上散点的字体样式
         fontSize: 16,
         fontWeight: '400',
        color: '#fff' // 点上字的颜色
                  }
                },
         emphasis: {
         show: true
                }
                },

        },
   {
          data:scatterData,
          type:'effectScatter',
          coordinateSystem:'geo', //指明散点使用geo系统
          rippleEffect:{
         scale:8,
 
                    }
                }
      ]
  
    })
  );
});
   
  </script>
</html>

飞线图效果

我们先来定义一个小图标，图标用base编码。

 var planePath =
  'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

定义起点和终点坐标

var zuobao = [ {
          fromName: '城关镇',
          toName: '大梁上',
          coords: [
            [104.967931,33.369914],
            [105.05970756713864,33.26926121706097]
          ],
          value: 100
        },
  {
          fromName: '城关镇',
          toName: '月照乡',
          coords: [
            [104.967931,33.369914],
            [105.164413,33.146652]
          ],
          value: 100
        } ]

最终完整代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script> 
 <title>陇南市武都区乡镇地图</title>
</head>
<body>
 <div id="map" style="width:600px;height: 700px;margin: 0 auto"></div>
</body>
 <script type="text/javascript">
    var dom = document.getElementById('map');
    var myChart = echarts.init(dom, null, { 
    });
    var option;
  //定义散点坐标
  var scatterData = [
   {name: '大梁上', value: [105.05970756713864,33.26926121706097]},
   {name: '月照乡', value: [105.156731,33.14043]},
   {name: '鱼龙镇', value: [105.184746,33.508073]},
   {name: '五马乡', value: [105.453928,33.061199]},
   {name: '城关镇', value: [104.967931,33.369914]}
        
    ]
  
  //定义图标
   var planePath =
  'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'
   //定义飞线图起点和终点坐标
   var zuobao = [ {
          fromName: '城关镇',
          toName: '大梁上',
          coords: [
            [104.967931,33.369914],
            [105.05970756713864,33.26926121706097]
          ],
          value: 100
        },
  {
          fromName: '城关镇',
          toName: '月照乡',
          coords: [
            [104.967931,33.369914],
            [105.164413,33.146652]
          ],
          value: 100
        },
  {
          fromName: '城关镇',
          toName: '鱼龙镇',
          coords: [
            [104.967931,33.369914],
            [105.184746,33.508073]
          ],
          value: 100
        },{
          fromName: '城关镇',
          toName: '五马乡',
          coords: [
            [104.967931,33.369914],
            [105.453928,33.061199]
          ],
          value: 100
        }]
  myChart.showLoading();
$.get('./shell.json', function (geoJson) {
  myChart.hideLoading();
  echarts.registerMap('武都区', geoJson);
  myChart.setOption(
    (option = {
  // backgroundColor:'rgb(4,46,84)',//地图背景色
  geo: {
        type: 'map',
        map: '武都区', //chinaMap需要与registerMao中的变量名称保持一致
        raom: true,
  itemStyle: {
        normal: {
        areaColor: 'rgb(4,46,84)',
        borderColor: '#fff', 
                },
  emphasis: {
        areaColor: '#389bb7', //鼠标指上市时的颜色 
                }
            },
         label: {
         normal: {
         position: 'bottom',
         show: true, //不显示
         textStyle: { // 地图上散点的字体样式
         fontSize: 16,
         fontWeight: '400',
        color: '#fff' // 点上字的颜色
                  }
                },
         emphasis: {
         show: true
                }
                },
            },
  
      tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>'
      },
 
      series: [
        {
  //飞线图参数
        name: '武都区信息',
        type: 'lines',
        map: '武都区',
  effect: {
        show: true,
        period: 6,
        trailLength: 0.1,
        color: 'red', // arrow箭头的颜色
        symbol: planePath,
        symbolSize: 15
      },
  lineStyle: {
        normal: {
          color: '#a6c84c',
          width: 2,
          curveness: 0.2
        }
      },
  data:zuobao,

        },
    //散点图信息
   {
          data:scatterData,
          type:'effectScatter',
          coordinateSystem:'geo', //指明散点使用geo系统
          rippleEffect:{
         scale:5,
                    },
   itemStyle: {
            normal: {
              color: "#D8BC37"
            }}
                }
      ]
  
    })
  );
});
   
  </script>
</html>