mapvgl实现百度地图边绑定线集合

最新推荐文章于 2024-03-13 17:50:11 发布

lxy123456780

最新推荐文章于 2024-03-13 17:50:11 发布

阅读量1.4k

点赞数

分类专栏：百度地图 mapv 数据可视化文章标签：数据可视化 mapv 百度地图线聚合

本文链接：https://blog.csdn.net/lxy123456780/article/details/109095144

版权

百度地图同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

mapv

2 篇文章 0 订阅

订阅专栏

数据可视化

1 篇文章 0 订阅

订阅专栏

效果图
线上的点呈现汇聚的效果

1.引入mapv及相关的插件

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥"></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.79/dist/mapvgl.min.js"></script>
<!-- 如果使用到Three.js相关的图层需要引用 -->
<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.53/dist/mapvgl.threelayers.min.js"></script>

2.初始化百度地图 common.js快速定义百度地图map对象

var cityCenter = mapv.utilCityCenter.getCenterByCityName('北京');
var map = initMap({
  		tilt: 0,
  		center: [cityCenter.lng, cityCenter.lat],
  		zoom: 5,
  		style: purpleStyle
})

3.准备数据源点数据nodeData 边数据edgeData

var data = [];
var cities = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
var randomCount = 500;
var targetCity = mapv.utilCityCenter.getCenterByCityName('北京');
var nodeData = [{
	x: targetCity.lng,
	y: targetCity.lat,
}];
var edgeData = [{
	source: 0, 
	target: 0
}];

for(var i=0; i<randomCount; i++){
	var startCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(cities.length * Math.random())]);
	
	nodeData.push({
		x: startCity.lng-5+10*Math.random(),
		y: startCity.lat-5+10*Math.random()
	})
	edgeData.push({ //500个点到终点的线
		source: i + 1,  //起点
		target: 0,//终点
	});
}

//边绑定 获取数据
var bundling = mapv.utilForceEdgeBundling().nodes(nodeData).edges(edgeData);
var results = bundling();
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]);
	}
	data.push({
		geometry: {
			type: 'LineString',
			coordinates
		}
	})
}

3.绘制数据源

var view = new mapvgl.View({map});
view.startAnimation();
//初始化LineLayer
var lineLayer = new mapvgl.LineLayer({
	color: 'rgba(55,50,250,0.3)',
	blend:'lighter'
});
view.addLayer(lineLayer);
lineLayer.setData(data);


var linePointLayer = new mapvgl.LinePointLayer({
	speed: 10, // 点运动的速度
	size: 3, // 点的大小
	// blend: 'lighter',// 点交汇时的处理方式  变淡
	color: 'rgba(255,255,255,0.6)', // 点的颜色
	animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 点的动画类型
	shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE,// 点的形状
});
view.addLayer(linePointLayer);
linePointLayer.setData(data);

4.源码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>百度地图</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<style type="">
			html, body, #map_container {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}
			#map_container {
				width: 100%;
				height: 100%;
			}
			.anchorBL, .Bmap_cpyCtrl {
				display: none;
			}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=mQnIhkcrCDE5ZVY0xIhpqi6w8BEINcx4"></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.79/dist/mapvgl.min.js"></script>
		<!-- 如果使用到Three.js相关的图层需要引用 -->
		<script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.53/dist/mapvgl.threelayers.min.js"></script>
		


	</head>
	<body>
	    <div id="map_container"></div>
	    <script>

	    	var map = initBMap();
	    	var data = initData();
	    	setData(data, map);

	    	//初始化百度地图 common.js快速定义百度地图map对象
	    	function initBMap(){
	    		var cityCenter = mapv.utilCityCenter.getCenterByCityName('北京');
	    		var map = initMap({
		    		tilt: 0,
		    		center: [cityCenter.lng, cityCenter.lat],
		    		zoom: 5,
		    		style: purpleStyle
		    	})
		    	return map;
	    	}
	    	

    		// 准备数据源	
	    	function initData(){
		    	var data = [];
		    	var cities = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
		    	var randomCount = 500;
		    	var targetCity = mapv.utilCityCenter.getCenterByCityName('北京');
		    	var nodeData = [{
		    		x: targetCity.lng,
		    		y: targetCity.lat,
		    	}];
		    	var edgeData = [{
		    		source: 0, 
		    		target: 0
		    	}];

		    	for(var i=0; i<randomCount; i++){
		    		var startCity = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(cities.length * Math.random())]);
		    		
		    		nodeData.push({
		    			x: startCity.lng-5+10*Math.random(),
		    			y: startCity.lat-5+10*Math.random()
		    		})
		    		edgeData.push({
		    			source: i + 1,
		    			target: 0,
		    		});
		    	}

		    	//边绑定
		    	var bundling = mapv.utilForceEdgeBundling().nodes(nodeData).edges(edgeData);
		    	var results = bundling();
		    	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]);
		    		}
		    		data.push({
	    				geometry: {
	    					type: 'LineString',
	    					coordinates
	    				}
	    			})
		    	}

	    		return data;	
	    	}

	    	function setData(data, map){
	    		//绘制数据源
	    		//1.初始化图层
	    		var view = new mapvgl.View({map});
	    		view.startAnimation();
	    		//初始化LineLayer
	    		var lineLayer = new mapvgl.LineLayer({
	    			color: 'rgba(55,50,250,0.3)',
	    			blend:'lighter'
	    		});
	    		view.addLayer(lineLayer);
	    		lineLayer.setData(data);


	    		var linePointLayer = new mapvgl.LinePointLayer({
	    			speed: 10, // 点运动的速度
	    			size: 3, // 点的大小
	    			// blend: 'lighter',// 点交汇时的处理方式  变淡
	    			color: 'rgba(255,255,255,0.6)', // 点的颜色
	    			animationType: mapvgl.LinePointLayer.ANIMATION_TYPE_SMOOTH, // 点的动画类型
	    			shapeType: mapvgl.LinePointLayer.SHAPE_TYPE_CIRCLE,// 点的形状
	    		});
	    		view.addLayer(linePointLayer);
	    		linePointLayer.setData(data);

	    	}
	    	

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

lxy123456780

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
3
评论
mapvgl实现百度地图边绑定线集合

效果图1.引入mapv及相关的插件<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的秘钥"></script><script src="https://mapv.baidu.com/gl/examples/static/common.js"></script><script src="https://map
复制链接

扫一扫