增加大屏地图

apps/web-antd/src/views/screen/monitor/map/Map.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="vmap">
+    <div id="map" class="map-animation"></div>
+  </div>
+</template>
+<script setup lang="js">
+import './map.scss';
+import { icons, MapDefaultData } from './constants.js';
+import { onMounted } from 'vue';
+import { deviceManageList } from '#/api/sis/deviceManage/index.js';
+
+// 地图全局对象
+let map = null;
+
+onMounted(() => {
+  mapFn.intiMap();
+  // 加载设备信息
+  deviceManageList({ deviceType: 1 }).then(({ rows = [], total = 0 }) => {
+    if (total > 0) {
+      // 渲染设备点位信息
+      let items = rows.map((item) => {
+        return {
+          icon: 'camera',
+          data: item,
+          lon: item.lon,
+          lat: item.lat,
+        };
+      });
+      mapFn.renderOverLayersData(items, function (marker, data) {
+        // 渲染设备点击事件
+        marker.addEventListener('click', () => {
+          console.log(data);
+          // 查询当前设备的通道信息
+
+          //渲染设备播放列表
+          const html = [
+            '<div class="video-wrap" style="width: 530px;height: 350px;padding-top:50px">',
+            `<div class="wrap-title" style="margin-top: -35px;">${data.deviceName}</div>`,
+            `<div class="close" onclick="pageEvent.closeInfoWindow()">X</div>`,
+            `<div class="wrap-content">`,
+            `<div onclick="pageEvent.playClick()" class="content-left" style="height: 270px">`,
+            '<video id="video-player" ref="player1" muted autoplay></video>',
+            `</div>`,
+            `</div>`,
+            `</div>`,
+          ];
+          const infoWindow = new BMap.InfoWindow(html.join(''), {
+            width: 530,
+            height: 350,
+            enableCloseOnClick: false,
+          });
+          map.openInfoWindow(infoWindow, marker.point);
+        });
+      });
+    }
+  });
+});
+// 当前页面播放的对象
+let currentPlayer = undefined;
+
+window.pageEvent = {
+  closeInfoWindow() {
+    map.closeInfoWindow();
+    closeVideo(currentPlayer);
+  },
+};
+
+function closeVideo(player) {
+  if (player) {
+    try {
+      player.pause();
+      player.unload();
+      player.destroy();
+    } catch (e) {
+      console.log(e);
+    }
+  }
+}
+
+/* 地图相关方法 */
+const mapFn = {
+  renderOverLayersData(data, cb, clear = true) {
+    // 清楚地图上的图层
+    if (clear) {
+      mapFn.clearLayers();
+    }
+    data.forEach((v) => {
+      const { lon, lat, data, icon } = v;
+      const marker = new BMap.Marker(new BMap.Point(lon, lat), {
+        icon: icons[icon],
+      });
+      // 将数据放入marker
+      marker.data = data;
+      marker.setTop(true, 100);
+      // 保存自定义信息到marker对象中
+      map.addOverlay(marker);
+      if (cb) {
+        cb(marker, data);
+      }
+    });
+  },
+  /**
+   * 清除地图上的所有图层
+   */
+  clearLayers: () => map.clearOverlays(),
+
+  /**
+   * 初始化地图
+   * @param cb 地图初始化的回调函数
+   */
+  intiMap: function (cb) {
+    // 创建地图实例
+    map = new BMap.Map('map', { enableMapClick: false });
+    // 设置地图中心和初始层级
+    map.centerAndZoom(
+      new BMap.Point(MapDefaultData.center[0], MapDefaultData.center[1]),
+      MapDefaultData.zoom,
+    );
+    // 设置地图样式
+    map.setMapStyleV2({
+      styleId: 'bbb822feddbffbb4dc419fc6c37f2e4e',
+    });
+    // 开启滚轮缩放
+    map.enableScrollWheelZoom(true);
+    map.clearOverlays();
+    if (cb) {
+      cb();
+    }
+  },
+};
+</script>