公司大屏项目需要完成一个含有飞线图功能的地图,经过查询资料借鉴,写了一个区的demo
1、准备数据,因为我是画的区县地图,所以得自己去找数据
经纬度数据获取:https://lbs.amap.com/tools/picker
//地图数据
var chinaGeoCoordMap = {
'龙岗街道': [105.71, 29.70],
'龙滩子街道': [105.79, 29.49],
'双路街道': [105.77, 29.49],
'通桥街道': [105.77, 29.52],
'智凤街道': [105.79, 29.65],
'龙水镇': [105.77, 29.56],
'邮亭镇': [105.74, 29.43],
'宝顶镇': [105.76, 29.75],
'万古镇': [105.94, 29.68],
'珠溪镇': [105.67, 29.54],
'中敖镇': [105.67, 29.76],
'三驱镇': [105.62, 29.63],
'石马镇': [105.83, 29.63],
'雍溪镇': [105.99, 29.74],
'玉龙镇': [105.82, 29.54],
'宝兴镇': [105.70, 29.62],
'拾万镇': [105.90, 29.61],
'铁山镇': [105.57, 29.69],
'回龙镇': [105.87, 29.73],
'国梁镇': [105.93, 29.76],
'金山镇': [105.89, 29.66],
'高升镇': [105.58, 29.72],
'季家镇': [105.54, 29.63],
'龙石镇': [105.62, 29.56],
'高坪镇': [105.67, 29.84],
'古龙镇': [106.01, 29.70],
}
//飞线点数据
var chinaDatas = [
[{name: '龙岗街道', value: 0}],
[{name: '龙滩子街道', value: 0}],
[{name: '双路街道', value: 0}],
[{name: '通桥街道', value: 0}],
[{name: '智凤街道', value: 0}],
[{name: '龙水镇', value: 0}],
[{name: '邮亭镇', value: 0}],
[{name: '宝顶镇', value: 0}],
[{name: '万古镇', value: 0}],
[{name: '珠溪镇', value: 0}],
[{name: '中敖镇', value: 0}],
[{name: '三驱镇', value: 0}],
[{name: '石马镇', value: 0}],
[{name: '雍溪镇', value: 0}],
[{name: '玉龙镇', value: 0}],
[{name: '宝兴镇', value: 0}],
[{name: '拾万镇', value: 0}],
[{name: '铁山镇', value: 0}],
[{name: '回龙镇', value: 0}],
[{name: '国梁镇', value: 0}],
[{name: '金山镇', value: 0}],
[{name: '高升镇', value: 0}],
[{name: '季家镇', value: 0}],
[{name: '龙石镇', value: 0}],
[{name: '高坪镇', value: 0}],
[{name: '古龙镇', value: 0}],
]
2、绘制地图
geo: [{
map: 'dazu',
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "50%"],
layoutSize: "180%",
roam: false, //是否允许缩放
show: true,
silent: true, //鼠标移入区域变色 如果设置为true则无法高亮
emphasis: {
label: {
show: false,
},
},
itemStyle: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.9,
colorStops: [{
offset: 0,
color: 'RGBA(40, 99, 113, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'RGBA(28, 79, 105, 0.6)' // 100% 处的颜色
}],
},
borderColor: "#c0f3fb",
borderWidth: 1,
shadowColor: "#8cd3ef",
shadowOffsetY: 10,
shadowBlur: 120,
},
},
// 重影
{
type: "map",
map: "dazu",
zlevel: -1,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "51%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
borderWidth: 1,
borderColor: "rgba(58,149,253,0.8)",
shadowColor: "rgba(172, 122, 255,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
{
type: "map",
map: "dazu",
zlevel: -2,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "52%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
borderWidth: 1,
borderColor: "rgba(58,149,253,0.6)",
shadowColor: "rgba(65, 214, 255,1)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "transpercent",
},
},
{
type: "map",
map: "dazu",
zlevel: -3,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "53%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
borderWidth: 1,
borderColor: "rgba(58,149,253,0.4)",
shadowColor: "rgba(58,149,253,1)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "transpercent",
},
},
{
type: "map",
map: "dazu",
zlevel: -4,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "54%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
borderWidth: 5,
// borderColor: "rgba(11, 43, 97,0.8)",
borderColor: "rgba(5,9,57,0.8)",
shadowColor: "rgba(29, 111, 165,0.8)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "rgba(5,21,35,0.1)",
},
},
],
3、确定飞线图的中心点位
let formdata = '龙岗街道' // 中心点
4、确定飞线图的样式
[[formdata, chinaDatas]].forEach(function (item, i) {
series.push(
{
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度,值越小速度越快
trailLength: 0, //特效尾迹长度[0,1]值越大,尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 6, //图标大小
color: '#fcdd6e', // 图标颜色
},
lineStyle: {
width: 2, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
color: '#fcdd6e', // 飞线颜色
shadowBlur: 10
},
data: convertData(item[1]),
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 4, //动画时间,值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 3, //波纹圆环最大限制,值越大波纹越大
color: '#fcdd6e',
},
label: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
color: '#fff',//标签颜色
formatter: function (params) {
//圆环显示文字
return params.data.name
},
fontSize: 12,
},
emphasis: {
label: {
show: false,
}
},
symbol: 'circle',
symbolSize: function (val) {
return 10//圆环大小
},
itemStyle: {
show: false,
color: '#fce182',
},
data: item[1].map(function (dataItem) {
return {
//在这里定义你所要展示的数据
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
}
}),
},
//中心点
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4,
color: '#38ff85',
},
label: {
show: false,
position: 'right',
//offset:[5, 0],
color: '#38ff85',
formatter: '{b}',
},
emphasis: {
label: {
show: false,
color: '#38ff85',
}
},
symbol: 'circle',
symbolSize: 5,
itemStyle: {
color: '#38ff85',
},
data: [
{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
},
],
}
)
})
完整代码:
<template>
<div id="mapChart" ref="myChart" :style="{width: '100%', height: '100%'}"></div>
</template>
<script>
import 'echarts/lib/chart/map'
import dazu from '@/utils/DaZu.json'
export default {
data() {
return {
myChart: '',
}
},
created() {
this.$echarts.registerMap('dazu', dazu)
},
mounted() {
this.$nextTick(_ => {
this.initMapInfo()
})
},
methods: {
initMapInfo() {
//地图数据
var chinaGeoCoordMap = {
'龙岗街道': [105.71, 29.70],
'龙滩子街道': [105.79, 29.49],
'双路街道': [105.77, 29.49],
'通桥街道': [105.77, 29.52],
'智凤街道': [105.79, 29.65],
'龙水镇': [105.77, 29.56],
'邮亭镇': [105.74, 29.43],
'宝顶镇': [105.76, 29.75],
'万古镇': [105.94, 29.68],
'珠溪镇': [105.67, 29.54],
'中敖镇': [105.67, 29.76],
'三驱镇': [105.62, 29.63],
'石马镇': [105.83, 29.63],
'雍溪镇': [105.99, 29.74],
'玉龙镇': [105.82, 29.54],
'宝兴镇': [105.70, 29.62],
'拾万镇': [105.90, 29.61],
'铁山镇': [105.57, 29.69],
'回龙镇': [105.87, 29.73],
'国梁镇': [105.93, 29.76],
'金山镇': [105.89, 29.66],
'高升镇': [105.58, 29.72],
'季家镇': [105.54, 29.63],
'龙石镇': [105.62, 29.56],
'高坪镇': [105.67, 29.84],
'古龙镇': [106.01, 29.70],
}
//飞线点数据
var chinaDatas = [
[{name: '龙岗街道', value: 0}],
[{name: '龙滩子街道', value: 0}],
[{name: '双路街道', value: 0}],
[{name: '通桥街道', value: 0}],
[{name: '智凤街道', value: 0}],
[{name: '龙水镇', value: 0}],
[{name: '邮亭镇', value: 0}],
[{name: '宝顶镇', value: 0}],
[{name: '万古镇', value: 0}],
[{name: '珠溪镇', value: 0}],
[{name: '中敖镇', value: 0}],
[{name: '三驱镇', value: 0}],
[{name: '石马镇', value: 0}],
[{name: '雍溪镇', value: 0}],
[{name: '玉龙镇', value: 0}],
[{name: '宝兴镇', value: 0}],
[{name: '拾万镇', value: 0}],
[{name: '铁山镇', value: 0}],
[{name: '回龙镇', value: 0}],
[{name: '国梁镇', value: 0}],
[{name: '金山镇', value: 0}],
[{name: '高升镇', value: 0}],
[{name: '季家镇', value: 0}],
[{name: '龙石镇', value: 0}],
[{name: '高坪镇', value: 0}],
[{name: '古龙镇', value: 0}],
]
let formdata = '龙岗街道' // 中心点
var convertData = function (data) {
var res = []
for (var i = 0; i < data.length; i++) {
var dataItem = data[i]
var fromCoord = chinaGeoCoordMap[dataItem[0].name]
var toCoord = [105.71, 29.70] //中心点地理坐标
if (fromCoord && toCoord) {
res.push([
{
// 飞线从哪里出发
coord: toCoord,
},
{
// 飞线去往哪里
coord: fromCoord,
value: dataItem[0].value,
},
])
}
}
return res
}
var series = [];
[[formdata, chinaDatas]].forEach(function (item, i) {
series.push(
{
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
effect: {
show: true,
period: 4, //箭头指向速度,值越小速度越快
trailLength: 0, //特效尾迹长度[0,1]值越大,尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 6, //图标大小
color: '#fcdd6e', // 图标颜色
},
lineStyle: {
width: 2, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: 0.3, //尾迹线条曲直度
color: '#fcdd6e', // 飞线颜色
shadowBlur: 10
},
data: convertData(item[1]),
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
//涟漪特效
period: 4, //动画时间,值越小速度越快
brushType: 'stroke', //波纹绘制方式 stroke, fill
scale: 3, //波纹圆环最大限制,值越大波纹越大
color: '#fcdd6e',
},
label: {
show: true,
position: 'right', //显示位置
offset: [5, 0], //偏移设置
color: '#fff',//标签颜色
formatter: function (params) {
//圆环显示文字
return params.data.name
},
fontSize: 12,
},
emphasis: {
label: {
show: false,
}
},
symbol: 'circle',
symbolSize: function (val) {
return 10//圆环大小
},
itemStyle: {
show: false,
color: '#fce182',
},
data: item[1].map(function (dataItem) {
return {
//在这里定义你所要展示的数据
name: dataItem[0].name,
value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
}
}),
},
//中心点
{
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 15,
rippleEffect: {
period: 4,
brushType: 'stroke',
scale: 4,
color: '#38ff85',
},
label: {
show: false,
position: 'right',
//offset:[5, 0],
color: '#38ff85',
formatter: '{b}',
},
emphasis: {
label: {
show: false,
color: '#38ff85',
}
},
symbol: 'circle',
symbolSize: 5,
itemStyle: {
color: '#38ff85',
},
data: [
{
name: item[0],
value: chinaGeoCoordMap[item[0]].concat([10]),
},
],
}
)
})
this.initMap(series)
},
initMap(series) {
this.myChart = this.$echarts.init(document.getElementById('mapChart'))
let option = {
// bgColor: '#1a1e45',
tooltip: {
trigger: 'item',
backgroundColor: '#fff',
label: {
color: '#000',
},
formatter: function (params) {
// console.log(params)
var tipHtml = ''
tipHtml = `
<div class="ui-map-img">
<div class='ui-maptxt'>${params.name}</div>
</div>
`
return tipHtml
}
},
legend: {
orient: 'horizontal', //图例的排列方向
x: 'left', //图例的位置
y: '-20000000000000',
},
visualMap: {
//颜色的设置 dataRange
x: 'left',
y: 'bottom',
show: false,
},
geo: [{
map: 'dazu',
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "50%"],
layoutSize: "180%",
roam: false, //是否允许缩放
show: true,
silent: true, //鼠标移入区域变色 如果设置为true则无法高亮
emphasis: {
label: {
show: false,
},
},
itemStyle: {
areaColor: {
type: 'radial',
x: 0.5,
y: 0.5,
r: 0.9,
colorStops: [{
offset: 0,
color: 'RGBA(40, 99, 113, 1)' // 0% 处的颜色
}, {
offset: 1,
color: 'RGBA(28, 79, 105, 0.6)' // 100% 处的颜色
}],
},
borderColor: "#c0f3fb",
borderWidth: 1,
shadowColor: "#8cd3ef",
shadowOffsetY: 10,
shadowBlur: 120,
},
},
// 重影
{
type: "map",
map: "dazu",
zlevel: -1,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "51%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
borderWidth: 1,
borderColor: "rgba(58,149,253,0.8)",
shadowColor: "rgba(172, 122, 255,0.5)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "rgba(5,21,35,0.1)",
},
},
{
type: "map",
map: "dazu",
zlevel: -2,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "52%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
borderWidth: 1,
borderColor: "rgba(58,149,253,0.6)",
shadowColor: "rgba(65, 214, 255,1)",
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: "transpercent",
},
},
{
type: "map",
map: "dazu",
zlevel: -3,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "53%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
borderWidth: 1,
borderColor: "rgba(58,149,253,0.4)",
shadowColor: "rgba(58,149,253,1)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "transpercent",
},
},
{
type: "map",
map: "dazu",
zlevel: -4,
aspectScale: 1,
zoom: 0.65,
layoutCenter: ["50%", "54%"],
layoutSize: "180%",
roam: false,
silent: true,
itemStyle: {
borderWidth: 5,
// borderColor: "rgba(11, 43, 97,0.8)",
borderColor: "rgba(5,9,57,0.8)",
shadowColor: "rgba(29, 111, 165,0.8)",
shadowOffsetY: 15,
shadowBlur: 10,
areaColor: "rgba(5,21,35,0.1)",
},
},
],
series: series,
}
this.myChart.setOption(option)
},
}
}
</script>
<style lang="less" scoped>
#mapChart {
height: 100%;
}
</style>