百度地图 - 自定义划分区域并获取区域内的坐标点

àì夳堔傛蜴生んèń 2022-12-26 09:19 242阅读 0赞

**最近在做一个大数据人员分布的系统，需要能够在地图上自定义划分区域，并能够获取该区域内的坐标点信息，也是搞了很久才做出来，特此记录一下**

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

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

http://lbsyun.baidu.com/

### 2、自定义区域 ###

![图片][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]  
代码如下：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>获取自定义区域内的坐标点 - 百度地图</title>
    		
    		<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css">
    		<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;
    			}
    			
    			.BMapLib_Drawing { 
    				position: absolute!important;
    				right: 150px!important;
    				display: none;
    			}
    			/* 隐藏工具栏 */
    			.BMapLib_marker { 
    				display: none;
    			}
    		</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>
    					<button type="button" class="layui-btn" data-model="3">画区域</button>
    					<button type="button" class="layui-btn" data-model="4">清除域</button>
    					<button type="button" class="layui-btn" data-model="5">计算点</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" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    
    		<script type="text/javascript">
    
    			// 工具栏模式：0-查看点1-标新点2-删除点3-画区域4-清除域5-计算点
    			var model = 0;
    
    			// 地图上所有的点
    			var points = [];
    			// 区域内的点
    			var areaPoint = [];
    
    			// 切换模式
    			$('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);
    				}
    			}
    
    			// 区域坐标点范围
    			var overlays = [];
    			// 区域划分后触发事件
    			var overlaycomplete = function(e) { 
    				var position = [];
    				overlays.push(e.overlay);
    				// 获取多边形端点坐标
    				for(var i = 0; i < e.overlay.getPath().length; i++) { 
    					let coordinate = new Object();
    					coordinate.lng = e.overlay.getPath()[i].lng;
    					coordinate.lat = e.overlay.getPath()[i].lat;
    					position.push(coordinate);
    				}
    				// 清空上一区域内的点
    				areaPoint.length = 0;
    				// 重新添加区域内的点
    				points.forEach(v => { 
    					// 计算点是否在区域内
    					if(isInsidePolygon(v, position)) { 
    						areaPoint.push(v)
    					}
    				})
    				// 关闭绘制模式
    				drawingManager.close();
    			};
    
    			// 绘制样式
    			var styleOptions = { 
    				strokeColor: "red", //边线颜色。
    				fillColor: "red", //填充颜色。当参数为空时，圆形将没有填充效果。
    				strokeWeight: 3, //边线的宽度，以像素为单位。
    				strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
    				fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
    				strokeStyle: 'solid' //边线的样式，solid或dashed。
    			};
    			
    			// 实例化鼠标绘制工具
    			var drawingManager = new BMapLib.DrawingManager(mp, { 
    				// 是否开启绘制模式
    				isOpen: false,
    				// 是否显示工具栏
    				enableDrawingTool: true,
    				drawingToolOptions: { 
    					// 位置
    					anchor: BMAP_ANCHOR_TOP_RIGHT,
    					// 偏离值
    					offset: new BMap.Size(5, 5),
    					// 画覆盖物工具栏上显示的可选项
    					drawingModes: [
    						BMAP_DRAWING_MARKER,
    						BMAP_DRAWING_CIRCLE,
    						BMAP_DRAWING_POLYLINE,
    						BMAP_DRAWING_POLYGON,
    						BMAP_DRAWING_RECTANGLE
    					]
    				},
    				// 圆的样式
    				circleOptions: styleOptions,
    				// 线的样式
    				polylineOptions: styleOptions,
    				// 多边形的样式
    				polygonOptions: styleOptions,
    				// 矩形的样式
    				rectangleOptions: styleOptions
    			});
    			
    			// 添加鼠标绘制工具监听事件，用于获取绘制结果
    			drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    
    			/// 清除区域
    			function clearAll() { 
    				for(var i = 0; i < overlays.length; i++) { 
    					mp.removeOverlay(overlays[i]);
    				}
    				// 区域坐标置空
    				overlays.length = 0
    			}
    
    			// 计算点是否在坐标内
    			function isInsidePolygon(point, pts) { 
    				const N = pts.length
    				let intersectCount = 0
    				let precision = 2e-10
    				// 邻界顶点
    				let p1, p2
    				let p = point
    				// 左顶点
    				p1 = pts[0]
    				// 检查所有射线
    				for(let i = 1; i <= N; ++i) { 
    					// p是一个边上的点
    					if(p.lat === p1.lat && p.lng === p1.lng){ 
    						return true
    					}
    					// 右顶点
    					p2 = pts[i % N]
    					// 射线与我们无关
    					if(p.lat < Math.min(p1.lat, p2.lat) || p.lat > Math.max(p1.lat, p2.lat)) { 
    						p1 = p2;
    						// 下一个射线左点
    						continue;
    					}
    					if(p.lat > Math.min(p1.lat, p2.lat) && p.lat < Math.max(p1.lat, p2.lat)) { 
    						if(p.lng <= Math.max(p1.lng, p2.lng)) { 
    							if(p1.lat === p2.lat && p.lng >= Math.min(p1.lng, p2.lng))
    								return true
    
    							if(p1.lng === p2.lng) { 
    								if(p1.lng === p.lng) { 
    									return true
    								} else { 
    									++intersectCount
    								}
    							} else { 
    								let xInters = (p.lat - p1.lat) * (p2.lng - p1.lng) / (p2.lat - p1.lat) + p1.lng;
    								if(Math.abs(p.lng - xInters) < precision)
    									return true
    
    								if(p.lng < xInters)
    									++intersectCount
    							}
    						}
    					} else { 
    						if(p.lat === p2.lat && p.lng <= p2.lng) { 
    							// 下一个顶点
    							let p3 = pts[(i + 1) % N];
    							if(p.lat >= Math.min(p1.lat, p3.lat) && p.lat <= Math.max(p1.lat, p3.lat))
    								++intersectCount
    							else
    								intersectCount += 2
    						}
    					}
    					// 下一个射线左点
    					p1 = p2
    				}
    				// 偶数在多边形外, 奇数在多边形内
    				return 0 !== intersectCount % 2
    			}
    		</script>
    	</body>
    
    </html>

### 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/437821a42ea44277a5558632917f1047.png