效果如图所示
代码
<!DOCTYPE html>
<html>
<head>
<title>echart在百度地图中模拟飞机航线demo</title>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript"
src="http://api.map.baidu.com/api?v=3.0&ak=替换成你自己的百度密钥"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
</head>
<body>
<noscript>
<h2 style="color: #ff0000">无JS环境</h2>
</noscript>
<div id="main-content" class="container">
<h6>需要把百度地图ak替换为自己申请的,文中所示为测试ak;<a href="https://echarts.apache.org/examples/zh/editor.html?c=geo-lines&version=5.0.0&decal=1&theme=dark">官方示例</a></h6>
<div id="container" style="width: 100vw;height: 100vh;"></div>
</div>
</body>
<script>
let startPoint = {
x: 116.4551,
y: 40.2539
};
let cityData = [
[{ name: '上海', value: 100 }, { name: '攀枝花', value: 35 }],
[{ name: '上海', value: 100 }, { name: '承德', value: 55 }],
[{ name: '上海', value: 100 }, { name: '厦门', value: 105 }],
[{ name: '上海', value: 100 }, { name: '潮州', value: 105 }],
[{ name: '威海', value: 85 }, { name: '太仓', value: 80 }],
[{ name: '威海', value: 85 }, { name: '汕尾', value: 80 }],
[{ name: '攀枝花', value: 35 }, { name: '威海', value: 85 }],
[{ name: '汕尾', value: 80 }, { name: '上海', value: 100 }],
[{ name: '丹东', value: 65 }, { name: '厦门', value: 105 }],
[{ name: '承德', value: 55 }, { name: '乌鲁木齐', value: 70 }],
[{ name: '乌鲁木齐', value: 70 }, { name: '汕尾', value: 80 }],
]
let geoCoordMap = {
'上海':[121.48,31.22],
'攀枝花':[101.718637,26.582347],
'威海':[122.1,37.5],
'承德':[117.93,40.97],
'厦门':[118.1,24.46],
'汕尾':[115.375279,22.786211],
'潮州':[116.63,23.68],
'丹东':[124.37,40.13],
'太仓':[121.1,31.45],
'乌鲁木齐':[87.68,43.77],
}
const convertData = (data) => {
let res = [];
for (let i = 0; i < data.length; i++) {
let dataItem = data[i];
let fromCoord = geoCoordMap[dataItem[0].name];
let toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],
});
}
}
return res;
}
const 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';
let series = [
{
name: '轰-20',
type: 'lines',
coordinateSystem: 'bmap',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 15
},
lineStyle: {
normal: {
color: '#a6c84c',
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: convertData(cityData)
},
{
type: 'effectScatter',
coordinateSystem: 'bmap',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
show: true,
position: 'right',
formatter: '{b}'
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
color: '#46bee9'
},
data: cityData.map((dataItem) => {
return {
name: dataItem[1].name,
value: [ ...geoCoordMap[dataItem[1].name], dataItem[1].value ]
};
})
},
];
window.onload = () => {
const dom = document.querySelector("#container");
const myChart = echarts.init(dom);
let option = {
bmap: {
center: [startPoint.x, startPoint.y],
zoom: 5,
roam: true,
},
tooltip: {
trigger: 'item'
},
series: series
};
myChart.setOption(option);
}
</script>
</html>