|
@@ -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
|
|
|
}
|
|
|
|