最近做的一个项目，里边需要地图热力图，并绘制来访出访的轨迹，在echarts找到一个地图坐标系上散点+折线图实现的例子，最终效果
image.png
首先需要国家地图坐标，和国家名中英文对照表（因为echarts内置都是英文名称）
// 数据格式
data = [{name:"中国",value:200},{name:"英国",value:200},{name:"美国",value:200},{name:"俄罗斯",value:200}...]
// 图中一共用到三种效果，分别为航线特效图、飞机航线图以及城市图标涟漪图。
for (let i = 0; i < data.length; i++) {
series.push(
{
// 白色航线特效图（闪光效果）
type: 'lines',
zlevel: 1, // 用于分层，z-index的效果
effect: {
show: true, // 动效是否显示
period: 6, // 特效动画时间
trailLength: 0.7, // 特效尾迹的长度
color: '#fff', // 特效颜色
symbolSize: 5 // 特效大小
},
lineStyle: {
normal: {
// 正常情况下的线条样式
color: _this.linesColor,
width: 0, // 因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
curveness: -0.2 // 线条曲度
}
},
data: _this.convertData(data[i]) // 特效的起始、终点位置
},
{
// 小飞机航线效果（蓝色）
type: 'lines',
zlevel: 2,
// symbol: ['none', 'arrow'], // 用于设置箭头
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: _this.planePath, // 特效形状，可以用其他svg pathdata路径代替
symbolSize: 15
},
tooltip: {
// position: ['150%', '150%']
},
lineStyle: {
normal: {
color: _this.linesColor,
width: 2,
opacity: 0.6,
curveness: -0.2
}
},
data: _this.convertData(data[i]) // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
}
)
}
series.push({
// 散点效果（重点地区名字和散点效果）
type: 'effectScatter',
coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
zlevel: 3,
rippleEffect: {
brushType: 'stroke' // 波纹绘制方式
},
label: {
normal: {
// 默认的文本标签显示样式
color: '#fff',
position: 'left', // 标签显示的位置
formatter: '{b}', // 标签内容格式器(目前只显示国家)
textBorderColor: '#000',
textBorderWidth: 1
}
},
tooltip: {
show: false
},
itemStyle: {
normal: {
color: '#000'
}
},
data: data.map(function (dataItem) {
return {
name: dataItem.name,
value: [_this.geoCoordMap[dataItem.name][0], _this.geoCoordMap[dataItem.name][1], 0], // 起点的位置
symbolSize: 10, // 散点的大小，通过之前设置的权重来计算，val的值来自data返回的value
color: '#000'
}
})
})
// 显示终点位置,类似于上面最后一个效果，放在外面写，是为了防止被循环执行多次
series.push({
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
position: 'left',
formatter: '{b}'
}
},
tooltip: { show: false },
symbolSize: 10,
itemStyle: {
normal: {
color: _this.linesColor
}
},
data: [
{
name: '中国',
// value: [117.2524760549, 38.2790211218, 80],
value: [_this.geoCoordMap['中国'][0], _this.geoCoordMap['中国'][1], 0],
label: {
normal: {
show: false,
position: 'top'
}
}
},
{
name: '南极',
value: [43.5107, -53.2196, 0],
label: {
normal: {
show: true,
position: 'right'
}
}
}
]
})
// 地图
series.push({
type: 'map',
geoIndex: 0,
label: {
normal: {
color: '#fff',
show: false
}
},
textFixed: {
Alaska: [20, -20]
},
tooltip: {
show: false
},
data: data
})
// 最后初始化世界地图中的相关数据
this.chart.setOption({
tooltip: {
trigger: 'item',
triggerOn: 'click'
},
toolbox: {
show: true,
left: 'right',
iconStyle: {
normal: {
borderColor: '#ddd'
}
},
feature: {},
z: 202
},
visualMap: {
show: false,
min: 0,
max: _this.maxMapData,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
geo: {
map: 'world', // 与引用进来的地图js名字一致
show: true,
roam: true, // 允许缩放平移
zoom: 1.2,
// 可以自定义地区名称，配置后 china显示为“中国”
nameMap: _this.mapCompare,
selectedMode: 'single', // 国家单选
itemStyle: {
// 每个区域的样式
normal: {
// areaColor: '#d7e4f5',
// borderColor: '#b1c6e1'
areaColor: '#b1c6e1',
borderColor: '#fff'
},
// 鼠标悬停区块颜色
emphasis: {
areaColor: 'blue',
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 5,
borderWidth: 0,
shadowColor: 'rgba(6, 67, 183, 0.2)'
}
},
// 是否默认展示国家信息
label: {
emphasis: {
show: true,
color: '#fff',
textBorderColor: '#012a77',
textBorderWidth: 1
}
},
// 缩放比例
scaleLimit: {
min: 1.2,
max: 3
},
// 特殊区域
regions: [
{
// 选中的区域
name: '中国',
selected: true,
itemStyle: {
// 高亮时候的样式
normal: {
areaColor: 'red'
},
emphasis: {
areaColor: 'red'
}
},
label: {
// 高亮的时候显示标签
emphasis: {
show: true,
textBorderWidth: 0
}
}
}
]
},
series: series, // 图表列表
textStyle: {
fontSize: 14
}
})
还要实现点击地图效果，这里要注意，绑定事件之前要解绑，否则每次更新搜索条件重新渲染地图，事件都会重新绑定一次。
网友评论