修改地图的点聚合

pages/maps/index.vue

@@ -1,6 +1,5 @@
 <template>
 	<view class="container">
-		<!-- <image src="../../static/zddt.jpg" mode="" class="bgimg"  @click="todetail()"></image> -->
 		<map id="map" style="width: 100%; height:2000rpx;" scale="13" :markers="markers" longitude="110.628279"
 			latitude="35.546105" show-location @markertap="markertap" @callouttap="callouttap">
 			<cover-view slot="callout">
@@ -41,11 +40,6 @@
 				<view class="crildon" :style="!isssscd?'background:#00ff37':'background: #ccc;'"></view>
 			</view>
 		</view>
-		<!--		 <view class="switchs" :defaultSwitch="isscd">-->
-		<!--			  <selectSwitch @change="switch1Change" :defaultSwitch="isscd" checked_bj_color="#13ce66"/>-->
-		<!--		 	 <switch style="margin-right: 10rpx;" :checked="isscd" @change="switch1Change" />-->
-		<!--			&lt;!&ndash; 显示/隐藏杀虫灯	 &ndash;&gt;-->
-		<!--		 </view>-->
 	</view>
 </template>
 
@@ -72,12 +66,14 @@
 				stationInfo: [],
 				pestlightMarker: null,
 				stationlist: [],
-				timerSet: null
+				timerSet: null,
+				// 点聚合相关
+				mapContext: null,
+				clusterMarkerIds: [], // 参与聚合的marker id列表
+				isClusterInited: false // 是否已初始化聚合
 			};
 		},
 		onLoad() {
-			// this.isscd = true
-			// this.getList()
 			this.$nextTick(() => {
 				this.getList()
 			})
@@ -96,14 +92,10 @@
 							console.log(res, 165)
 							if (res.data.code == 0) {
 								let userInfo = res.data.data;
-								// uni.setStorageSync('third_session', userInfo.thirdSession);
 								if (!userInfo.id) {
 									uni.reLaunch({
 										url: '/packDetail/pages/login/login'
 									})
-								} else {
-									// that.isscd = true
-									//
 								}
 							}
 						})
@@ -114,13 +106,137 @@
 					url: '/pages/loginindex'
 				})
 			}
-
 		},
 		onReady() {
-			// 1.页面准备好后，获取到map组件的执行上下文。注意：这里是取的map的id属性
+			// 获取地图上下文
-			this.mapContext = uni.createMapContext("alarm_map", this);
+			this.mapContext = uni.createMapContext("map", this);
+			// 初始化点聚合
+			this.initCluster()
 		},
 		methods: {
+			// ===== 新增：初始化点聚合 =====
+			initCluster() {
+				if (!this.mapContext) {
+					setTimeout(() => {
+						this.initCluster()
+					}, 500)
+					return
+				}
+				// 1. 初始化聚合配置
+				this.mapContext.initMarkerCluster({
+					enableDefaultStyle: false, // 使用默认样式
+					zoomOnClick: true, // 点击聚合点时是否放大地图
+					gridSize: 60, // 聚合网格大小
+					complete: (res) => {
+						console.log('initMarkerCluster success', res)
+						this.isClusterInited = true
+						// 聚合初始化完成后，添加杀虫灯标记
+						this.addPestMarkersToCluster()
+					}
+				})
+				
+				// 2. 监听聚合簇创建事件，自定义聚合簇样式
+				this.mapContext.on('markerClusterCreate', (res) => {
+					console.log('markerClusterCreate', res)
+					const clusters = res.clusters
+					const clusterMarkers = clusters.map((cluster) => {
+						// 获取该聚合簇中第一个marker的坐标作为中心点
+						const centerLat = cluster.center.latitude
+						const centerLng = cluster.center.longitude
+						const count = cluster.markerIds.length
+						
+						return {
+							id: cluster.clusterId,
+							latitude: centerLat,
+							longitude: centerLng,
+							width: 40,
+							height: 40,
+							iconPath: '/static/zhandian_sahchong_dingwei.png',
+							label: {
+								content: count + '',
+								color: '#ffffff',
+								fontSize: 12,
+								fontWeight: 'bold',
+								anchorX: 0,
+								anchorY: -8,
+								borderWidth: 0,
+								bgColor: 'rgba(0,0,0,0.6)',
+								borderRadius: 10,
+								padding: 2
+							}
+						}
+					})
+					// 更新聚合簇样式
+					this.mapContext.addMarkers({
+						markers: clusterMarkers,
+						clear: false,
+						complete: (res) => {
+							console.log('add cluster markers success', res)
+						}
+					})
+				})
+			},
+			
+			// ===== 新增：添加杀虫灯到聚合 =====
+			addPestMarkersToCluster() {
+				if (!this.isClusterInited) return
+				
+				// 先移除之前的聚合标记
+				if (this.clusterMarkerIds.length > 0) {
+					this.mapContext.removeMarkers({
+						markerIds: this.clusterMarkerIds,
+						complete: (res) => {
+							console.log('remove old cluster markers', res)
+						}
+					})
+					this.clusterMarkerIds = []
+				}
+				
+				// 如果杀虫灯开关是关闭状态，不添加
+				if (!this.isscd || this.pestlight.length === 0) return
+				
+				// 准备聚合标记数据
+				const pestMarkers = []
+				this.pestlight.forEach((item, index) => {
+					const markerId = 10000 + index
+					pestMarkers.push({
+						id: markerId,
+						latitude: Number(item.latitude),
+						longitude: Number(item.longitude),
+						width: 15,
+						height: 20,
+						iconPath: '/static/zhandian_sahchong_dingwei.png',
+						joinCluster: true, // 参与聚合
+						inType: 'pestlight',
+						stationName: item.stationName,
+						stationCode: item.stationCode
+					})
+					this.clusterMarkerIds.push(markerId)
+				})
+				
+				// 通过 addMarkers 添加参与聚合的标记
+				this.mapContext.addMarkers({
+					markers: pestMarkers,
+					clear: false,
+					complete: (res) => {
+						console.log('add pest markers to cluster success', res)
+					}
+				})
+			},
+			
+			// ===== 修改：移除杀虫灯从聚合 =====
+			removePestMarkersFromCluster() {
+				if (this.clusterMarkerIds.length > 0 && this.mapContext) {
+					this.mapContext.removeMarkers({
+						markerIds: this.clusterMarkerIds,
+						complete: (res) => {
+							console.log('remove pest markers from cluster', res)
+						}
+					})
+					this.clusterMarkerIds = []
+				}
+			},
+			
 			getList() {
 				this.markers = []
 				this.markersNoPest = []
@@ -156,142 +272,28 @@
 					this.qiyeChange()
 					this.list1query()
 					this.list2query()
+					
+					// 如果聚合已初始化，直接添加杀虫灯；否则等待初始化完成
+					if (this.isClusterInited) {
+						this.addPestMarkersToCluster()
+					}
 					uni.hideLoading();
 				})
 			},
-			// 处理 stationlist 数据方法
+			
-			processStationList(stationlist) {
+			// ===== 修改：杀虫灯开关控制 =====
-				if (stationlist) {
-					stationlist.forEach(item => {
-						this.list.push({
-							latitude: item.inType === 'pestlight' ? Number(item.latitude) : Number(item
-								.stationLatitude),
-							longitude: item.inType === 'pestlight' ? Number(item.longitude) : Number(item
-								.stationLongitude),
-							stationType: item.inType === 'pestlight' ? 'pestlight' : item.stationType,
-							sortNo: item.sortNo,
-							stationName: item.stationName,
-							stationCode: item.stationCode
-						})
-					})
-				}
-			},
-			// 生成 pointers 数据方法
-			generatePointers() {
-				const iconConfig = {
-					// pestlight: {
-					//   iconPath: '/static/zhandian_sahchong_dingwei.png',
-					//   width: 15,
-					//   height: 20
-					// },
-					orient: {
-						iconPath: '/static/zhandian_nongtian_dingwei.png',
-						width: 35,
-						height: 52
-					},
-					livestock: {
-						iconPath: '/static/zhandian_xuqin_dingwei.png',
-						width: 35,
-						height: 52
-					},
-					cusLocaltion: {
-						iconPath: '/static/qiyeIcon.png',
-						width: 35,
-						height: 52
-					}
-				}
-				this.list.forEach((item, i) => {
-					const config = iconConfig[item.stationType] || {}
-					item.iconPath = config.iconPath || ''
-					item.width = config.width || 0
-					item.height = config.height || 0
-					this.pointers.push({
-						id: i,
-						iconPath: item.iconPath,
-						latitude: Number(item.latitude),
-						longitude: Number(item.longitude),
-						width: item.width,
-						height: item.height,
-						customCallout: {
-							anchorY: 0, // Y轴偏移量
-							anchorX: 0, // X轴偏移量
-							display: 'ALWAYS' // 一直展示
-						},
-						stationType: item.stationType,
-						stationName: item.stationName,
-						stationCode: item.stationCode,
-						joinCluster: true // 是否参与点聚合
-					})
-				})
-			},
-			markertap(e) {
-				const index = e.detail.markerId
-        console.log(e.detail,'index')
-				if (['orient', 'livestock'].includes(this.list[index].stationType)) {
-					uni.navigateTo({
-						url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(this.list[index]))}`
-					})
-				}
-			},
-			callouttap(e) {
-				const index = e.detail.markerId
-				if (['orient', 'livestock'].includes(this.list[index].stationType)) {
-					uni.navigateTo({
-						url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(this.list[index]))}`
-					})
-				}
-			},
-			todetails(item) {
-				console.log(item, '还是个然后')
-			},
 			switch1Change() {
 				this.isscd = !this.isscd;
-				let index = 0;
+				if (this.isscd) {
-				if (!this.isscd) {
+					// 打开 - 添加杀虫灯到聚合
-					this.pestlightMarker = [];
+					this.addPestMarkersToCluster()
-					this.timerSet = setInterval(() => {
-						for (let i = 0; i < 50 && index < this.pestlight.length; i++) {
-							const item = this.pestlight[index];
-							item.iconPath = '/static/zhandian_sahchong_dingwei.png';
-							item.latitude = Number(item.latitude);
-							item.longitude = Number(item.longitude);
-							item.width = 15;
-							item.height = 20;
-							// 创建符合 markers 格式的对象
-							const markerItem = {
-                id: item.id,
-								iconPath: item.iconPath,
-								latitude: item.latitude,
-								longitude: item.longitude,
-								width: item.width,
-								height: item.height,
-								customCallout: {
-									anchorY: 0, // Y轴偏移量
-									anchorX: 0, // X轴偏移量
-									display: 'ALWAYS' // 一直展示
-								},
-								// stationType: item.stationType,
-								inType: item.inType,
-								stationName: item.stationName,
-								stationCode: item.stationCode,
-								joinCluster: false // 是否参与点聚合
-							};
-              this.markers.push(markerItem);
-							index++;
-						}
-						// this.markers = this.markers.concat(aa);
-						if (index >= this.pestlight.length) {
-							clearInterval(this.timerSet);
-						}
-					}, 1000);
-
 				} else {
-					clearInterval(this.timerSet);
+					// 关闭 - 从聚合中移除杀虫灯
-					this.markers = this.markers.filter((item)=>{
+					this.removePestMarkersFromCluster()
-						return item.inType !== 'pestlight'
-					})
 				}
 			},
+			
+			// ===== 以下方法完全保持原样 =====
 			qiyeChange() {
 				for (let i = 0; i < this.cusLocation.length; i++) {
 					const item = this.cusLocation[i];
@@ -308,7 +310,6 @@
 						stationName: item.stationName,
 						stationCode: item.stationCode
 					})
-          // 创建符合 markers 格式的对象
 					const markerItem = {
 						id: item.id,
 						iconPath: item.iconPath,
@@ -317,14 +318,14 @@
 						width: item.width,
 						height: item.height,
 						customCallout: {
-              anchorY: 0, // Y轴偏移量
+							anchorY: 0,
-              anchorX: 0, // X轴偏移量
+							anchorX: 0,
-              display: 'ALWAYS' // 一直展示
+							display: 'ALWAYS'
 						},
 						stationType: item.stationType,
 						stationName: item.stationName,
 						stationCode: item.stationCode,
-            joinCluster: true // 是否参与点聚合
+						joinCluster: true
 					};
 					this.markers.push(markerItem);
 				}
@@ -347,7 +348,6 @@
 							item.longitude = Number(item.stationLongitude);
 							item.width = 35;
 							item.height = 52;
-              // 创建符合 markers 格式的对象
 							const markerItem = {
 								id: item.id,
 								iconPath: item.iconPath,
@@ -356,14 +356,14 @@
 								width: item.width,
 								height: item.height,
 								customCallout: {
-                  anchorY: 0, // Y轴偏移量
+									anchorY: 0,
-                  anchorX: 0, // X轴偏移量
+									anchorX: 0,
-                  display: 'ALWAYS' // 一直展示
+									display: 'ALWAYS'
 								},
 								stationType: item.stationType,
 								stationName: item.stationName,
 								stationCode: item.stationCode,
-                joinCluster: true // 是否参与点聚合
+								joinCluster: true
 							};
 							this.markers.push(markerItem);
 						}
@@ -384,7 +384,6 @@
 							item.longitude = Number(item.stationLongitude);
 							item.width = 35;
 							item.height = 52;
-              // 创建符合 markers 格式的对象
 							const markerItem = {
 								id: item.id,
 								iconPath: item.iconPath,
@@ -393,14 +392,14 @@
 								width: item.width,
 								height: item.height,
 								customCallout: {
-                  anchorY: 0, // Y轴偏移量
+									anchorY: 0,
-                  anchorX: 0, // X轴偏移量
+									anchorX: 0,
-                  display: 'ALWAYS' // 一直展示
+									display: 'ALWAYS'
 								},
 								stationType: item.stationType,
 								stationName: item.stationName,
 								stationCode: item.stationCode,
-                joinCluster: true // 是否参与点聚合
+								joinCluster: true
 							};
 							this.markers.push(markerItem);
 						}
@@ -410,6 +409,31 @@
 						return item.stationType !== 'livestock'
 					})
 				}
+			},
+			markertap(e) {
+				const index = e.detail.markerId
+				console.log(e.detail,'index')
+				// 判断是否点击的是聚合点
+				if (e.detail && e.detail.isCluster) {
+					console.log('点击了聚合点:', e.detail)
+					return
+				}
+				if (['orient', 'livestock'].includes(this.list[index]?.stationType)) {
+					uni.navigateTo({
+						url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(this.list[index]))}`
+					})
+				}
+			},
+			callouttap(e) {
+				const index = e.detail.markerId
+				if (['orient', 'livestock'].includes(this.list[index]?.stationType)) {
+					uni.navigateTo({
+						url: `/packDetail/pages/Site/detail?item=${encodeURIComponent(JSON.stringify(this.list[index]))}`
+					})
+				}
+			},
+			todetails(item) {
+				console.log(item, '还是个然后')
 			}
 		}
 	}
@@ -418,7 +442,6 @@
 <style lang="scss">
 	.bgimg {
 		position: fixed;
-		// z-index: -99;
 		top: 0;
 		left: 0;
 		width: 100%;
@@ -432,7 +455,6 @@
 		font-size: 24rpx;
 		text-shadow: 1rpx 2rpx 0rpx #0D1934;
 		font-weight: bold;
-		// background-image: url('@/static/zhandian_icon_nongtian_title.png');
 		background-repeat: no-repeat;
 		background-size: 100%;
 		display: flex;
@@ -447,7 +469,6 @@
 		font-size: 24rpx;
 		text-shadow: 1rpx 2rpx 0rpx #0D1934;
 		font-weight: bold;
-		// background-image: url('@/static/zhandian_icon_xuqin_title.png');
 		background-repeat: no-repeat;
 		background-size: 100%;
 		display: flex;