pms-iot-vue/src/views/pms/map/Map.vue

<template>
  <div class="map-container">
    <div id="baidu-map" ref="mapContainer"></div>
    <div class="map-controls">
      <button @click="zoomIn">放大</button>
      <button @click="zoomOut">缩小</button>
      <button @click="toggleMapType">切换地图类型({{ mapType === 'BMAP_NORMAL_MAP' ? '地图' : '卫星' }})</button>
    </div>
    <div v-if="selectedDevice" class="device-info-popup">
      <div class="popup-header">
        <h3>设备详情</h3>
        <button @click="closeDeviceInfo">×</button>
      </div>
      <div class="popup-content">
        <p><strong>设备ID:</strong> {{ selectedDevice.id }}</p>
        <p><strong>设备名称:</strong> {{ selectedDevice.name }}</p>
        <p><strong>位置:</strong> {{ selectedDevice.location }}</p>
        <p><strong>状态:</strong> {{ deviceStatusMap[selectedDevice.status] }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue';

interface Device {
  id: string;
  name: string;
  location: string;
  status: number;
  lng: number;
  lat: number;
}

interface Cluster {
  lng: number;
  lat: number;
  count: number;
  devices?: Device[];
}

export default defineComponent({
  name: 'ChinaDeviceMap',
  setup() {
    const mapContainer = ref<HTMLElement | null>(null);
    const map = ref<any>(null);
    const mapType = ref<'BMAP_NORMAL_MAP' | 'BMAP_SATELLITE_MAP'>('BMAP_NORMAL_MAP');
    const selectedDevice = ref<Device | null>(null);
    const hoverDevice = ref<Device | null>(null);
    const clusters = ref<Cluster[]>([]);

    // 设备数据示例
    const devices = ref<Device[]>([
      { id: 'D001', name: '设备1', location: '北京', status: 1, lng: 116.404, lat: 39.915 },
      { id: 'D002', name: '设备2', location: '上海', status: 2, lng: 121.474, lat: 31.230 },
      { id: 'D003', name: '设备3', location: '广州', status: 1, lng: 113.264, lat: 23.129 },
      { id: 'D004', name: '设备4', location: '深圳', status: 3, lng: 114.058, lat: 22.543 },
      { id: 'D005', name: '设备5', location: '成都', status: 1, lng: 104.065, lat: 30.659 },
      { id: 'D006', name: '设备6', location: '武汉', status: 2, lng: 114.305, lat: 30.593 },
      { id: 'D007', name: '设备7', location: '西安', status: 1, lng: 108.948, lat: 34.263 },
      { id: 'D008', name: '设备8', location: '杭州', status: 3, lng: 120.155, lat: 30.274 },
      { id: 'D009', name: '设备9', location: '南京', status: 1, lng: 118.797, lat: 32.060 },
      { id: 'D010', name: '设备10', location: '重庆', status: 2, lng: 106.505, lat: 29.533 },
    ]);

    const deviceStatusMap = {
      1: '在线',
      2: '离线',
      3: '异常'
    };

    // 初始化地图
    const initMap = () => {
      if (!mapContainer.value) return;

      const script = document.createElement('script');
      script.src = `https://api.map.baidu.com/api?v=3.0&ak=c0crhdxQ5H7WcqbcazGr7mnHrLa4GmO0&type=webgl`;
      script.async = true;
      script.onload = () => {
        if ((window as any).BMap) {
          map.value = new (window as any).BMap.Map(mapContainer.value);
          const point = new (window as any).BMap.Point(104.114129, 37.550339);
          map.value.centerAndZoom(point, 5);

          map.value.enableScrollWheelZoom(true);
          map.value.setMapType((window as any)[mapType.value]);

          map.value.addControl(new (window as any).BMap.NavigationControl());
          map.value.addControl(new (window as any).BMap.ScaleControl());

          initDeviceMarkers();
          map.value.addEventListener('zoomend', initDeviceMarkers);
        } else {
          console.error('百度地图API加载失败');
        }
      };
      script.onerror = () => {
        console.error('百度地图API加载失败');
      };
      document.head.appendChild(script);
    };

    const initDeviceMarkers = () => {
      if (!map.value) return;

      map.value.clearOverlays();

      const zoomLevel = map.value.getZoom();

      if (zoomLevel > 10) {
        // 高缩放级别下显示单个设备标记
        devices.value.forEach(device => {
          const point = new (window as any).BMap.Point(device.lng, device.lat);
          const marker = createDeviceMarker(device, point);
          map.value.addOverlay(marker);
        });
      } else {
        // 低缩放级别下进行聚合
        clusters.value = clusterDevices(devices.value, map.value);
        clusters.value.forEach(cluster => {
          if (cluster.count === 1) {
            // 只有一个设备时显示设备图标
            const device = cluster.devices?.[0];
            if (device) {
              const point = new (window as any).BMap.Point(device.lng, device.lat);
              const marker = createDeviceMarker(device, point);
              map.value.addOverlay(marker);
            }
          } else if (cluster.count > 1) {
            // 多个设备时显示聚合标签
            const point = new (window as any).BMap.Point(cluster.lng, cluster.lat);
            const label = createClusterLabel(cluster, point);
            map.value.addOverlay(label);
          }
        });
      }
    };

    const createDeviceMarker = (device: Device, point: any) => {
      debugger
      const marker = new (window as any).BMap.Marker(point, {
        icon: new (window as any).BMap.Icon('/images/dingweida.png', new (window as any).BMap.Size(103, 105),
          {
            anchor: new (window as any).BMap.Size(10, 25),
            imageOffset: new (window as any).BMap.Size(0, 0 - device.status * 25)
          }
        )
      });

      // 添加点击事件
      marker.addEventListener('click', () => {
        showDeviceInfo(device);
      });

      // 添加鼠标悬停事件
      marker.addEventListener('mouseover', () => {
        hoverDevice.value = device;
      });

      marker.addEventListener('mouseout', () => {
        hoverDevice.value = null;
      });

      return marker;
    };

    const createClusterLabel = (cluster: Cluster, point: any) => {
      const label = new (window as any).BMap.Label(cluster.count.toString(), {
        position: point,
        offset: new (window as any).BMap.Size(-10, -10)
      });

      label.setStyle({
        color: '#fff',
        backgroundColor: '#1890ff',
        borderRadius: '50%',
        width: '20px',
        height: '20px',
        textAlign: 'center',
        lineHeight: '20px',
        cursor: 'pointer',
        fontSize: '12px',
        fontWeight: 'bold'
      });

      // 添加点击事件
      label.addEventListener('click', () => {
        map.value?.setZoom(11);
        map.value?.panTo(point);
      });

      return label;
    };

    const clusterDevices = (devices: Device[], map: any): Cluster[] => {
      const clusters: Cluster[] = [];
      const gridSize = getGridSize(map.getZoom());

      const gridMap = new Map<string, Cluster>();

      devices.forEach(device => {
        const gridKey = `${Math.floor(device.lng / gridSize)}_${Math.floor(device.lat / gridSize)}`;

        if (!gridMap.has(gridKey)) {
          gridMap.set(gridKey, {
            lng: Math.floor(device.lng / gridSize) * gridSize + gridSize / 2,
            lat: Math.floor(device.lat / gridSize) * gridSize + gridSize / 2,
            count: 0,
            devices: []
          });
        }

        const cluster = gridMap.get(gridKey)!;
        cluster.count++;
        if (!cluster.devices) cluster.devices = [];
        cluster.devices.push(device);
      });

      return Array.from(gridMap.values());
    };

    const getGridSize = (zoom: number): number => {
      if (zoom <= 5) return 2;
      if (zoom <= 8) return 1;
      if (zoom <= 10) return 0.5;
      return 0.1;
    };

    const showDeviceInfo = (device: Device) => {
      selectedDevice.value = device;
    };

    const closeDeviceInfo = () => {
      selectedDevice.value = null;
    };

    const zoomIn = () => {
      if (map.value) {
        map.value.zoomIn();
      }
    };

    const zoomOut = () => {
      if (map.value) {
        map.value.zoomOut();
      }
    };

    const toggleMapType = () => {
      if (!map.value) return;

      mapType.value = mapType.value === 'BMAP_NORMAL_MAP'
        ? 'BMAP_SATELLITE_MAP'
        : 'BMAP_NORMAL_MAP';
      map.value.setMapType((window as any)[mapType.value]);
    };

    onMounted(() => {
      initMap();
    });

    onBeforeUnmount(() => {
      if (map.value) {
        map.value.destroy();
      }
    });

    return {
      mapContainer,
      selectedDevice,
      hoverDevice,
      deviceStatusMap,
      zoomIn,
      zoomOut,
      toggleMapType,
      showDeviceInfo,
      closeDeviceInfo
    };
  }
});
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
}

#baidu-map {
  width: 100%;
  height: 100%;
}

.map-controls {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

.map-controls button {
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  cursor: pointer;
}

.device-info-popup {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 1000;
  width: 300px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 15px;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.popup-header button {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.popup-content p {
  margin: 5px 0;
}
</style>