实际效果如下：
第一步，我们先获取地图底图，不包含区镇的地图文件可以从这个网站 上面下载DataV.GeoAtlas地理小工具系列,
如果要获取市或县底下的区镇数据，可通过下面的链接来获取
https://blog.sina.cn/dpool/blog/s/blog_c47286b00102zg2p.html
通过bigemap和geojson获取echarts精确到乡镇、街道的地图json数据(获取的json数据与echarts比少cp坐标，自行添加即可)
通过bigemap和geojson获取echarts精确到乡镇、街道的地图json数据
(一):进入bigemap下载页面,下载红框里的版本
(二):下载安装之后打开，可以在右上角进行区域的选择，可以发现，它是精确到镇级的,然后选择每个乡镇街道的区名等下载相应的kml,然后所有的区的kml文件放在一个文件夹
这里 不要点击左边的下载按钮，请选择图中 红框选中的导出按钮，即可保存kml文件:
可以在地图上看到效果:
（三）在geojson.io上把刚刚在bigemap地图下载器导出的kml文件导入进来geojson.io | powered by Mapbox
open-file 选中刚才的文件打开它
可以看到，左边就是你导入文件选择的数据区域，右边则是自动生成的geojson数据。
这样就完成了北京-平谷区其中一部分区域的绘制
接下来只要把所有区域选择一个区域一个区域下载下来，生成的kml文件导出保存在一个文件夹，再导入到这个网站，像拼拼图一样拼起来就可以了。
最后全部导入拼好之后，全选右边的数据，新建一个.json文件，拷贝进去保存，这样引用的时候就可以正常使用了。
既然地图的json已经获取到了，那如何通过echarts做成第一张的样子,下面是接口中返回的数据
[{
"xmmc": "xxxx",
"dtdmc": "xxxx",
"sl": 101,
"cfdjd": "120.980000",
"cfdwd": "31.380000",
"mddjd": "120.865",
"mddwd": "31.145"
}]<template>
<div class="content" ref="echarts"></div>
</template>
<script>
// 引入echarts
import * as echarts from 'echarts'
// 引入地图
import 'echarts/lib/chart/map'
import chinaMap from '@/utils/china.json'
// 引入js
// import 'echarts/map/js/china.js'
export default {
components: {},
props: ['mapArr', 'isOpen'],
watch: {
isOpen: {
handler(newVal) {
if (newVal) {
this.lineData = this.mapArr
}
},
deep: true
}
},
data() {
// 这里存放数据
return {
planePath:
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAF92lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0NDYwLCAyMDIwLzA1LzEyLTE2OjA0OjE3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjQtMDctMzFUMTA6Mjg6NDUrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDI0LTA3LTMxVDEwOjMxOjMyKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDI0LTA3LTMxVDEwOjMxOjMyKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjZlYTFiMjYwLTcyMzUtNDBlZS04ODQwLTQ2YjNiYzFiNDdlYyIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjVhM2E4Y2U1LTZlNzEtNWI0Mi1iOWI3LWNiNDU0OTFmZmQ1YiIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjQ0ZWQ5ZTAxLTQ0MzItNGNjNy04YmU4LTU5NWFmZDRkYzY1YSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NDRlZDllMDEtNDQzMi00Y2M3LThiZTgtNTk1YWZkNGRjNjVhIiBzdEV2dDp3aGVuPSIyMDI0LTA3LTMxVDEwOjI4OjQ1KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6NmVhMWIyNjAtNzIzNS00MGVlLTg4NDAtNDZiM2JjMWI0N2VjIiBzdEV2dDp3aGVuPSIyMDI0LTA3LTMxVDEwOjMxOjMyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgMjEuMiAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4bI5FAAAADMUlEQVRYhc2WTWxUVRSAv3Pfm1I6toPQNoo2SIgbSaBAgFBIbGLQkJBgSOjODWFBNNEVunABxr2GEPZEd4VIDGBMgARr2oipDJ2kA4U0Wmuhai2106Ezzbx7XLx5A9iZNy8zhOGs5p7fb+49594nqkojxTS0+vMA4IZaP3yXKx9/BUDe+ke1tdkDuAlsrhSm1n4GnAjWa19qrxFguXwyqSs+7ZJ8azlj8maK5EiK+9N/7b99e2wYuAhw5dLZugGOv9rSdOz1F9z48IMlcJY73Lk7zhcnTwfLbcAFq3ZPcT1YKXFoDxRUemPG/N7TvvLE2EIhfuTGHGcnH5b1HU3fAmBL9ya2dG8CQMTsFTF7w2pE2oFzUzm+ubcIwBpXyvrMz2cAmJ19UNIJdFTLHQkg9XeWmX/8AtmYA6+tWuazY/s27o6PMzExGaiSYql8+JEADL3rrvUn3pNY9s1MLhuo2yZn0v933Ql0b1xtfumIJQBOJW/twaH8eT0mEnYTeh8drOmaVPSJMXRPnq/o2/CLqOEAoT2QW8zTvHJFzcn3pWMAXK4V4InirkKh/AgCZC2cnxMGFgzzHu/PemDgy6L535oAlnJLNDU3+b8PT2DSrZhf40jGRRZcsI980znh69nSiXYIHPdc+3Nx/V1NAEFxANuZx3bmoXempJOsi5Nqw73awQ8Zf3d29+wEYHDoOsZwqC4Ar+DhuA52fflx1ngBbfEA6GpSQBgcuv7IDmNh+asCOK7/6tiuqvcJb7cpww+V1KIE1a9ZMWeqxUUaQye5qqrPiw4cbVfealXeaNYRkA8cZdpRpsPiIr0Fkim6eeI3YNCECy7mtxYAUovCsanS/9mM6IhBdxXXw3UBALgD7bgDayrav5/3t/6VtS8DMHXvvusJh+sCCJrQB6hcHPx7AGDDhvUBACiJ0KBqAEHxKNITV37KCgM/DpV0Br6tC0CEUVU2RgF4p03JqeVqRpjz+OPPgvlckf66AIy1fdaY/qgQBxLKgYQCtFgpjESJqTaGaWNtnwijUZI9JqtFZZ+oIFr5/YgCUA9EJIk6hmljbV9BpfNpAzT8gyT0m/BZSMN34D817xsTy1El4AAAAABJRU5ErkJggg==',
res: [],
series: [],
lineData: []
}
},
mounted() {
// this.$nextTick(() => {
// this.init()
// })
},
// 方法集合
methods: {
init() {
echarts.registerMap('china', { geoJSON: chinaMap }) // 注册地图文件
const myChart = echarts.init(this.$refs.echarts)
this.res = []
this.series = []
let arr = []
for (var i = 0; i < this.lineData.length; i++) {
if (this.lineData[i].cfdjd && this.lineData[i].cfdwd) {
arr.push({
name: this.lineData[i].xmmc,
value: [this.lineData[i].cfdjd, this.lineData[i].cfdwd],
count: this.lineData[i].sl
})
}
if (this.lineData[i].mddjd && this.lineData[i].mddwd) {
arr.push({
name: this.lineData[i].dtdmc,
value: [this.lineData[i].mddjd, this.lineData[i].mddwd]
})
}
if (
this.lineData[i].cfdjd &&
this.lineData[i].cfdwd &&
this.lineData[i].mddjd &&
this.lineData[i].mddwd
) {
this.res.push({
fromName: this.lineData[i].xmmc,
toName: this.lineData[i].dtdmc,
coords: [
[this.lineData[i].cfdjd, this.lineData[i].cfdwd],
[this.lineData[i].mddjd, this.lineData[i].mddwd]
],
count: this.lineData[i].sl
})
}
}
// console.log(this.res, 'this.res')
this.series.push(
//
{
name: '',
type: 'effectScatter',
coordinateSystem: 'geo',
// 要有对应的经纬度才显示，先经度再维度
data: arr,
showEffectOn: 'render',
rippleEffect: {
scale: 2, // 波纹的最大缩放比例
brushType: 'stroke'
},
// hoverAnimation: true,
label: {
normal: {
show: true,
formatter: params => {
// console.log(params, 'params')
return params.data.count ? params.data.count : ''
},
position: 'right',
// fontWeight: 500,
fontSize: 14,
// color: '#fff'
}
},
itemStyle: {
normal: {
color: '#00e3ff',
shadowBlur: 10,
shadowColor: '#333'
}
},
emphasis: {
itemStyle: {
color: '#f4e925' // 高亮颜色
}
},
zlevel: 1,
tooltip: {
show: true,
formatter: params => {
return `${params.data.name}`
// console.log(params, 'params')
}
}
},
{
name: '',
type: 'lines',
zlevel: 1,
effect: {
show: true,
constantSpeed: 20,
symbol: this.planePath,
symbolSize: 20,
trailLength: 0,
symbolRotate: 90
},
tooltip: {
formatter: function (param) {
// console.log(param, 'params')
return (`<div style="word-break: break-all;word-wrap: break-word;white-space: normal;margin: 0; padding: 0; max-width: 300px;">
<span style="margin: 0; padding: 0; line-height: 2; display: block;">起始地: ${param.data.fromName}</span>
<span style="margin: 0; padding: 0; line-height: 2; display: block;">目的地: ${param.data.toName}</span>
<span style="margin: 0; padding: 0; line-height: 2; display: block;">趟数:${param.data.count}</span>
</div>`)
// return (
// param.data.fromName +
// '>' +
// param.data.toName +
// '<br>：' +
// param.data.count
// )
}
},
lineStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: '#58B3CC'
},
{
offset: 1,
color: '#F58158'
}
],
false
),
width: 3,
opacity: 0.5,
curveness: 0.1
}
},
data: this.res
}
)
let option = {
title: {
text: '',
textStyle: {
// color: '#ffffff'
}
},
legend: {
show: true,
selected: {},
x: 'left',
orient: 'vertical',
textStyle: {
color: 'white'
},
data: []
},
tooltip: {
trigger: 'item',
show: true
},
geo: {
map: 'china',
// show: true,
roam: true,
top: '0',
center: [120.983219, 31.369131],
zoom: 36,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
// 地图的背景色
itemStyle: {
normal: {
areaColor: '#09184F',
borderColor: '#00ffff',
shadowColor: '#09184F',
shadowBlur: 20
},
emphasis: {
// 设置高亮状态下的样式
areaColor: '#0e64d7' // 地图区域的高亮背景色
}
}
},
series: this.series
}
myChart.setOption(option)
// window.addEventListener('resize', function() {
// myChart.resize()
// })
}
}
}
</script>
<style lang="scss" scoped>
.content {
width: 100%;
height: 100%;
}
</style>