飞线图中国地图,找了一圈没几个能用的,自己捣鼓了一下

直接贴代码

<template>
	<div class="container" id="container" style="z-index: 1"></div>
</template>

<script>
import china from '@/assets/map/china.json'; // 引入中国地图数据

import * as echarts from 'echarts';

export default {
	data() {
		return {
			china: china, // 将地图数据添加到 data 中
		};
	},
	mounted() {
		this.$nextTick(_ => {
			// 地图注册
			echarts.registerMap('china', china);
			this.initMapInfo();
		});
	},
	methods: {
		initMapInfo() {
			// 地图数据
			var chinaGeoCoordMap = {
				黑龙江: [127.9688, 45.368],
				内蒙古: [110.3467, 41.4899],
				吉林: [125.8154, 44.2584],
				北京市: [116.4551, 40.2539],
				辽宁: [123.1238, 42.1216],
				河北: [114.4995, 38.1006],
				天津: [117.4219, 39.4189],
				山西: [112.3352, 37.9413],
				陕西: [109.1162, 34.2004],
				甘肃: [103.5901, 36.3043],
				宁夏: [106.3586, 38.1775],
				青海: [101.4038, 36.8207],
				新疆: [87.9236, 43.5883],
				西藏: [91.11, 29.97],
				四川: [103.9526, 30.7617],
				重庆: [108.384366, 30.439702],
				山东: [117.1582, 36.8701],
				河南: [113.4668, 34.6234],
				江苏: [118.8062, 31.9208],
				安徽: [117.29, 32.0581],
				湖北: [114.3896, 30.6628],
				浙江: [119.5313, 29.8773],
				福建: [119.4543, 25.9222],
				江西: [116.0046, 28.6633],
				湖南: [113.0823, 28.2568],
				贵州: [106.6992, 26.7682],
				云南: [102.9199, 25.4663],
				广东: [113.12244, 23.009505],
				广西: [108.479, 23.1152],
				海南: [110.3893, 19.8516],
				上海: [121.4648, 31.2891],
			};
			// 飞线点数据
			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,
					},
				],
				[
					{
						name: '海南',
						value: 0,
					},
				],
				[
					{
						name: '重庆',
						value: 0,
					},
				],
				[
					{
						name: '上海',
						value: 1,
					},
				],
			];

			let formdata = '重庆'; // 中心点

			var convertData = function(data, centerPoint) {
				var res = [];
				for (var i = 0; i < data.length; i++) {
					console.log(data[i]);
					var dataItem = data[i];
					var fromCoord = chinaGeoCoordMap[dataItem[0].name];
					var toCoord = chinaGeoCoordMap[centerPoint]; // 中心点地理坐标
					if (fromCoord && toCoord) {
						res.push([
							{
								// 飞线从哪里出发
								coord: toCoord,
							},
							{
								// 飞线去往哪里
								coord: fromCoord,
								value: dataItem[0].value,
							},
						]);
					}
				}
				return res;
			};
			var series = [];
			[[formdata, chinaDatas]].forEach(function(item, i) {
				console.log(item);
				series.push(
					{
						type: 'lines',
						coordinateSystem: 'geo',
						zlevel: 2,
						effect: {
							show: true,
							period: 4, //箭头指向速度,值越小速度越快
							trailLength: 0, //特效尾迹长度[0,1]值越大,尾迹越长重
							symbol: 'arrow', //箭头图标
							symbolSize: 5, //图标大小
							color: '#fcdd6e', // 图标颜色
						},
						lineStyle: {
							normal: {
								show: true,
								width: 1, //尾迹线条宽度
								opacity: 1, //尾迹线条透明度
								curveness: 0.3, //尾迹线条曲直度
								color: '#fcdd6e', // 飞线颜色
							},
							color: '#fcdd6e',
						},
						data: convertData(item[1], item[0]),
					},
					{
						type: 'effectScatter',
						coordinateSystem: 'geo',
						zlevel: 2,
						rippleEffect: {
							//涟漪特效
							period: 4, //动画时间,值越小速度越快
							brushType: 'stroke', //波纹绘制方式 stroke, fill
							scale: 3, //波纹圆环最大限制,值越大波纹越大
							color: '#fcdd6e',
						},
						label: {
							normal: {
								show: false,
								position: 'right', //显示位置
								offset: [5, 0], //偏移设置
								formatter: function(params) {
									//圆环显示文字
									return params.data.name;
								},
								fontSize: 13,
							},
							emphasis: {
								show: false,
							},
						},
						symbol: 'circle',
						symbolSize: function(val) {
							return 5; //圆环大小
						},
						itemStyle: {
							normal: {
								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: {
							normal: {
								show: false,
								position: 'right',
								color: '#38ff85',
								formatter: '{b}',
								textStyle: {
									color: '#38ff85',
								},
							},
							emphasis: {
								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) {
			let myChart = echarts.init(document.getElementById('container'));
			let option = {
				tooltip: {
					trigger: 'item',
				},
				legend: {
					orient: 'horizontal', //图例的排列方向
					x: 'left', //图例的位置
					y: '-20000000000000',
				},
				visualMap: {
					x: 'left',
					y: 'bottom',
					show: false,
				},
				geo: {
					map: 'china',
					zoom: 1.2,
					label: {
						normal: {
							show: true,
							textStyle: {
								color: '#FFFFFF',
							},
						},
						emphasis: {
							show: true,
						},
					},
					roam: true, //是否允许缩放
					itemStyle: {
						normal: {
							color: '#1a1e45', //地图背景色
							borderColor: '#22ccfb', //省市边界线00fcff 516a89
							borderWidth: 1,
							textStyle: '#fff',
						},
						emphasis: {
							color: '#22ccfb', //悬浮背景
						},
					},
					data: [],
				},
				series: series,
			};
			// 添加窗口变化监听
			window.addEventListener('resize', () => {
				myChart.resize();
			});

			myChart.setOption(option);
		},
	},
};
</script>

<style scoped>
.container {
	width: 100%;
	height: 100%;
	/* 设置地图容器的高度 */
}
</style>

然后去下载中国地图数据:

地图数据

对不起,作为AI语言模型,我无法直接为您编写代码。不过,我可以为您提供一个基本的地图飞线示例,供您参考和学习。 首先,您需要引入echarts库和地图数据: ```html <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts-gl.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/echarts-liquidfill.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.0/extension/bmap.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 然后,您可以在HTML中创建一个div元素,用于渲染地图: ```html <div id="map" style="width: 100%; height: 600px;"></div> ``` 接下来,您需要在JS中编写代码来生成地图飞线: ```javascript // 初始化echarts实例 var myChart = echarts.init(document.getElementById('map')); // 配置地图 myChart.setOption({ bmap: { center: [116.46, 39.92], zoom: 5, roam: true, mapStyle: { styleJson: [{ featureType: 'water', elementType: 'all', stylers: { color: '#d1d1d1' } }, { featureType: 'land', elementType: 'all', stylers: { color: '#f3f3f3' } }, { featureType: 'railway', elementType: 'all', stylers: { visibility: 'off' } }, { featureType: 'highway', elementType: 'all', stylers: { color: '#fdfdfd' } }, { featureType: 'highway', elementType: 'labels', stylers: { visibility: 'off' } }, { featureType: 'arterial', elementType: 'geometry', stylers: { color: '#fefefe' } }, { featureType: 'arterial', elementType: 'geometry.fill', stylers: { color: '#fefefe' } }, { featureType: 'poi', elementType: 'all', stylers: { visibility: 'off' } }, { featureType: 'green', elementType: 'all', stylers: { visibility: 'off' } }, { featureType: 'subway', elementType: 'all', stylers: { visibility: 'off' } }, { featureType: 'manmade', elementType: 'all', stylers: { color: '#d1d1d1' } }, { featureType: 'local', elementType: 'all', stylers: { color: '#d1d1d1' } }, { featureType: 'arterial', elementType: 'labels', stylers: { visibility: 'off' } }, { featureType: 'boundary', elementType: 'all', stylers: { color: '#fefefe' } }, { featureType: 'building', elementType: 'all', stylers: { color: '#d1d1d1' } }, { featureType: 'label', elementType: 'labels.text.fill', stylers: { color: '#999999' } }] } }, series: [{ type: 'lines', coordinateSystem: 'bmap', data: [ [{ name: '北京' }, { name: '上海', value: 100 }], [{ name: '北京' }, { name: '广州', value: 100 }], [{ name: '北京' }, { name: '深圳', value: 100 }], [{ name: '北京' }, { name: '成都', value: 100 }], [{ name: '北京' }, { name: '重庆', value: 100 }] ], polyline: true, lineStyle: { normal: { color: '#ffa022', width: 1, opacity: 0.6, curveness: 0.2 } } }] }); ``` 这段代码中,我们使用了echarts的地图组件和lines系列,通过data属性指定了要绘制的地图飞线的起点和终点,以及value属性指定了线条的粗细程度。通过lineStyle属性可以设置线条的样式,包括颜色、宽度、透明度和曲线程度等。 当您运行这段代码时,就可以在页面上看到一个简单的地图飞线效果了。如果您想进一步优化地图飞线效果,可以通过调整属性和样式来实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值