echart在百度地图中模拟飞机航线demo

刘斩仙的笔记本

已于 2023-09-22 14:56:53 修改

阅读量396

点赞数

分类专栏：图表（echarts）文章标签： echarts 飞机航线轨迹百度地图

于 2023-09-13 15:31:20 首次发布

本文链接：https://blog.csdn.net/qq_25252769/article/details/132855342

版权

图表（echarts）专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果如图所示

在这里插入图片描述

代码

<!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>
	// 地图中心位置：9cf0OOuqYNvSANaGkYdsGLzIaFpmxQZb
	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],//一个包含两个到多个二维坐标的数组。在 polyline 设置为 true 时支持多于两个的坐标。
				});
			}
		}
		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)
			// [{
			// 	fromName: "北京",
			// 	toName: "上海",
			// 	coords: [[116.4551, 40.2539], [121.4648, 31.2891]]
			// }]
		},
		// 涟漪原点
		{
			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 ]
				};
			})
			// [
			// 	{
			// 		name: '上海',
			// 		value: [121.4648, 31.2891, 100]
			// 	},
			// 	{
			// 		name: '北京',
			// 		value: [116.4551, 40.2539, 50]
			// 	},
			// ]
		},
	];
	window.onload = () => {
		const dom = document.querySelector("#container");
		const myChart = echarts.init(dom);
		let option = {
			// 百度地图JavaScript API：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom
			bmap: {
				center: [startPoint.x, startPoint.y],
				zoom: 5,
				// roam: 'scale',// 放大
				// roam: 'move',// 移动
				roam: true,//移动+放大
			},
			tooltip: {
				trigger: 'item'
			},
			series: series
		};
		myChart.setOption(option);
	}

</script>

</html>