Explorar o código

fix: 首页地图

lxf hai 1 día
pai
achega
08aa150327
Modificáronse 3 ficheiros con 285 adicións e 137 borrados
  1. 285 137
      pages/tabBar/home/home.vue
  2. BIN=BIN
      static/home/garden.png
  3. BIN=BIN
      static/map/tree.png

+ 285 - 137
pages/tabBar/home/home.vue

@@ -19,122 +19,75 @@
 				      :polyline="[]"
 				      :include-points="includePoints"
 				      @regionchange="onRegionChange"
+					  @scale="onScaleChange"
 				      show-location
 				    ></map>
 			</view>
 		</view>
 		<view class="type-wrap">
-			<!-- <swiper class="swiper" circular :indicator-dots="true" :autoplay="false" :interval="5000"
-				:duration="duration">
-				<swiper-item>
-					<view class="swiper-item">
-						<view class="item-type">
-							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
-							<view class="type-text">
-								全部
-							</view>
-						</view>
-						<view class="item-type">
-							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-2.png" alt="" />
-							<view class="type-text">
-								龙眼
-							</view>
-						</view>
-						<view class="item-type">
-							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
-							<view class="type-text">
-								葡萄
-							</view>
-						</view>
-						<view class="item-type">
-							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
-							<view class="type-text">
-								水蜜桃
-							</view>
-						</view>
-						<view class="item-type">
-							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-2.png" alt="" />
-							<view class="type-text">
-								龙眼
-							</view>
-						</view>
-						<view class="item-type">
-							<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
-							<view class="type-text">
-								葡萄
-							</view>
-						</view>
-					</view>
-				</swiper-item>
-				<swiper-item>
-					<view class="swiper-item">
-						<van-button type="primary">按钮</van-button>
-					</view>
-				</swiper-item>
-			</swiper> -->
 			 <up-scroll-list indicatorColor="#fae6a4" indicatorActiveColor="#F3C11D" :indicatorWidth="30" :indicatorBarWidth="13">
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
 					<view class="type-text">
 						全部
 					</view>
 				</view>
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-2.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
 					<view class="type-text">
 						龙眼
 					</view>
 				</view>
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
 					<view class="type-text">
 						葡萄
 					</view>
 				</view>
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
 					<view class="type-text">
 						水蜜桃
 					</view>
 				</view>
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-2.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
 					<view class="type-text">
 						龙眼
 					</view>
 				</view>
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
 					<view class="type-text">
 						葡萄
 					</view>
 				</view>
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
 					<view class="type-text">
 						葡萄1
 					</view>
 				</view>
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
 					<view class="type-text">
 						水蜜桃2
 					</view>
 				</view>
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-3.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-3.png`" alt="" />
 					<view class="type-text">
 						葡萄
 					</view>
 				</view>
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon.png`" alt="" />
 					<view class="type-text">
 						水蜜桃
 					</view>
 				</view>
 				<view class="item-type">
-					<image class="type-img" src="https://birdseye-img.sysuimars.com/youwei-uniapp/home/type-icon-2.png" alt="" />
+					<image class="type-img" :src="`${config.BASIC_IMG}home/type-icon-2.png`" alt="" />
 					<view class="type-text">
 						龙眼
 					</view>
@@ -156,7 +109,7 @@
 					<up-scroll-list indicatorColor="#fae6a4" indicatorActiveColor="#F3C11D" :indicatorWidth="30" :indicatorBarWidth="13">
 						<view class="hot-panel">
 							<view class="hot-item">
-								<image class="hot-img" src="/static/home/hot-1.png" mode=""></image>
+								<image class="hot-img" :src="`${config.BASIC_IMG}home/hot-1.png`" mode=""></image>
 								<view class="item-info">
 									<view class="info-text">
 										<!-- <up-text :lines="2" color="#000000" size="12" text="海南妃子笑新鲜顺丰发货海南妃子笑海南妃子笑"></up-text> -->
@@ -175,7 +128,7 @@
 								</view>
 							</view>
 							<view class="hot-item">
-								<image class="hot-img" src="/static/home/hot-2.png" mode=""></image>
+								<image class="hot-img"  :src="`${config.BASIC_IMG}home/hot-2.png`" mode=""></image>
 								<view class="item-info">
 									<view class="info-text">
 										<view class="ellipsis-l2">
@@ -193,7 +146,7 @@
 								</view>
 							</view>
 							<view class="hot-item">
-								<image class="hot-img" src="/static/home/hot-1.png" mode=""></image>
+								<image class="hot-img" :src="`${config.BASIC_IMG}home/hot-1.png`" mode=""></image>
 								<view class="item-info">
 									<view class="info-text">
 										<view class="ellipsis-l2">
@@ -211,7 +164,7 @@
 								</view>
 							</view>
 							<view class="hot-item">
-								<image class="hot-img" src="/static/home/hot-2.png" mode=""></image>
+								<image class="hot-img" :src="`${config.BASIC_IMG}home/hot-2.png`" mode=""></image>
 								<view class="item-info">
 									<view class="info-text">
 										<view class="ellipsis-l2">
@@ -233,12 +186,81 @@
 				</view>
 			</view>
 		</view>
+		
+		<!-- 有味果园 -->
+		<view class="garden-wrap">
+			<view class="garden-content">
+				<view class="hot-title">
+					<view class="title-l">
+						有味果园
+					</view>
+					<view class="title-btn">
+						查看全部<up-icon size="10" name="arrow-right"></up-icon>
+					</view>
+				</view>
+				<view class="garden-list">
+					<view class="garden-item">
+						<view class="garden-l">
+							<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
+							<text class="img-text">无人机实拍视频</text>
+						</view>
+						<view class="garden-r">
+							<view class="garden-title">
+								从化荔枝博览园
+							</view>
+							<view class="garden-info">
+								品种:荔枝(井岗红糯、巨美人)
+							</view>
+							<view class="garden-info">
+								位置:广州市从化区
+							</view>
+							<view class="garden-btn-group">
+								<view class="btn-second">
+									有味指数
+									<text>4.5分</text>
+								</view>
+								<view class="btn-primary">
+									溯源报告
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="garden-item">
+						<view class="garden-l">
+							<image class="garden-img" :src="`${config.BASIC_IMG}home/garden.png`" mode=""></image>
+							<text class="img-text">无人机实拍视频</text>
+						</view>
+						<view class="garden-r">
+							<view class="garden-title">
+								从化荔枝博览园
+							</view>
+							<view class="garden-info">
+								品种:荔枝(井岗红糯、巨美人)
+							</view>
+							<view class="garden-info">
+								位置:广州市从化区
+							</view>
+							<view class="garden-btn-group">
+								<view class="btn-second">
+									有味指数
+									<text>4.5分</text>
+								</view>
+								<view class="btn-primary">
+									溯源报告
+								</view>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
 <script setup>
 import { ref, onMounted, reactive } from 'vue'
 import QQMapWX from 'qqmap-wx-jssdk'
+import config from "@/api/config.js"
 
 
 // 广州中心坐标
@@ -300,59 +322,71 @@ const loadPoints = () => {
 
 // 更新聚合点
 const updateClusters = () => {
-  if (currentZoom.value >= 15) {
-    // 放大时显示所有点
-    clusters.value = allMarkers.value
-  } else {
-    // 缩小时显示聚合点
-    const clusterRadius = 60 / currentZoom.value
-    const clustered = []
+  if (!allMarkers.value.length) return
+  
+  // 根据缩放级别决定聚合半径(单位:米)
+  const clusterRadius = 100000 / Math.pow(2, currentZoom.value)
+  
+  // 使用网格化聚合提高性能
+  const grid = {}
+  allMarkers.value.forEach(marker => {
+    const gridX = Math.floor(marker.longitude * 100 / clusterRadius)
+    const gridY = Math.floor(marker.latitude * 100 / clusterRadius)
+    const gridKey = `${gridX}_${gridY}`
     
-    allMarkers.value.forEach(marker => {
-      let isClustered = false
-      
-      clustered.forEach(cluster => {
-        const distance = getDistance(
-          cluster.latitude, cluster.longitude,
-          marker.latitude, marker.longitude
-        )
-        
-        if (distance < clusterRadius) {
-          isClustered = true
-          cluster.markers.push(marker)
-          cluster.callout.content = `${cluster.markers.length}个地点`
-        }
-      })
-      
-      if (!isClustered) {
-        clustered.push({
-          ...marker,
-          markers: [marker],
-          callout: {
-            ...marker.callout,
-            content: marker.name
-          }
-        })
+    if (!grid[gridKey]) {
+      grid[gridKey] = {
+        markers: [marker],
+        longitude: marker.longitude,
+        latitude: marker.latitude,
+        id: marker.id
       }
-    })
-    
-    clusters.value = clustered.map(cluster => ({
-      id: cluster.id,
-      latitude: cluster.latitude,
-      longitude: cluster.longitude,
-      iconPath: cluster.markers.length > 1 ? '../../../static/map/point.png' : '../../../static/map/point.png',
-      width: cluster.markers.length > 1 ? 40 : 30,
-      height: cluster.markers.length > 1 ? 40 : 30,
-      callout: cluster.callout,
-      clusterData: cluster.markers
-    }))
-  }
+    } else {
+      grid[gridKey].markers.push(marker)
+      // 计算聚合点中心位置
+      grid[gridKey].longitude = (grid[gridKey].longitude + marker.longitude) / 2
+      grid[gridKey].latitude = (grid[gridKey].latitude + marker.latitude) / 2
+    }
+  })
+  
+  // 生成最终聚合数据
+  clusters.value = Object.values(grid).map(cluster => ({
+    id: cluster.id,
+    latitude: cluster.latitude,
+    longitude: cluster.longitude,
+    iconPath: cluster.markers.length > 1 
+      ? '../../../static/map/tree.png'  // 聚合图标
+      : '../../../static/map/point.png',   // 单点图标
+    width: cluster.markers.length > 1 ? 40 : 30,
+    height: cluster.markers.length > 1 ? 40 : 30,
+    callout: {
+      content: cluster.markers.length > 1 
+        ? `${cluster.markers.length}个地点` 
+        : cluster.markers[0].name,
+      color: '#ffffff',
+      bgColor: '#007AFF',
+      padding: 5,
+      borderRadius: 4,
+      display: 'ALWAYS'
+    },
+    clusterData: cluster.markers
+  }))
   
-  // 设置地图包含所有点
-  includePoints.value = allMarkers.value.map(m => ({
+  // 更新地图视野包含所有点
+  includePoints.value = clusters.value.map(m => ({
     latitude: m.latitude,
     longitude: m.longitude
   }))
+  
+  // 在updateClusters()最后添加
+  // if (mapContext.value) {
+  //   mapContext.value.moveToLocation({
+  //     latitude: center.value.latitude,
+  //     longitude: center.value.longitude
+  //   })
+  // }
+  
+  console.log(`当前缩放级别: ${currentZoom.value}, 聚合点数量: ${clusters.value.length}`)
 }
 
 // 计算两点间距离
@@ -375,16 +409,44 @@ const getDistance = (lat1, lng1, lat2, lng2) => {
 
 // 地图区域变化事件
 const onRegionChange = (e) => {
+	// e = {causedBy, type, detail: {rotate, skew, scale, centerLocation, region}}
   if (e.type === 'end') {
+	console.log('scale', e.detail.scale)
     uni.createMapContext('myMap').getScale({
       success: (res) => {
-        currentZoom.value = res.scale
-        updateClusters()
+		  if (res.scale !== currentZoom.value) {
+			currentZoom.value = res.scale // 只有缩放变化时才更新
+			updateClusters()
+		  }
+        // currentZoom.value = res.scale
+        // updateClusters()
       }
     })
   }
 }
 
+const onScaleChange = (e) => {
+	console.log('eeeee', e)
+}
+
+const onDragEnd = (e) => {
+  // 仅更新中心点,不触发聚合
+  center.value = {
+    latitude: e.detail.center.latitude,
+    longitude: e.detail.center.longitude
+  }
+}
+
+const onScaleChange2 = (e) => {
+  // 只有手势缩放才更新层级并触发聚合
+  currentZoom.value = e.detail.scale
+  updateClusters()
+  
+  // 可选:限制最小/最大缩放级别
+  if (currentZoom.value < 12) currentZoom.value = 12
+  if (currentZoom.value > 20) currentZoom.value = 20
+}
+
 // 搜索地点
 const onSearch = (e) => {
   qqmapsdk.value.search({
@@ -493,11 +555,6 @@ const typeList = reactive([
 			.swiper {
 				height: 170rpx;
 			}
-			::v-deep {
-				.u-scroll-list__indicator {
-					margin-top: 20rpx;
-				}
-			}
 			
 			.item-type {
 				text-align: center;
@@ -521,26 +578,8 @@ const typeList = reactive([
 				background: linear-gradient(#fff1c3 4%,  #FFFFFF 28%);
 				border-radius: 16rpx;
 				padding: 20rpx;
-				height: 236rpx;
-				.hot-title {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					padding-bottom: 20rpx;
-					.title-l {
-						font-family: 'PangMenZhengDao';
-						font-size: 32rpx;
-						.title-color {
-							color: #F3C11D ;
-						}
-					}
-					.title-btn {
-						color: rgba(0, 0, 0, 0.6);
-						font-size: 24rpx;
-						display: inline-flex;
-						align-items: center;
-					}
-				}
+				height: 240rpx;
+				box-sizing: border-box;
 				.hot-list {
 					.hot-panel {
 						width: 100%;
@@ -588,5 +627,114 @@ const typeList = reactive([
 				}
 			}
 		}
+		
+		.garden-wrap {
+			margin: 0 20rpx 20rpx;
+			background: linear-gradient(#FFFFFF, rgba(255, 255, 255, 0));
+			padding: 2rpx;
+			border-radius: 16rpx;
+			.garden-content{
+				background: linear-gradient(#fff6d8 4%,  #FFFFFF 28%);
+				border-radius: 16rpx;
+				padding: 20rpx;
+				box-sizing: border-box;
+				.garden-list {
+					.garden-item {
+						display: flex;
+						.garden-l {
+							position: relative;
+							.garden-img {
+								width: 254rpx;
+								height: 200rpx;
+								object-fit: cover;
+								border-radius: 10rpx;
+							}
+							.img-text {
+								position: absolute;
+								left: 0%;
+								top: 0%;
+								background: rgba(0, 0, 0, 0.3);
+								backdrop-filter: 8rpx;
+								border-radius: 10rpx 0 10rpx 0;
+								font-size: 20rpx;
+								color: #FFFFFF;
+								padding: 6rpx 14rpx;
+							}
+						}
+						.garden-r {
+							padding-left: 20rpx;
+							.garden-title {
+								font-size: 28rpx;
+								line-height: 42rpx;
+								color: #000000;
+								font-weight: 600;
+								padding-bottom: 10rpx;
+							}
+							.garden-info {
+								color: rgba(0, 0, 0, 0.5);
+								font-size: 24rpx;
+								line-height: 36rpx;
+							}
+							.garden-btn-group {
+								padding-top: 20rpx;
+								display: flex;
+								align-items: center;
+								.btn-second {
+									padding: 0 20rpx;
+									border-radius: 40rpx;
+									font-size: 24rpx;
+									color: #C49600;
+									background: rgba(255, 217, 94, 0.2);
+									height: 56rpx;
+									line-height: 56rpx;
+								}
+								.btn-primary {
+									padding: 0 20rpx;
+									border-radius: 40rpx;
+									font-size: 24rpx;
+									color: #000000;
+									background: #FFD95E;
+									font-weight: bold;
+									height: 56rpx;
+									line-height: 56rpx;
+								}
+							}
+						}
+					}
+					.garden-item + .garden-item {
+						margin-top: 20rpx;
+					}
+				}
+			}
+			
+		}
+		
+		
+		.hot-title {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding-bottom: 20rpx;
+			.title-l {
+				font-family: 'PangMenZhengDao';
+				font-size: 32rpx;
+				.title-color {
+					color: #F3C11D ;
+				}
+			}
+			.title-btn {
+				color: rgba(0, 0, 0, 0.6);
+				font-size: 24rpx;
+				display: inline-flex;
+				align-items: center;
+			}
+		}
+	
+		
+		::v-deep {
+			.u-scroll-list__indicator {
+				margin-top: 20rpx;
+			}
+		}
 	}
 </style>

BIN=BIN
static/home/garden.png


BIN=BIN
static/map/tree.png