Эх сурвалжийг харах

登录页调整,地图调整,设备新增所属部门搜索

lipenghui 2 сар өмнө
parent
commit
1e4b50b890

+ 16 - 8
src/views/pms/map/Map.vue

@@ -24,7 +24,7 @@ interface Cluster {
   lng: number
   lat: number
   count: number
-  devices?: Device[]
+  devices?: IotDeviceVO[]
 }
 defineOptions({ name: 'DeviceMap' })
 const showDrawer = ref()
@@ -84,6 +84,7 @@ const initDeviceMarkers = () => {
   map.value.clearOverlays()
 
   const zoomLevel = map.value.getZoom()
+  debugger
   if (zoomLevel > 9) {
     // 高缩放级别下显示单个设备标记
     devices.value.forEach((device) => {
@@ -159,7 +160,7 @@ const createClusterLabel = (cluster: Cluster, point: any) => {
   // 初始样式
   label.setStyle({
     color: '#fff',
-    backgroundColor: '#c38f65',
+    backgroundColor: '#2196df',
     borderRadius: '50%',
     width: '50px',
     height: '50px',
@@ -170,8 +171,8 @@ const createClusterLabel = (cluster: Cluster, point: any) => {
     fontWeight: 'bold',
     boxShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
     transition: 'all 0.3s ease',
-    border: '7px solid rgba(255, 255, 255, 0.5)', // 添加带有不透明度的边框
-    animation: 'breathing 2s infinite' // 添加呼吸动画
+    border: '6px solid rgba(255, 255, 255, 0.5)', // 添加带有不透明度的边框
+    animation: 'breathing 1.5s infinite' // 添加呼吸动画
   })
 
   // 鼠标悬停样式
@@ -188,8 +189,14 @@ const createClusterLabel = (cluster: Cluster, point: any) => {
 
   // 添加点击事件
   label.addEventListener('click', () => {
-    map.value?.setZoom(10)
-    map.value?.panTo(point)
+    if (map.value) {
+      const currentZoom = map.value.getZoom();
+      const MAX_ZOOM = 19; // 手动设定最大缩放级别
+      const newZoom = Math.min(currentZoom + 3, MAX_ZOOM);
+      map.value.setZoom(newZoom);
+      map.value.panTo(point);
+      initDeviceMarkers(); // 重新计算并显示标记和聚合标签
+    }
   })
 
   return label
@@ -198,6 +205,7 @@ const createClusterLabel = (cluster: Cluster, point: any) => {
 const clusterDevices = (devices: IotDeviceVO[], map: any): Cluster[] => {
   const clusters: Cluster[] = []
   const gridSize = getGridSize(map.getZoom())
+  debugger
 
   const gridMap = new Map<string, Cluster>()
 
@@ -223,9 +231,9 @@ const clusterDevices = (devices: IotDeviceVO[], map: any): Cluster[] => {
 }
 
 const getGridSize = (zoom: number): number => {
-  if (zoom <= 5) return 1
+  if (zoom <= 5) return 2
   if (zoom <= 8) return 1
-  if (zoom < 10) return 5
+  if (zoom < 10) return 0.03
   return 0.1
 }