百度地图结合mapvgl实现散点图（大小颜色变化）

最新推荐文章于 2024-05-10 15:07:20 发布

lxy123456780

最新推荐文章于 2024-05-10 15:07:20 发布

阅读量4.3k

点赞数 5

分类专栏：百度地图 mapv 文章标签：前端百度地图散点图

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

版权

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

2 篇文章 0 订阅

订阅专栏

mapv

2 篇文章 0 订阅

订阅专栏

效果图
在这里插入图片描述

点的颜色大小都是可调的

在项目中引入百度地图 ,百度地图封装的common.js，mapv，mapvgl.min.js，

<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.27/dist/mapvgl.min.js"></script>

2.定义map的dom元素

<div id="map_container"></div>

3.初始化百度地图可以使用common.js封装的方法，会更加方便快捷。
不过地图容器限制了id必须为 map_container

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

4.准备数据源利用城市中心点经纬度，来模拟数据，实际生产中可以通过接口返回数据

// 根据城市名来随机获取 多个数据点
var data = [];
var random = 700;
var cities = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
while(random--){
  		var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
  		data.push({
   		geometry: {
   			type: 'Point',
   			coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
   		},
   		properties: { //点的数据
   			sales: Math.random() * 100
   		}
   	});
}
//控制只展示大于50的数据
data = data.filter( _ =>_.properties.sales > 50);

5.绘制数据源

//1.生成 mapvgl 视图 View
var view = new mapvgl.View({map});
//2.初始化Intensity对象 工具类，使得点随数据的大小，有差异，更直观的反应变化
var intensity = new mapvgl.Intensity({
  		min: 0,
  		max: 100,
  		minSize: 5,
  		maxSize: 30,
  		gradient: {
  			0: 'rgba(25,66,102,0.8)',
  			0.3: 'rgba(145,102,129,0.8)',
  			0.7: 'rgba(210,131,137,0.8)',
  			1:'rgba(248,177,149,0.8)'
  		}
  	});

//3.初始化 mapvgl 的 PointLayer对象
var pointLayer = new mapvgl.PointLayer({
  		size: function(data){
  			console.log(intensity.getSize(data.properties.sales));
  			return intensity.getSize(data.properties.sales)
  		},
  		color: function(data){
  			return intensity.getColor(data.properties.sales);
  		}
 });
//3.将 PointLayer 对象加入 View 中
view.addLayer(pointLayer);
//4.将data 与 PointLayer 进行绑定 
pointLayer.setData(data);

6.html源码如下

<!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.27/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: 10,
		    		style: snowStyle
		    	})
		    	return map;
	    	}
	    	

    		// 准备数据源	
	    	function initData(){
		    	var data = [];
		    	var random = 700;
		    	var cities = ["北京","天津","上海","重庆","石家庄","太原","呼和浩特","哈尔滨","长春","沈阳","济南","南京","合肥","杭州","南昌","福州","郑州","武汉","长沙","广州","南宁","西安","银川","兰州","西宁","乌鲁木齐","成都","贵阳","昆明","拉萨","海口"];
		    	while(random--){
		    		var cityCenter = mapv.utilCityCenter.getCenterByCityName(cities[parseInt(Math.random() * cities.length)]);
		    		data.push({
			    		geometry: {
			    			type: 'Point',
			    			coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4]
			    		},
			    		properties: {
			    			sales: Math.random() * 100
			    		}
			    	});
		    	}

		    	//控制只展示大于50的数据
		    	data = data.filter( _ =>_.properties.sales > 50);
		    	return data;
	    	}

	    	function setData(data, map){
	    		//绘制数据源
		    	//1.生成 mapvgl 视图 View
		    	var view = new mapvgl.View({map});

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

		    	//3.初始化 mapvgl 的 PointLayer对象
		    	var pointLayer = new mapvgl.PointLayer({
		    		size: function(data){
		    			console.log(intensity.getSize(data.properties.sales));
		    			return intensity.getSize(data.properties.sales)
		    		},
		    		color: function(data){
		    			return intensity.getColor(data.properties.sales);
		    		}
		    	});
		    	//3.将 PointLayer 对象加入 View 中
		    	view.addLayer(pointLayer);
		    	//4.将data 与 PointLayer 进行绑定 
		    	pointLayer.setData(data);
	    	}
	    	

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

lxy123456780

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
6
评论
百度地图结合mapvgl实现散点图（大小颜色变化）

效果图点的颜色大小都是可调的在项目中引入百度地图 ,百度地图封装的common.js，mapv，mapvgl.min.js，<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
复制链接

扫一扫