百度地图数据可视化

最新推荐文章于 2024-05-16 13:07:37 发布
最新推荐文章于 2024-05-16 13:07:37 发布
阅读量344 收藏 2
点赞数 1
文章标签： 百度 信息可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57307213/article/details/131359651
版权

百度地图入门

百度开发者账号申请

基本用法

::: details

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var map = new BMapGL.Map("allmap"); // 创建Map实例
    var point = new BMapGL.Point(116.404, 39.915); // 初始化中心点坐标 
	map.centerAndZoom(point, 12);  // 初始化地图，设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
</script>

:::

思考：百度地图的绘图流程是怎样的？

::: details

  1. 引入 js 库，注意需要附带申请的密钥 ak
  2. 编写容器组件
  3. 初始化 Map 对象
  4. 初始化 Point 对象
  5. 设置中心点和地图级别
    :::

异步加载

在对性能敏感的场景下，我们可以选择异步加载百度地图，从而加快首屏的渲染速度

::: details

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<title>异步地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	function init() { 
		var map = new BMapGL.Map('allmap'); 
		var point = new BMapGL.Point(116.404, 39.915);
		map.centerAndZoom(point, 12);
		map.enableScrollWheelZoom(true);
	} 
			
	function loadScript() { 
		var script = document.createElement("script"); 
		script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb&callback=init";
		document.body.appendChild(script); 
	} 
			
	window.onload = loadScript;
</script>

:::

3D地图

我们可以使用 heading 和 tilt 属性控制地图的旋转角度和俯角

官方文档

::: details

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#allmap { position: relative; }
	#tools { position: absolute; left: 0; top: 0; z-index: 1000;}
	.tools-bar { display: flex; }
	.label { width: 80px; text-align: right; }
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="tools">
		<div class="tools-bar">
			<div class="label">heading:</div>
			<button id="heading-add">+</button>
			<input type="text" id="heading" value="40">
			<button id="heading-minus">-</button>
		</div>
		<div class="tools-bar">
			<div class="label">tilt:</div>
			<button id="tilt-add">+</button>
			<input type="text" id="tilt" value="70">
			<button id="tilt-minus">-</button>
		</div>
		<div class="tools-bar">
			<button id="loop">loop</button>
			<button id="stop">stop</button>
		</div>
	</div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap");    // 创建Map实例
  var point = new BMapGL.Point(116.280190, 40.049191);
	map.centerAndZoom(point, 19);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
	map.setHeading(40);   // 设置地图旋转角度
	map.setTilt(70);       // 设置地图的倾斜角度
	var heading = document.getElementById('heading');
	var headingAdd = document.getElementById('heading-add');
	var headingMinus = document.getElementById('heading-minus');
	var tilt = document.getElementById('tilt');
	var tiltAdd = document.getElementById('tilt-add');
	var tiltMinus = document.getElementById('tilt-minus');
	heading.addEventListener('input', function(e) {
		map.setHeading(e.target.value);
	});
	tilt.addEventListener('input', function(e) {
		map.setTilt(e.target.value);
	});
	headingAdd.addEventListener('click', function(e) {
		heading.value++;
		map.setHeading(heading.value);
	});
	headingMinus.addEventListener('click', function(e) {
		heading.value--;
		map.setHeading(heading.value);
	});
	tiltAdd.addEventListener('click', function(e) {
		tilt.value++;
		map.setTilt(tilt.value);
	});
	tiltMinus.addEventListener('click', function(e) {
		tilt.value--;
		map.setTilt(tilt.value);
	});
	var task;
	document.getElementById('loop').addEventListener('click', function(e) {
		task = setInterval(() => {
			if (loop) {
				heading.value++;
				map.setHeading(heading.value);
			}
		}, 100);
	});
	document.getElementById('stop').addEventListener('click', function(e) {
		task && clearInterval(task);
	})
</script>

:::

添加控件

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap");
  map.centerAndZoom(new BMapGL.Point(118.5, 27.5), 5);
	map.enableScrollWheelZoom(true);
	map.setMapType(BMAP_EARTH_MAP);      // 设置地图类型为地球模式
	var scaleCtrl = new BMapGL.ScaleControl({ 
		anchor: BMAP_ANCHOR_TOP_LEFT,
		offset: new BMapGL.Size(100, 10)
	}); 
	// 添加缩放控件
	map.addControl(scaleCtrl);
	var zoomCtrl = new BMapGL.ZoomControl({ 
		anchor: BMAP_ANCHOR_BOTTOM_LEFT
	}); 
	// 添加比例尺控件
	map.addControl(zoomCtrl);
</script>

个性化地图

官方文档

::: details

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // GL版命名空间为BMapGL
    // 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap");    // 创建Map实例
  var point = new BMapGL.Point(116.404, 39.915);
	map.centerAndZoom(point, 9);  // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.setMapStyleV2({     
  	styleId: 'a0c43e8c7279db0a4a032712d0e4c32c'
	});
</script>

:::
可以通过styleJson和styleId两种方式引入自定义样式。

百度地图进阶

百度地图绘图

包括：

  • 绘制图标
  • 绘制线段
  • 绘制文本
  • 绘制弹窗

::: details

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	var map = new BMapGL.Map("allmap");    // 创建Map实例
  var point = new BMapGL.Point(116.404, 39.915);
	map.centerAndZoom(point, 12);
	// map.enableScrollWheelZoom(true);
	map.setMapStyleV2({     
  	styleId: '556b6c846f130ec3ad0016f2eba410f6'
	});
	// var marker = new BMapGL.Marker(point);        // 创建标注   
	// map.addOverlay(marker);                     // 将标注添加到地图中
	var myIcon = new BMapGL.Icon("https://www.youbaobao.xyz/datav-res/datav/location.png", 
	  new BMapGL.Size(60, 60), {
			anchor: new BMapGL.Size(30, 30),
			imageOffset: new BMapGL.Size(0, 0)
		}
	);
	// 创建标注对象并添加到地图  
	var marker = new BMapGL.Marker(point, { icon: myIcon });
	marker.addEventListener("click", function(){   
    var opts = {
    	width: 250,     // 信息窗口宽度
    	height: 100,    // 信息窗口高度
    	title: "标题"  // 信息窗口标题
		}
		var infoWindow = new BMapGL.InfoWindow("内容", opts);  // 创建信息窗口对象
		map.openInfoWindow(infoWindow, point);        // 打开信息窗口
	});
	map.addOverlay(marker); 
	var polyline = new BMapGL.Polyline([
		new BMapGL.Point(116.399, 39.800),
		new BMapGL.Point(116.405, 39.810),
		new BMapGL.Point(116.425, 39.820)
	], {
		strokeColor: "blue",
		strokeWeight: 2,
		strokeOpacity: 0.5
	});
	map.addOverlay(polyline);
	var content = "欢迎学习数据可视化体系课";
	var label = new BMapGL.Label(content, {       // 创建文本标注
		position: point,                          // 设置标注的地理位置
		offset: new BMapGL.Size(200, 20)           // 设置标注的偏移量
	});
	label.setStyle({                              // 设置label的样式
    width: '100px',
		height: '20px',
		padding: '20px',
		color: '#fff',
    fontSize: '20px',
    border: '2px solid #1E90FF',
		background: 'red',
		whiteSpace: 'wrap',
		overflow: 'hidden',
		lineHeight: '20px'
	});
	label.addEventListener('click', function(e) {
		alert(e.target.content);
	});
	map.addOverlay(label);                        // 将标注添加到地图中
</script>

:::

百度地图动画

::: details

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#allmap {position: relative;}
	#tools {position: absolute;left:0;top:0;z-index: 1000;}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="tools">
		<button id="start">播放动画</button>
		<button id="end">停止播放</button>
	</div>
</body>
</html>
<script type="text/javascript">
  var bmap = new BMapGL.Map("allmap");                          // 创建Map实例
	bmap.centerAndZoom(new BMapGL.Point(116.414, 39.915), 20);    // 初始化地图，设置中心点坐标和地图级别
	bmap.enableScrollWheelZoom(true);                             // 开启鼠标滚轮缩放
	bmap.setTilt(20);                              // 设置地图初始倾斜角度
	var keyFrames = [
		{
			center: new BMapGL.Point(116.307092,40.054922),
			zoom:20,
			tilt: 50,
			heading: 0,
			percentage: 0
		},
		{
			center: new BMapGL.Point(116.307631,40.055391),
			zoom: 21,
			tilt: 70,
			heading: 0,
			percentage: 0.1
		},
		{
			center: new BMapGL.Point(116.306858,40.057887),
			zoom:21,
			tilt: 70,
			heading: 0,
			percentage: 0.25
		},
		{
			center: new BMapGL.Point(116.306858,40.057887),
			zoom:21,
			tilt: 70,
			heading: -90,
			percentage: 0.35
		},
		{
			center: new BMapGL.Point(116.307904,40.058118),
			zoom: 21,
			tilt: 70,
			heading: -90,
			percentage: 0.45
		},
		{
			center: new BMapGL.Point(116.307904,40.058118),
			zoom: 21,
			tilt: 70,
			heading: -180,
			percentage: 0.55
		},
		{
			center: new BMapGL.Point(116.308902,40.055954),
			zoom:21,
			tilt: 70,
			heading: -180,
			percentage: 0.75
		},
		{
			center: new BMapGL.Point(116.308902,40.055954),
			zoom:21,
			tilt: 70,
			heading: -270,
			percentage: 0.85
		},
		{
			center: new BMapGL.Point(116.307779,40.055754),
			zoom:21,
			tilt: 70,
			heading: -360,
			percentage: 0.95
		},
		{
			center: new BMapGL.Point(116.307092,40.054922),
			zoom:20,
			tilt: 50,
			heading: -360,
			percentage: 1
		},
	];
	var opts = {
    duration: 10000,     // 设置每次迭代动画持续时间
    delay: 3000,         // 设置动画延迟开始时间
    interation: 'INFINITE'        // 设置动画迭代次数
	};
	var animation = new BMapGL.ViewAnimation(keyFrames, opts);        // 初始化动画实例
	animation.addEventListener('animationstart', function(e) {        // 监听动画开始事件
		console.log('start');
	});
	animation.addEventListener('animationiterations', function(e) {   // 监听动画迭代事件
		console.log('onanimationiterations');
	});
	animation.addEventListener('animationend', function(e) {        // 监听动画结束事件
		console.log('end');
	});
	animation.addEventListener('animationcancel', function(e) {       // 监听动画中途被终止事件
		console.log('cancel');
	});
	document.getElementById('start').addEventListener('click', function() {
		bmap.startViewAnimation(animation);         // 开始播放动画
	});
	document.getElementById('end').addEventListener('click', function() {
		bmap.cancelViewAnimation(animation);         // 强制停止动画
	});
</script>

:::

百度地图轨迹动画

::: details

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	#allmap {position: relative;}
	#tools {position: absolute;left:0;top:0;z-index: 1000;}
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<script type="text/javascript" src="https://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="tools">
		<button id="start">播放动画</button>
		<button id="end">停止播放</button>
	</div>
</body>
</html>
<script type="text/javascript">
  var bmap = new BMapGL.Map("allmap");                          // 创建Map实例
	bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17);    // 初始化地图，设置中心点坐标和地图级别
	bmap.enableScrollWheelZoom(true);                             // 开启鼠标滚轮缩放
	var path = [{
    'lng': 116.297611,
    'lat': 40.047363
	}, {
		'lng': 116.302839,
		'lat': 40.048219
	}, {
		'lng': 116.308301,
		'lat': 40.050566
	}, {
		'lng': 116.305732,
		'lat': 40.054957
	}, {
		'lng': 116.304754,
		'lat': 40.057953
	}, {
		'lng': 116.306487,
		'lat': 40.058312
	}, {
		'lng': 116.307223,
		'lat': 40.056379
	}];
	var point = [];
	for (var i = 0; i < path.length; i++) {
		point.push(new BMapGL.Point(path[i].lng, path[i].lat));
	}
	var pl = new BMapGL.Polyline(point);
	var trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {
    overallView: true, // 动画完成后自动调整视野到总览
    tilt: 30,          // 轨迹播放的角度，默认为55
    duration: 20000,   // 动画持续时长，默认为10000，单位ms
    delay: 3000        // 动画开始的延迟，默认0，单位ms
	});
	document.getElementById('start').addEventListener('click', function() {
		trackAni.start();
	});
	document.getElementById('end').addEventListener('click', function() {
		trackAni.cancel();         // 强制停止动画
	});
</script>

:::

百度地图可视化

百度地图绘制点

百度地图可视化通过 mapv 和 mapvgl 解决

全屏预览

::: details

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		html,
    body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
    }
    #map_container {
			width: 100%;
			height: 100%;
			margin: 0;
    }
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
	<script src="https://mapv.baidu.com/build/mapv.js"></script>
	<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="map_container"></div>
	<script type="text/javascript">
		var map = initMap({
			tilt: 0,
			heading: 0,
			center: [103.438656,25.753594],
			zoom: 8,
			style: snowStyle,
			skyColors: [
				// 地面颜色
				'rgba(226, 237, 248, 0)',
				// 天空颜色
				'rgba(186, 211, 252, 1)'
			]
		});
		setData(initData());
		function initData() {
			var data = [];
			var citys = [
				'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
				'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
				'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
			];
	    var randomCount = 700;
    	// 构造数据
    	while (randomCount--) {
        var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
        data.push({
					geometry: {
						type: 'Point',
						coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
					},
					properties: {
						count: Math.random() * 100
					}
        });
    	}
			return data;
		}
		function setData(data) {
			var view = new mapvgl.View({
        map: map
    	});

    	var intensity = new mapvgl.Intensity({
        max: 100,
        min: 0,
        gradient: {
					0: 'rgb(25, 66, 102, 0.8)',
					0.3: 'rgb(145, 102, 129, 0.8)',
					0.7: 'rgb(210, 131, 137, 0.8)',
					1: 'rgb(248, 177, 149, 0.8)'
        },
        maxSize: 30,
        minSize: 5
    	});

    	var pointLayer = new mapvgl.PointLayer({
        blend: 'lighter',
        size: function (data) {
					return intensity.getSize(data.properties.count);
        },
        color: function (data) {
					return intensity.getColor(data.properties.count);
        }
    	});

    	view.addLayer(pointLayer);
    	pointLayer.setData(data);
		}
	</script>	
</body>
</html>

:::

在这里插入图片描述

:::

思考：百度地图mapv开发流程是怎样的？

::: details

  1. 引入 js 库
    • 百度地图 js
    • 百度地图 mapv
    • 百度地图 mapvgl
  2. 编写容器组件
  3. 初始化 Map 对象
  4. 初始化绘制数据，数据格式为：
[{
  geometry: {
    type: 'Point',
    coordinates: [x, y]
  },
  properties: {
    count: Math.random() * 100
    // other properties...
  }
}, {
  // other data...
}]
  1. 初始化 mapvgl.View 图层管理器
  2. 初始化 mapvgl.Intensity 数据显示强度
  3. 初始化 mapvgl.PointLayer 图层
  4. 调用 view.addLayer 添加图层到图层管理器
  5. 调用 mapvgl.PointLayer.setData 关联图层和数据
    :::

百度地图飞线动画

在这里插入图片描述

全屏预览

::: details

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		html,
    body {
			width: 100%;
			height: 100%;
			margin: 0;
			padding: 0;
    }
    #map_container {
			width: 100%;
			height: 100%;
			margin: 0;
    }
	</style>
	<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=G1LFyjrNGIkns5OfpZnrCGAKxpycPLwb"></script>
	<script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
	<script src="https://mapv.baidu.com/build/mapv.js"></script>
	<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.min.js"></script>
	<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.54/dist/mapvgl.threelayers.min.js"></script>
	<title>地图展示</title>
</head>
<body>
	<div id="map_container"></div>
	<script type="text/javascript">
		var map = initMap({
			tilt: 60,
			heading: 0,
			center: [103.438656,25.753594],
			zoom: 6,
			style: purpleStyle
		});
		setData(initData());
		function initData() {
			var data = [];
			var citys = [
				'北京', '天津', '上海', '重庆', '石家庄', '太原', '呼和浩特', '哈尔滨', '长春',
				'沈阳', '济南', '南京', '合肥', '杭州', '南昌', '福州', '郑州', '武汉', '长沙', '广州',
				'南宁', '西安', '银川', '兰州', '西宁', '乌鲁木齐', '成都', '贵阳', '昆明', '拉萨', '海口'
			];
	    var randomCount = 100; // 模拟的飞线的数量
   		var curve = new mapvgl.BezierCurve();
	    // 构造数据
  	  while (randomCount--) {
        var startPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)]);
        var endPoint = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length, 10)])
        curve.setOptions({
					start: [startPoint.lng, startPoint.lat],
					end: [endPoint.lng, endPoint.lat]
        });
        var curveModelData = curve.getPoints();
        data.push({
					geometry: {
						type: 'LineString',
						coordinates: curveModelData
					},
					properties: {
						count: Math.random()
					}
        });
    	}
			return data;
		}
		function setData(data) {
			var view = new mapvgl.View({
        map: map
    	});

			var flylineLayer = new mapvgl.FlyLineLayer({
        style: 'chaos',
        step: 0.3,
        color: 'rgba(33, 242, 214, 0.3)',
        textureColor: function (data) {
            return data.properties.count > 0.5 ? '#ff0000' : '#56ccdd';
        },
        textureWidth: 20,
        textureLength: 10
    	});
    	view.addLayer(flylineLayer);
    	flylineLayer.setData(data);
		}
	</script>	
</body>
</html>

:::

百度地图炫酷飞线图

全屏预览

::: details

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>

    <style type="text/css">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>

    <div id="map"></div>
    <canvas id="canvas"></canvas>

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
    <script type="text/javascript" src="https://mapv.baidu.com/build/mapv.js"></script>

    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMap.Map("map", {
            enableMapClick: false
        });    // 创建Map实例
        map.centerAndZoom(new BMap.Point(108.154518,36.643346), 5);  // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

        // 地图自定义样式
        map.setMapStyle({
            styleJson: [{
                "featureType": "water",
                "elementType": "all",
                "stylers": {
                    "color": "#044161"
                }
            }, {
                "featureType": "land",
                "elementType": "all",
                "stylers": {
                    "color": "#091934"
                }
            }, {
                "featureType": "boundary",
                "elementType": "geometry",
                "stylers": {
                    "color": "#064f85"
                }
            }, {
                "featureType": "railway",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "highway",
                "elementType": "geometry",
                "stylers": {
                    "color": "#004981"
                }
            }, {
                "featureType": "highway",
                "elementType": "geometry.fill",
                "stylers": {
                    "color": "#005b96",
                    "lightness": 1
                }
            }, {
                "featureType": "highway",
                "elementType": "labels",
                "stylers": {
                    "visibility": "on"
                }
            }, {
                "featureType": "arterial",
                "elementType": "geometry",
                "stylers": {
                    "color": "#004981",
                    "lightness": -39
                }
            }, {
                "featureType": "arterial",
                "elementType": "geometry.fill",
                "stylers": {
                    "color": "#00508b"
                }
            }, {
                "featureType": "poi",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "green",
                "elementType": "all",
                "stylers": {
                    "color": "#056197",
                    "visibility": "off"
                }
            }, {
                "featureType": "subway",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "manmade",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "local",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "arterial",
                "elementType": "labels",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "boundary",
                "elementType": "geometry.fill",
                "stylers": {
                    "color": "#029fd4"
                }
            }, {
                "featureType": "building",
                "elementType": "all",
                "stylers": {
                    "color": "#1a5787"
                }
            }, {
                "featureType": "label",
                "elementType": "all",
                "stylers": {
                    "visibility": "off"
                }
            }, {
                "featureType": "poi",
                "elementType": "labels.text.fill",
                "stylers": {
                    "color": "#ffffff"
                }
            }, {
                "featureType": "poi",
                "elementType": "labels.text.stroke",
                "stylers": {
                    "color": "#1e1c1c"
                }
            }, {
                "featureType": "administrative",
                "elementType": "labels",
                "stylers": {
                    "visibility": "off"
                }
            },{
                "featureType": "road",
                "elementType": "labels",
                "stylers": {
                    "visibility": "off"
                }
            }]
        });

        var randomCount = 500;

        var node_data = {
            "0":{"x":108.154518, "y":36.643346},
            "1":{"x":121.485124, "y":31.235317},
        };

        var edge_data = [
            {"source":"1", "target":"0"}
        ]

        var citys = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];

        // 构造数据
        for (var i = 1; i < randomCount; i++) {
            var cityCenter = mapv.utilCityCenter.getCenterByCityName(citys[parseInt(Math.random() * citys.length)]);
            node_data[i] = {
                x: cityCenter.lng - 5 + Math.random() * 10,
                y: cityCenter.lat - 5 + Math.random() * 10,
            }
            edge_data.push(
                {"source": ~~(i * Math.random()), "target": '0'}
            );
        }

        var fbundling = mapv.utilForceEdgeBundling()
                        .nodes(node_data)
                        .edges(edge_data);

        var results = fbundling();  

        var data = [];
        var timeData = [];

        for (var i = 0; i < results.length; i++) {
            var line = results[i];
            var coordinates = [];
            for (var j = 0; j < line.length; j++) {
                coordinates.push([line[j].x, line[j].y]);
                timeData.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [line[j].x, line[j].y]
                    },
                    count: 1,
                    time: j
                });
            }
            data.push({
                geometry: {
                    type: 'LineString',
                    coordinates: coordinates
                }
            });
        }

        var dataSet = new mapv.DataSet(data);

        var options = {
            strokeStyle: 'rgba(55, 50, 250, 0.3)',
            globalCompositeOperation: 'lighter',
            shadowColor: 'rgba(55, 50, 250, 0.5)',
            shadowBlur: 10,
            methods: {
                click: function (item) {
                }
            },
            lineWidth: 1.0,
            draw: 'simple'
        }

        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

        var dataSet = new mapv.DataSet(timeData);

        var options = {
            fillStyle: 'rgba(255, 250, 250, 0.9)',
            globalCompositeOperation: 'lighter',
            size: 1.5,
            animation: {
                type: 'time',
                stepsRange: {
                    start: 0,
                    end: 100
                },
                trails: 1,
                duration: 5,
            },
            draw: 'simple'
        }

        var mapvLayer = new mapv.baiduMapLayer(map, dataSet, options);

    </script>
	
</body>
</html>

:::

Yolanda_2022
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如何快速制作百度地图可视化？（教你获取ak与地图初始化以及地图飞线层的实现,有demo）
Chen__FY的博客
04-21 932
7.完成后如果VScode里有Live Server这个插件的就可以直接在本地上运行了，如果没有的话记得安装一下哦~，我先默认没安装。8.安装好后右键点击Open with Live Server在本地运行结果。11.运行结果如下：飞线从广州到福州,成功运行！5.把body下面的script里的内容删掉。1.首先进入百度地图开发平台（1.打开MapVGL官网。
百度地图 - 使用数据可视化MapVGL
小小的前端
02-14 7484
简介 在地图项目的开发中，往往会伴随大量的数据展示。这时候使用地图api提供的覆盖物函数绘制元素，在页面上会生成大量的DOM元素导致页面变卡。 为了解决大量数据展示，百度地图开发了一套处理数据可视化的框架MapVGL。使用webGL的技术在canvas中绘制图形，能有效的提高页面性能。 MapVGL MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。 而且支持three.js，就是说
vue基于Echarts、百度地图MapVGL实现可视化大屏数据展示_vue echarts 大屏地图
最新发布
2401_84446963的博客
05-16 431
由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！// 假设主题名称是 “vintage”二叉树查找: 最大值、最小值、固定值。给予链表中的任一节点，把它删除掉。如何判断一个单链表有环。
基于Echarts2.X的地图数据可视化指南
热门推荐
夜郎King的博客
06-29 1万+
本文将基于Echarts2.2.7版本，重点讲解如何使用Html5和JavaScript进行Echarts地图开发，同时在地图上集成时间轴和数值展示，最后提供一个极简的集成实例，通过实例运行掌握实际开发，通过Echarts的地图组件来完成数据的地理可视化
【Echarts】数据可视化完成大屏地图（拓展乡镇地区）的绘制
毛毛的博客
05-31 1829
绘制地图要素 地图边缘 地理位置（中心点或者自定义的未知） echarts绘制 * 实现在前 * 成品展示放在最后 * 代码太长，参考代码可见Github Github地址 获取地图 获取精确到乡镇街道的地图JSON数据   高德地图api获取JSON 上面拿到的数据最多只能到县（无法到达乡镇），为了能拓展到乡镇地区，我们用如下方法：  （1）进入bigmap下载页面  （2）下载安装之后打开，可以在右上角进行区域的选择，可以发现，它是精确到镇级的, 这里 不要点击左边的下载按钮
手把手教你制作一目了然的可视化地图
明月说数据
05-26 3754
可视化是一种常见的数据可视化方法。利用数据可视化的方法，分析对与地理位置有关的信息，并将其显示成真实的地图，使其更加清晰，便于人们对其进行分析，从而帮助做出正确的判断。
echarts地图数据可视化-支持手机
03-19
在“echarts地图数据可视化-支持手机”这个项目中，我们关注的焦点是如何在移动设备上实现高效、美观的地图数据展示。 首先，ECharts地图数据可视化功能允许开发者将地理信息与数据相结合，以直观地呈现各种统计...
大屏演示 echarts 地图 数据 可视化.zip
04-20
ECharts 是一款由百度开发的、基于 JavaScript 的开源数据可视化库，它提供了丰富的图表类型和高度的可定制性，以帮助开发者轻松创建交互性强、美观且响应迅速的数据可视化界面。ECharts 支持在各种现代浏览器（包括...
基于ECharts地图数据可视化可视化大屏源码.rar
08-15
【标题】"基于ECharts地图数据可视化可视化大屏源码.rar"所涉及的知识点主要集中在数据可视化、ECharts库的应用以及大屏展示的设计与实现上。ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它支持丰富...
echarts数据可视化作业
01-14
ECharts 是一个由百度开发的开源JavaScript库，专门用于创建交互式的、基于浏览器的数据可视化图表。它支持丰富的图形类型，包括柱状图、折线图、饼图、散点图、热力图等，能够帮助用户以直观、生动的方式展示复杂...
60套数据可视化大屏（含源码）.zip
07-12
通过图表、仪表盘和地图等形式，数据可视化能够增强数据的故事性，提高报告的吸引力和影响力。 2. 源码解析：源码是实现这些可视化大屏的关键。通常，这些源码可能是用JavaScript库如D3.js、Echarts、Highcharts、...
echarts+bmap结合可以在百度地图上展现 点图，线图，热力图 等可视化。
03-23
使用以百度地图为底图的形式,结合echarts，在地图上显示echarts的scatter、effectScatter、custom元素
python地图可视化应用场景,python 地理数据可视化
aq8821的博客
12-31 952
大家好，本文将围绕python地图可视化分析情绪占比展开说明，python地图可视化各种店铺分布是一个很多人都想弄明白的事情，想搞清楚python画地图数据可视化分析需要先了解以下几个事情。本文梳理多个，有的擅长交互、有的擅长学术研究、有的擅长商用地图展示。
python地图可视化应用场景,python地图可视化缩放
Bxwfjdjdbdgj的博客
03-31 440
大家好，给大家分享一下python地图可视化分析情绪占比，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！
Python之数据可视化（地图）_python地图可视化
python03012的博客
02-27 1793
我们学习Python必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有阿里大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。带你从零基础系统性的学好Python！
自定义百度地图控件位置
wtd183833501176的博客
05-30 492
在写百度地图的时候,遇到了一个小问题,我是把百度地图作为背景,页面上还有其他数据,需要添加一个控件,这就涉及到了自定义控件位置的问题了,官方文档上只给了上左(BMAP_ANCHOR_TOP_LEFT),上右(BMAP_ANCHOR_TOP_RIGHT),下左(BMAP_ANCHOR_BOTTOM_LEFT),下右(BMAP_ANCHOR_BOTTOM_RIGHT),但是我觉得过于死板了,这时候官方就有一个控制偏移量的好方法了。我这个例子是添加缩放控件,你们需要的话直接换成其它控件就可以了。
百度地图可视化开发
supervillain2的博客
06-10 2056
百度地图人员标点以及轨迹可视化开发 缺点，就是百度提供的api每次只能转换10个，转换起来麻烦，所以自己就写了一个转换的api 这是我自己写的GPS转换百度坐标，不受限制一次性全部转换。 这里选用的是IconLayer组件，用的是ui提供的自定义图标 代码如下（示例）： 这样坐标标点就完成了，记住一定要创建图层......
百度地图 geohash 可视化工具
nicholas1328的博客
12-03 2818
最近在百度地图上做基于位置的推荐服务，需要用到 geohash 和相关的可视化工具。由于不同地图厂商采用的坐标系不同，同一个位置在不同地图上的坐标会出现差异，算出来的 geohash 也会不同。我在网上并没有找到可直接用于百度地图的 geohash 可视化工具，所以就自己造了一个小玩具。
闲来无事，实现一下百度地图~
m0_58856160的博客
04-01 869
一，申请成为百度开发者，获得使用地图API接口的权限，获取（AK）码。 打开网址：http://lbsyun.baidu.com/ 然后进行申请账号 和 申请成为百度开发者 的操作 这过程中需要邮箱进行验证 创建账号完成之后 获取到AK码 准备工作已经完成 在使用中只需要将（AK）码 （即密钥）写入代码中即可 二、实现首图效果（可以参考开发者指南） 编写HTML页面的基础代码 1，在这一步我们完成头部文件和地图容器样式的编写，让地图容器充满网页。 <!DOCTYPE html>
echarts百度地图可视化
05-24
ECharts 是百度开源的一个数据可视化库，它支持包括百度地图在内的多种图表类型。 要在百度地图上进行可视化，可以使用 ECharts 中的 `map` 类型，并将 `geo.map` 属性设置为 `'china'` 或 `'world'`，以显示中国或...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值