前言

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

面临的问题

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

开发需求

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

开发步骤

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

依次导入，注意不要漏掉。

依次导入后，save为geojson数据或者json格式。到这里我们的地图数据就处理完成了。
02 引用echarts相关文件
我们在html中引入echarts相关的js文件

03 定义地图div框架

04 注册地图

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

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

完整代码如下

散点图效果

定义散点坐标

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,                
   }
  }

完整代码

飞线图效果

我们先来定义一个小图标，图标用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
        } ]

最终完整代码

效果

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