地图聚合简单实现，基于实际范围，测试需要填写高德key

最新推荐文章于 2023-08-18 21:47:30 发布

INK_FUNC

最新推荐文章于 2023-08-18 21:47:30 发布

阅读量407

点赞数 2

分类专栏： WEB

本文链接：https://blog.csdn.net/INK_FUNC/article/details/103929251

版权

本文介绍如何利用高德地图API进行地理位置数据的聚合展示，重点在于根据实际覆盖范围进行有效聚合，同时提醒读者在测试过程中需要获取并填入有效的高德API key。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<title></title>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key={高德key}"></script>
		<style type="text/css">
			#container {
   
				width: 100%;
				height: 100vh;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
	</body>
	<script>
		Utils = {
   
			// 计算距离，km
			getDistance(lat1, lng1, lat2, lng2) {
   
				var radLat1 = lat1 * Math.PI / 180.0;
				var radLat2 = lat2 * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				return s;
			},
			//计算聚集质心坐标
			centroid(clusters) {
   
				if (clusters && clusters.length > 0) {
   
					var x = 0;
					var y = 0;
					var newBoats = clusters.filter(item => parseFloat(item.lat).toString() != "NaN" && parseFloat(item.long).toString() !=
						"NaN");
					for (var i = 0; i < newBoats.length; i++) {
   
						x += newBoats[i].long;
						y += newBoats[i].lat;
					}
					if (newBoats.length > 0) {
   
						return {
   
							'long': x / newBoats.length,
							'lat': y / newBoats.length
						};
					}

				}
			},
			//缩放比例尺，缩放-距离，圆半径
			getEatRadius(scale) {
   
				var number = parseInt(scale);
				switch (number) {
   
					case 3:
						return 1000;
					case 4:
						return 500;
					case 5:
						return 200;
					case 6:
						return 100;
					case 7:
						return 50;
					case 8:
						return 30;
					case 9:
						return 20;
					case 10:
						return 10;
					case 11:
						return 5;
					case 12:
						return 2;
					case 13:
						return 1;
					case 14:
						return 0.5;
					case 15:
						return 0.2;
					case