echarts+百度地图

Love The Way You Lie 2022-05-14 20:44 754阅读 0赞

使用echarts实现百度地图功能（需要下载bmap.js）：

效果图如下：

![70][]

<!DOCTYPE html>
    
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>百度地图</title>
    		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    		<meta name="apple-mobile-web-app-capable" content="yes"><meta name="format-detection" content="telephone=no" />
    		<meta name="apple-mobile-web-app-status-bar-style" content="black">
    	</head>
    	
    
    	<body>
    		<div id="MinigrateChart" style="width: 1920px;height:800px;"></div>
    	</body>
    
    </html>

<script src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
    <script type="text/javascript" src="js/echarts.js"></script>
    <script type="text/javascript" src="js/bmap.js"></script>
    <script type="text/javascript">
    	let minigrateChart = echarts.init(document.getElementById("MinigrateChart"));
    	let geoCoordMap = {
    		'上海': [121.4648, 31.2891],
    		'东莞': [113.8953, 22.901],
    		'东营': [118.7073, 37.5513],
    		'中山': [113.4229, 22.478],
    		'临汾': [111.4783, 36.1615],
    		'临沂': [118.3118, 35.2936],
    		'丹东': [124.541, 40.4242],
    		'丽水': [119.5642, 28.1854],
    		'乌鲁木齐': [87.9236, 43.5883],
    		'佛山': [112.8955, 23.1097],
    		'保定': [115.0488, 39.0948],
    		'兰州': [103.5901, 36.3043],
    		'包头': [110.3467, 41.4899],
    		'北京': [116.4551, 40.2539],
    		'北海': [109.314, 21.6211],
    		'南京': [118.8062, 31.9208],
    		'南宁': [108.479, 23.1152],
    		'南昌': [116.0046, 28.6633],
    		'南通': [121.1023, 32.1625],
    		'厦门': [118.1689, 24.6478],
    		'台州': [121.1353, 28.6688],
    		'合肥': [117.29, 32.0581],
    		'呼和浩特': [111.4124, 40.4901],
    		'咸阳': [108.4131, 34.8706],
    		'哈尔滨': [127.9688, 45.368],
    		'唐山': [118.4766, 39.6826],
    		'嘉兴': [120.9155, 30.6354],
    		'大同': [113.7854, 39.8035],
    		'大连': [122.2229, 39.4409],
    		'天津': [117.4219, 39.4189],
    		'太原': [112.3352, 37.9413],
    		'威海': [121.9482, 37.1393],
    		'宁波': [121.5967, 29.6466],
    		'宝鸡': [107.1826, 34.3433],
    		'宿迁': [118.5535, 33.7775],
    		'常州': [119.4543, 31.5582],
    		'广州': [113.5107, 23.2196],
    		'廊坊': [116.521, 39.0509],
    		'延安': [109.1052, 36.4252],
    		'张家口': [115.1477, 40.8527],
    		'徐州': [117.5208, 34.3268],
    		'德州': [116.6858, 37.2107],
    		'惠州': [114.6204, 23.1647],
    		'成都': [103.9526, 30.7617],
    		'扬州': [119.4653, 32.8162],
    		'承德': [117.5757, 41.4075],
    		'拉萨': [91.1865, 30.1465],
    		'无锡': [120.3442, 31.5527],
    		'日照': [119.2786, 35.5023],
    		'昆明': [102.9199, 25.4663],
    		'杭州': [119.5313, 29.8773],
    		'枣庄': [117.323, 34.8926],
    		'柳州': [109.3799, 24.9774],
    		'株洲': [113.5327, 27.0319],
    		'武汉': [114.3896, 30.6628],
    		'汕头': [117.1692, 23.3405],
    		'江门': [112.6318, 22.1484],
    		'沈阳': [123.1238, 42.1216],
    		'沧州': [116.8286, 38.2104],
    		'河源': [114.917, 23.9722],
    		'泉州': [118.3228, 25.1147],
    		'泰安': [117.0264, 36.0516],
    		'泰州': [120.0586, 32.5525],
    		'济南': [117.1582, 36.8701],
    		'济宁': [116.8286, 35.3375],
    		'海口': [110.3893, 19.8516],
    		'淄博': [118.0371, 36.6064],
    		'淮安': [118.927, 33.4039],
    		'深圳': [114.5435, 22.5439],
    		'清远': [112.9175, 24.3292],
    		'温州': [120.498, 27.8119],
    		'渭南': [109.7864, 35.0299],
    		'湖州': [119.8608, 30.7782],
    		'湘潭': [112.5439, 27.7075],
    		'滨州': [117.8174, 37.4963],
    		'潍坊': [119.0918, 36.524],
    		'烟台': [120.7397, 37.5128],
    		'玉溪': [101.9312, 23.8898],
    		'珠海': [113.7305, 22.1155],
    		'盐城': [120.2234, 33.5577],
    		'盘锦': [121.9482, 41.0449],
    		'石家庄': [114.4995, 38.1006],
    		'福州': [119.4543, 25.9222],
    		'秦皇岛': [119.2126, 40.0232],
    		'绍兴': [120.564, 29.7565],
    		'聊城': [115.9167, 36.4032],
    		'肇庆': [112.1265, 23.5822],
    		'舟山': [122.2559, 30.2234],
    		'苏州': [120.6519, 31.3989],
    		'莱芜': [117.6526, 36.2714],
    		'菏泽': [115.6201, 35.2057],
    		'营口': [122.4316, 40.4297],
    		'葫芦岛': [120.1575, 40.578],
    		'衡水': [115.8838, 37.7161],
    		'衢州': [118.6853, 28.8666],
    		'西宁': [101.4038, 36.8207],
    		'西安': [109.1162, 34.2004],
    		'贵阳': [106.6992, 26.7682],
    		'连云港': [119.1248, 34.552],
    		'邢台': [114.8071, 37.2821],
    		'邯郸': [114.4775, 36.535],
    		'郑州': [113.4668, 34.6234],
    		'鄂尔多斯': [108.9734, 39.2487],
    		'重庆': [107.7539, 30.1904],
    		'金华': [120.0037, 29.1028],
    		'铜川': [109.0393, 35.1947],
    		'银川': [106.3586, 38.1775],
    		'镇江': [119.4763, 31.9702],
    		'长春': [125.8154, 44.2584],
    		'长沙': [113.0823, 28.2568],
    		'长治': [112.8625, 36.4746],
    		'阳泉': [113.4778, 38.0951],
    		'青岛': [120.4651, 36.3373],
    		'韶关': [113.7964, 24.7028]
    	};
    	let BJData = [
    		[{
    			name: '北京'
    		}, {
    			name: '上海',
    			value: 95
    		}],
    		[{
    			name: '北京'
    		}, {
    			name: '广州',
    			value: 90
    		}],
    		[{
    			name: '北京'
    		}, {
    			name: '大连',
    			value: 80
    		}],
    		[{
    			name: '北京'
    		}, {
    			name: '南宁',
    			value: 70
    		}],
    		[{
    			name: '北京'
    		}, {
    			name: '南昌',
    			value: 60
    		}],
    		[{
    			name: '北京'
    		}, {
    			name: '拉萨',
    			value: 50
    		}],
    		[{
    			name: '北京'
    		}, {
    			name: '长春',
    			value: 40
    		}],
    		[{
    			name: '北京'
    		}, {
    			name: '包头',
    			value: 30
    		}],
    		[{
    			name: '北京'
    		}, {
    			name: '重庆',
    			value: 20
    		}],
    		[{
    			name: '北京'
    		}, {
    			name: '常州',
    			value: 10
    		}]
    	];
    	let 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 convertData = function(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,
    					numValue: dataItem[1].value,
    					coords: [fromCoord, toCoord]
    				});
    			}
    		}
    		return res;
    	};
    	//设置Line和Point的颜色      
    	let LineColor = ['#ff3333', 'orange', 'lime', 'aqua'];
    	let series = [];
    	[
    		['北京', BJData]
    	].forEach(function(item, i) {
    		series.push({
    				// 设置飞行线                    
    				name: item[1],
    				type: 'lines',
    				zlevel: 1,
    				coordinateSystem: 'bmap',
    				effect: {
    					show: true,
    					period: 6,
    					trailLength: 1.7,
    					color: '#fff',
    					shadowBlur: 0,
    					symbolSize: 0
    				},
    
    				lineStyle: {
    					normal: {
    						color: function(params) {
    							let num = params.data.numValue;
    							if(num > 75) {
    								return LineColor[0];
    							} else if(num > 50) {
    								return LineColor[1];
    							} else if(num > 25) {
    								return LineColor[2];
    							} else {
    								return LineColor[3];
    							}
    						},
    						width: 1,
    						curveness: 0.2
    					}
    				},
    				data: convertData(item[1])
    			},
    			// 设置轨迹线               
    			{
    				name: item[0].name,
    				type: 'lines',
    				zlevel: 2,
    				coordinateSystem: 'bmap',
    				effect: {
    					show: true,
    					period: 6,
    					trailLength: 0.7,
    					symbol: planePath,
    					symbolSize: 12
    				},
    
    				lineStyle: {
    					normal: {
    						color: function(params) {
    							console.log(params)
    							let num = params.data.numValue;
    							if(num > 75) {
    								return LineColor[0];
    							} else if(num > 50) {
    								return LineColor[1];
    							} else if(num > 25) {
    								return LineColor[2];
    							} else {
    								return LineColor[3];
    							}
    						},
    						width: 0.2,
    						opacity: 0.4,
    						curveness: 0.2
    					}
    				},
    				data: convertData(item[1])
    			}, {
    
    				// 设置点                 
    				name: item[0],
    				type: 'effectScatter',
    				coordinateSystem: 'bmap',
    				zlevel: 2,
    				rippleEffect: {
    					brushType: 'stroke'
    				},
    				label: {
    					normal: {
    						show: true,
    						position: 'right',
    						formatter: function(params) {
    							var res = params.value[2];
    							return res;
    						}
    					}
    				},
    				symbolSize: function(val) {
    					return val[2] / 10;
    				},
    				itemStyle: {
    					normal: {
    						color: function(params) {
    							let num = params.value[2];
    							if(num > 75) {
    								return LineColor[0];
    							} else if(num > 50) {
    								return LineColor[1];
    							} else if(num > 25) {
    								return LineColor[2];
    							} else {
    								return LineColor[3];
    							}
    						}
    					}
    				},
    				data: item[1].map(function(dataItem) {
    					return {
    						name: dataItem[1].name,
    						value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
    					};
    				})
    			});
    	});
    	let MinigrateOption = {
    		title: {
    			text: '',
    			subtext: '',
    			left: 'center',
    			textStyle: {
    				color: '#fff'
    			}
    		},
    		tooltip: {
    			trigger: 'item',
    			formatter: function(params) {
    				var res = params.name;
    				return res;
    			}
    		},
    		legend: {
    			orient: 'vertical',
    			top: 'bottom',
    			left: 'right',
    			data: ['北京 Top10', '上海 Top10', '广州 Top10'],
    			textStyle: {
    				color: '#fff'
    			},
    			selectedMode: 'single'
    		},
    		// dataRange: {
    		//     min : 0,          
    		//     max : 100,            
    		//     calculable : true,          
    		//     color: ['#ff3333', 'orange', 'yellow','lime','aqua'],          
    		//     textStyle:{          
    		//         color:'#fff'        
    		//     }          
    		// },          
    		bmap: {
    			center: [113.65, 34.76],
    			zoom: 5.5,
    			roam: true,
    			mapStyle: {
    				styleJson: [{
    					'featureType': 'land',
    					//调整土地颜色                        
    					'elementType': 'geometry',
    					'stylers': {
    						'color': '#081734'
    					}
    				}, {
    					'featureType': 'building',
    					//调整建筑物颜色                           
    					'elementType': 'geometry',
    					'stylers': {
    						'color': '#04406F'
    					}
    				}, {
    					'featureType': 'building',
    					//调整建筑物标签是否可视                     
    					'elementType': 'labels',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'highway',
    					//调整高速道路颜色                      
    					'elementType': 'geometry',
    					'stylers': {
    						'color': '#015B99'
    					}
    				}, {
    					'featureType': 'highway',
    					//调整高速名字是否可视                    
    					'elementType': 'labels',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'arterial',
    					//调整一些干道颜色                    
    					'elementType': 'geometry',
    					'stylers': {
    						'color': '#003051'
    					}
    				}, {
    					'featureType': 'arterial',
    					'elementType': 'labels',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'green',
    					'elementType': 'geometry',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'water',
    					'elementType': 'geometry',
    					'stylers': {
    						'color': '#044161'
    					}
    				}, {
    					'featureType': 'subway',
    					//调整地铁颜色                          
    					'elementType': 'geometry.stroke',
    					'stylers': {
    						'color': '#003051'
    					}
    				}, {
    					'featureType': 'subway',
    					'elementType': 'labels',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'railway',
    					'elementType': 'geometry',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'railway',
    					'elementType': 'labels',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'all',
    					//调整所有的标签的边缘颜色                
    					'elementType': 'labels.text.stroke',
    					'stylers': {
    						'color': '#313131'
    					}
    				}, {
    					'featureType': 'all',
    					//调整所有标签的填充颜色            
    					'elementType': 'labels.text.fill',
    					'stylers': {
    						'color': '#FFFFFF'
    					}
    				}, {
    					'featureType': 'manmade',
    					'elementType': 'geometry',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'manmade',
    					'elementType': 'labels',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'local',
    					'elementType': 'geometry',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'local',
    					'elementType': 'labels',
    					'stylers': {
    						'visibility': 'off'
    					}
    				}, {
    					'featureType': 'subway',
    					'elementType': 'geometry',
    					'stylers': {
    						'lightness': -65
    					}
    				}, {
    					'featureType': 'railway',
    					'elementType': 'all',
    					'stylers': {
    						'lightness': -40
    					}
    				}, {
    					'featureType': 'boundary',
    					'elementType': 'geometry',
    					'stylers': {
    						'color': '#8b8787',
    						'weight': '1',
    						'lightness': -29
    					}
    				}]
    			}
    		},
    		series: series
    	};
    	minigrateChart.setOption(MinigrateOption);
    </script>

[70]: /images/20220515/a375c1601b104166bccb2bd430b72492.png

发表评论取消回复

表情：

评论列表（有 0 条评论，754人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echart基于百度地图实现地图飞线

echart社区例子都是基于geo底图实现的底图飞线，现实现基于在线地图实现地图飞线：原例子[ECharts Gallery - 模拟迁徙+百度地图 (makeapie.c

忘是亡心i/ 2022年12月25日 00:54/ 0 赞/ 343 阅读

相关百度地图

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></

电玩女神/ 2022年10月01日 03:58/ 0 赞/ 419 阅读

相关百度地图

百度地图Demo 详情请看 [http://lbsyun.baidu.com/index.php?title=jspopular/guide/introduction

太过爱你忘了你带给我的痛/ 2022年07月13日 10:59/ 0 赞/ 540 阅读

相关 echarts3 + 百度地图API展示自定义地图

　之前一篇echarts+百度地图API实现自定义底图后，这次测试提出了bug：地图上的点可点击，弹出地点信息。于是开始研究如何去掉底图可点的功能。上网搜索无果后，还是自己研究

电玩女神/ 2022年06月10日 10:10/ 0 赞/ 521 阅读

相关百度地图

PC端定位不准确主要应用到移动端第一、申请百度密钥很简单的几步就搞定第二、引入文件 html 代码效果预览 1 2 3 4 5

朱雀/ 2022年06月05日 04:42/ 0 赞/ 489 阅读

相关 echarts,map,百度地图扩展

echarts,map,百度地图扩展 > github：[https://github.com/Gladysgong/echarts-map][https_github.

谁践踏了优雅/ 2022年06月02日 08:57/ 0 赞/ 323 阅读

相关百度地图

$(function(){ var BMapInit=function(){ var map =

曾经终败给现在/ 2022年05月23日 09:57/ 0 赞/ 475 阅读

相关 echarts+百度地图

使用echarts实现百度地图功能（需要下载bmap.js）：效果图如下： ![70][] <!DOCTYPE html> <html>

Love The Way You Lie/ 2022年05月14日 20:44/ 0 赞/ 755 阅读

相关 Echarts热力图和百度地图拓展

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;

绝地灬酷狼/ 2022年04月17日 07:06/ 0 赞/ 537 阅读

相关百度地图API 加载百度地图

前言百度地图在日常生活中应用的越来越多，功能也日渐丰富，我们可以使用ArcGIS JS API加载在线百度地图（[https://blog.csdn.net/i

布满荆棘的人生/ 2021年09月15日 02:50/ 0 赞/ 841 阅读