vue-baidu-map + mapv 实现百度地图迁徙图动效

index.html引用

<script src='http://api.map.baidu.com/api?v=3.0&ak='></script>
<script src="http://mapv.baidu.com/build/mapv.min.js"></script>

页面

<div style="height:100%;width:100%" ref="asiaMap"></div>

initMapChart() {

	let mapJson = this.japanJson //地图数据json
	
	let myChart = this.$echarts.init(this.$refs["asiaMap"]);
	let name = 'asia'
	this.$echarts.registerMap(name, mapJson);
	let lineData = [//迁徙线起始点
	    [ {
	        coord: [121.406124, 37.460187],//toCoord烟台
	    },{
	        coord: [130.523135, 32.880423],//fromCoord
	        value: 0
	    }],
	    [ {
	        coord: [121.406124, 37.460187],
	    },{
	        coord: [126.622908,40.625553],
	        value: 0
	    }],
	    [ {
	        coord: [121.406124, 37.460187],
	    },{
	        coord: [126.917264,37.704522],
	        value: 0
	    }],
	    [ {
	        coord: [121.406124, 37.460187],
	    },{
	        coord: [124.084081,47.060744],
	        value: 0
	    }],
	    [ {
	        coord: [121.406124, 37.460187],
	    },{
	        coord: [115.915681,39.949276],
	        value: 0
	    }],
	    [ {
	        coord: [121.406124, 37.460187],
	    },{
	        coord: [130.927875,31.401204],
	        value: 0
	    }],
	    [ {
	        coord: [121.406124, 37.460187],
	    },{
	        coord: [127.634759,35.996901],
	        value: 0
	    }],
	    [ {
	        coord: [121.406124, 37.460187],
	    },{
	        coord: [126.070989,41.957591],
	        value: 0
	    }],
	     [ {
	        coord: [121.406124, 37.460187],
	    },{
	        coord: [128.536226,47.255256],
	        value: 0
	    }],
	]
	let scatterPoints = [
	    {value: [121.406124, 37.460187],itemStyle:{color:'#ffc107'}}
	]
	let option = {
	    backgroundColor: '#0F1C3C',
	    geo: {
	        show: true,
	        map: name,
	        label: {
	            normal: {
	                show: false
	            },
	            emphasis: {
	                show: false,
	            }
	        },
	        //zoom: 1.2,
	        roam: true, //是否开启平游或缩放
	         itemStyle: {
	                normal: {
	                    areaColor: {
	                        x: 0,
	                        y: 0,
	                        x2: 0,
	                        y2: 1,
	                        colorStops: [{
	                            offset: 0,
	                            color: '#073684' // 0% 处的颜色
	                        }, {
	                            offset: 1,
	                            color: '#061E3D' // 100% 处的颜色
	                        }],
	                    },
	                    borderColor: '#2196f3',
	                    borderWidth: 1,
	                },
	                emphasis: {
	                    areaColor: {
	
	                        x: 0,
	                        y: 0,
	                        x2: 0,
	                        y2: 1,
	                        colorStops: [{
	                            offset: 0,
	                            color: '#073684' // 0% 处的颜色
	                        }, {
	                            offset: 1,
	                            color: '#061E3D' // 100% 处的颜色
	                        }],
	                    },
	                }
	            },
	    },
	    series: [
	        {///地图线的动画效果
	            type: 'lines',
	            zlevel: 2,
	            effect: {
	                show: true,
	                period: 4, //箭头指向速度，值越小速度越快
	                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
	                symbol: 'arrow', //箭头图标
	                symbolSize: 5, //图标大小
	                color:'#ff9800'
	            },
	            lineStyle: {
	                normal: {
	                    width: 1, //尾迹线条宽度
	                    opacity: .5, //尾迹线条透明度
	                    curveness: .1, //尾迹线条曲直度
	                    color:'#ff9800',
	                    type:'dotted'
	                }
	            },
	            data: lineData
	        },   
	        {//涟漪
	            type: 'effectScatter',
	            coordinateSystem: 'geo',
	            showEffectOn: 'render',
	            zlevel:1,
	            rippleEffect: {
	                period: 15,
	                scale: 4,
	                brushType: 'fill'
	            },
	            hoverAnimation: true,
	            itemStyle: {
	                normal: {
	                color:'#1DE9B6'/* function (value){ //随机颜色
	return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
	}*/,
	                    shadowBlur: 10,
	                    shadowColor: '#333'
	                }
	            },
	            symbolSize: 12,
	            data: scatterPoints
	        }, 
	    ]
	}
	myChart.setOption(option,true);
	},