百度地图 - 点聚合方式批量渲染坐标点

﹏ヽ暗。殇╰゛Y 2022-12-26 09:20 209阅读 0赞

**最近在做一个大数据人员分布的系统，需要能够在地图上渲染数据库中的坐标点，大概有四万个坐标点，普通的渲染方式会导致客户端崩溃的，或者是坐标点太过于密集，用户体验差。于是使用了百度地图的点聚合方式，特此记录一下**

### 1、百度地图API ###

首先我们需要去百度地图申请一个应用，得到密钥

http://lbsyun.baidu.com/

### 2、点聚合 ###

![点聚合][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]  
代码如下：

<head>
    	<meta charset="UTF-8">
    	<title>获取自定义区域内的坐标点 - 百度地图</title>
    	<style>
    		html,
    		body {
    			width: 100%;
    			height: 100vh;
    			padding: 0;
    			margin: 0;
    			overflow: hidden;
    		}
    		/* 隐藏百度地图logo */
    		.anchorBL {
    			display: none;
    		}
    		
    		.btn-contrail button {
    			margin-bottom: 30px;
    			margin-left: 0px!important;
    			background-color: #FFFFFF;
    			color: rgba(0, 0, 0, .5);
    			padding: 10px;
    		}
    		
    		.layui-btn:hover {
    			background-color: #1890ff!important;
    			color: #FFFFFF!important;
    		}
    		
    		.btn-click {
    			background-color: #1890ff!important;
    			color: #FFFFFF!important;
    		}
    	</style>
    </head>
    
    <body>
    	<div style="position: fixed;top: 0;right: 0;height: 100vh;background: rgba(0,0,0,0);width: 125px;z-index: 9999999;display: flex;justify-content: center;align-items: center;">
    		<div class="tools" style="width: 100%;height: 100%">
    			<div class="btn-contrail" style="height: 100%;background: rgba(0,0,0,.5);width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
    				<button type="button" class="layui-btn btn-click" data-model="0">查看点</button>
    				<button type="button" class="layui-btn" data-model="1">标新点</button>
    				<button type="button" class="layui-btn" data-model="2">删除点</button>
    			</div>
    		</div>
    	</div>
    	
    	<div id="container" style="height: 100vh;width: 100%"></div>
    	
    	<script type="text/javascript" src="js/jquery-3.2.0.min.js" ></script>
    	
    	<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
    	
    	<script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
    	
    	<script type="text/javascript" src="https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>
    
    	<script type="text/javascript">
    
    		// 工具栏模式：0-查看点1-标新点2-删除点
    		var model = 0;
    
    		// 地图上所有的点
    		var points = [];
    
    		// 切换模式
    		$('body').on('click', '.layui-btn', function() {
    			// 样式改变
    			$('.btn-contrail').find('.layui-btn').removeClass('btn-click');
    			$(this).addClass('btn-click');
    			// 事件监听
    			model = $(this).data('model');
    			if(3 == model) {
    				$('.BMapLib_Drawing').show();
    			} else {
    				$('.BMapLib_Drawing').hide();
    			}
    			// 清除域
    			if(4 == model) {
    				clearAll();
    			}
    			// 计算点
    			if(5 == model) {
    				alert('所选区域点数：' + areaPoint.length);
    			}
    		});
    
    		// 定义地图
    		var mp = new BMap.Map("container");
    		// 鼠标滚动缩放
    	    mp.enableScrollWheelZoom(true);
    	    // 地图中心点，并设置级别
    	    mp.centerAndZoom(new BMap.Point(106.908, 28.1744), 10);
    	    // 地图类型，卫星地图
    	    mp.setMapType(BMAP_HYBRID_MAP);
    	    // 地图缩放级别
    	    mp.setZoom(10)
    	    
    		// 请求数据，并渲染地图
    		init();
    		function init() {
    			// 获取数据
    			$.get("json/data.json", function(res) {
    				points = res.data;
    				renderMap();
    			});
    		}
    
    		// 渲染地图坐标点
    		function renderMap() {
    			var markers = [];
    			points.forEach(v => {
    				// 创建新的坐标点
    				const marker = new BMap.Marker(new BMap.Point(v['lng'], v['lat']), {
    					icon: ''
    				})
    				// 为每一个点添加点击事件
    				marker.addEventListener('click', function() {
    					showPoint(v, marker);
    				});
    				markers.push(marker)
    			})
    			// 添加点聚合
    			new BMapLib.MarkerClusterer(mp, {
    				markers: markers
    			});
    		}
    
    		// 监听地图点击事件
    		mp.addEventListener("click", function(e) {
    			var point = e.point;
    			// 标新点
    			if(1 == model) {
    				// 创建新的坐标点
    				const marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));
    				// 添加点击事件
    				marker.addEventListener('click', function() {
    					showPoint(point, marker);
    				});
    				// 添加坐标点到地图中
    				mp.addOverlay(marker);
    				// 将坐标点添加到我们的坐标带你集合中
    				points.push(point);
    			}
    		});
    
    		// 坐标点的点击事件监听
    		function showPoint(point, marker) {
    			// 查看点
    			if(0 == model) {
    				var lng = parseFloat(point.lng).toFixed(5);
    				var lat = parseFloat(point.lat).toFixed(5);
    				alert('经度：' + lng + '，纬度：' + lat);
    			}
    			// 删除点
    			if(2 == model) {
    				mp.removeOverlay(marker);
    			}
    		}
    	</script>
    </body>

### 3、JSON 数据格式 ###

{ 
    	"code": 200,
    	"msg": "操作成功",
    	"data": [{ 
    			"lng": "109.19151",
    			"lat": "27.73559"
    		},
    		{ 
    			"lng": "106.67668",
    			"lat": "26.559734"
    		}
    	]
    }

如您在阅读中发现不足，欢迎留言！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]: /images/20221120/7f0c76e0848e4a24bfb7d5e74b5ef0df.png