前言
最近大表哥接手了一个好几个亿的大项目。在开发关于乡镇地图相关的业务。通过本文记录开发的过程和遇到的问题。希望通过本文对有同样需求的小伙伴有所帮助。
面临的问题在开发乡镇地图过程中，最麻烦的问题时解决乡镇地图的geojson数据问题。很多平台如阿里云仅仅支持县级平台。乡镇的地图数据是没有的。之前用过bigemap来下载地图的边界数据，但是现在收费了。在寻求无果的情况下，在万能的tb花重金（12元）购买了本市的所有乡镇的边界地图。
开发需求利用echarts实现乡镇地图展示实现散点图效果实现飞线图效果实现地图下钻开发过程01 处理边界数据
我们的边界数据是kml格式的。echarts中不能直接用，我们需要处理成json格式。这里我用https://geojson.io/这个网站进行处理。将乡镇边界地图依次导入网站。这里我以陇南市武都区为例。依次导入，注意不要漏掉。
依次导入后，save为geojson数据或者json格式。到这里我们的地图数据就处理完成了。
02 引用echarts相关文件
我们在html中引入echarts相关的js文件
代码语言：javascript复制
03 定义地图div框架
代码语言：javascript复制
04 注册地图
代码语言：javascript复制$.get('./shell.json', function (geoJson) {
myChart.hideLoading();
echarts.registerMap('武都区', geoJson);
shell.json就是我们导入的地图数据。
完整代码如下代码语言：javascript复制
散点图效果定义散点坐标
代码语言：javascript复制var scatterData = [
{name: '大梁上', value: [105.05970756713864,33.26926121706097]},
{name: '月照乡', value: [105.156731,33.14043]},
{name: '鱼龙镇', value: [105.184746,33.508073]}
]
然后首先定义一个散点图层
代码语言：javascript复制geo: {
type: 'map',
map: '武都区', //chinaMap需要与registerMao中的变量名称保持一致
raom: true,
label: {
show: true
},
},
在series中设置散点层参数。
代码语言：javascript复制{
data:scatterData,
type:'effectScatter', //effectScatter为散点层
coordinateSystem:'geo', //指明散点使用geo系统
rippleEffect:{
scale:8,
}
}
完整代码
代码语言：javascript复制
飞线图效果我们先来定义一个小图标，图标用base编码。
代码语言：javascript复制 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'
定义起点和终点坐标
代码语言：javascript复制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
} ]
最终完整代码代码语言：javascript复制
最终效果更多精彩文章 欢迎关注我们