前言

最近在开发关于乡镇地图相关的业务。通过本文记录开发的过程和遇到的问题。希望通过本文对有同样需求的小伙伴有所帮助。

面临的问题

在开发乡镇地图过程中，最麻烦的问题时解决乡镇地图的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>

效果

(加载的文件较大，耐心等会儿后在刷新当前页面。🤗🤗🤗)

陇南市武都区乡镇地图

版权属于：逍遥子大表哥

本文链接：https://blog.bbskali.cn/3757.html

按照知识共享署名-非商业性使用 4.0 国际协议进行许可，转载引用文章应遵循相同协议。

Kali笔记一键关注
Last modification：December 21, 2022
© Allow specification reprint
正在沿街乞讨中……