新增图层

src/components/Legend/index.vue

@@ -0,0 +1,161 @@
+<template>
+<div class="lanyer">
+        <div>
+          <img src="/src/assets/highScore/mapIcon1.png" />
+          图例名称
+        </div>
+        <div v-for="item in layerList" :key="item.id" class="custom-checkbox">
+          <label>
+            <input type="checkbox" :checked="item.show" @change="toggleLayer(item.layerName)"/>
+            <img :src="item.url" />
+            <span>{{ item.name }}</span>
+          </label>
+        </div>
+      </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+const props = defineProps({
+  chooseBot: {
+    type: String,
+    default: ''
+  }
+});
+const emit = defineEmits(['layer-toggle']);
+const allLayerLists = {
+  default: [
+    {
+      id: 1,
+      layerName: 'warnLayer',
+      name: '事件',
+      show: true,
+      url: new URL('@/assets/highScore/warnicon1.png', import.meta.url).href,
+    },
+    {
+      id: 2,
+      layerName: 'equipmentLayer',
+      name: '设备',
+      show: true,
+      url: new URL('@/assets/highScore/equipment.png', import.meta.url).href,
+    },
+    {
+      id: 3,
+      layerName: 'carLayer',
+      name: '车辆',
+      show: true,
+      url: new URL('@/assets/highScore/caricon.png', import.meta.url).href,
+    },
+    {
+      id: 4,
+      layerName: 'emergencyLayer',
+      name: '应急设施',
+      show: true,
+      url: new URL('@/assets/highScore/Materialsicon.png', import.meta.url).href,
+    },
+  ],
+  charge: [
+    {
+      id: 1,
+      layerName: 'monitoring',
+      name: '监控',
+      show: true,
+      url: new URL('@/assets/highScore/monitoring.png', import.meta.url).href,
+    },
+    {
+      id: 2,
+      layerName: 'peopleLayer',
+      name: '设备',
+      show: true,
+      url: new URL('@/assets/highScore/equipment.png', import.meta.url).href,
+    },
+    {
+      id: 3,
+      layerName: 'carLayer',
+      name: '车辆',
+      show: true,
+      url: new URL('@/assets/highScore/caricon.png', import.meta.url).href,
+    },
+    {
+      id: 4,
+      layerName: 'tollStation',
+      name: '收费站',
+      show: true,
+      url: new URL('@/assets/highScore/tollStation.png', import.meta.url).href,
+    },
+  ],
+};
+const layerList = ref(allLayerLists.default);
+// 根据 chooseBot 过滤图层列表
+const filteredLayerList = computed(() => {
+  return layerList.value.filter(item => item.show);
+});
+
+// 监听 chooseBot 变化
+watch(() => props.chooseBot, (newVal) => {
+  switch(newVal) {
+    case 'charge':
+      layerList.value = allLayerLists.charge;
+      break;
+      case 'dataChart':
+      layerList.value = allLayerLists.charge;
+      break;
+    default:
+      layerList.value = allLayerLists.default;
+  }
+}, { immediate: true });
+
+// 切换图层显示状态
+const toggleLayer = (layerName: string) => {
+  const layer = layerList.value.find(item => item.layerName === layerName);
+  if (layer) {
+    layer.show = !layer.show;
+    emit('layer-toggle', { 
+      layerName, 
+      show: layer.show 
+    });
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.lanyer {
+    padding: 30px 0 0 20px;
+    width: 500.34px;
+    height: 550.65px;
+    color: white;
+    z-index: 9999 !important;
+    position: absolute;
+    bottom: 20%;
+    right: 18%;
+    background: url('@/assets/highScore/lanyerBg.png') no-repeat 0 0/100% 100%;
+    div {
+      font-size: 40px;
+    }
+    .custom-checkbox {
+      margin: 30px 0 20px 80px; /* 调整间距 */
+    }
+
+    .custom-checkbox img {
+      width: 50px;
+      height: 50px;
+      filter: brightness(0.88) contrast(1.22) grayscale(0) hue-rotate(360deg) opacity(1) saturate(1.1) sepia(0.54) invert(0.9);
+    }
+    .custom-checkbox label {
+      display: flex;
+      align-items: center;
+      gap: 25px; /* 调整图标和文字的间距 */
+      cursor: pointer;
+    }
+    .custom-checkbox input[type='checkbox'] {
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+    }
+
+    .custom-checkbox span {
+      color: white;
+      font-size: 36px;
+    }
+  }
+</style>

src/components/MapContainer/index.vue

@@ -5,12 +5,7 @@
         <div class="searchText">
           <img src="/src/assets/highScore/searchIcon.png" />
           <div style="margin-bottom: 10%">
-                        <a-input
-                            v-model:value="keyword"
-                            :bordered="false"
-                            placeholder="搜索"
-                            class="custom-textarea"
-                        />
+            <a-input v-model:value="keyword" :bordered="false" placeholder="搜索" class="custom-textarea" />
           </div>
         </div>
       </div>
@@ -31,27 +26,23 @@ const searchValue = ref();
 const boardRef = ref();
 const devRef = ref();
 const router = useRouter();
+import {
+  lineLayerData,
+  lineLayerData1,
+  lineLayerData2,
+  pointData
+} from '../../views/highScore/dailyMonitoring/test';
 const emit = defineEmits(['checkWarring', 'showModal']);
 // const emit1 = defineEmits(['showModal']);
-const layerGroups = reactive<Record<string, { iconLayer: any; textLayer: any }>>({});
+const layerGroups = reactive<Record<string, { iconLayer: any; textLayer: any; }>>({});
 interface LayerConfig {
   id: string;
   type:
-        | 'road'
-        | 'tunnel'
-        | 'board'
-        | 'fire'
-        | 'device'
-        | 'highWay'
-        | 'explosives'
-        | 'tourism'
-        | 'ThreeShuttleBus'
-        | 'fireWorks'
-        | 'chemistryCar'
   | 'warn'
   | 'people'
   | 'car'
-        | 'materials';
+  | 'emergency'
+  | 'equipment';
   data: any;
   style?: {
     color?: string;
@@ -75,22 +66,13 @@ interface Props {
   tileUrl?: string;
   amapKey?: string;
   tdtKey?: string;
-    roadLayer?: LayerConfig;
-    tunnelLayer?: LayerConfig;
-    boardLayer?: LayerConfig;
-    fireLayer?: LayerConfig;
-    deviceLayer?: LayerConfig;
-    highWayLayer?: LayerConfig;
-    explosivesLayer?: LayerConfig;
-    tourismLayer?: LayerConfig;
-    ThreeShuttleBusLayer?: LayerConfig;
-    fireWorksLayer?: LayerConfig;
-    chemistryCarLayer?: LayerConfig;
   lineLayer?: LayerConfig;
   warnLayer?: LayerConfig;
   peopleLayer?: LayerConfig;
   carLayer?: LayerConfig;
   materialsLayer?: LayerConfig;
+  equipmentLayer?: LayerConfig;
+  emergencyLayer?: LayerConfig;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -125,38 +107,91 @@ const initL7Map = async () => {
         parser: { type: 'rasterTile', tileSize: 256, dataType: 'image' },
       });
       scene.value?.addLayer(baseLayer);
-        }
-        //圆圈
-        if (props.warnLayer) {
-            const pointLayer = new PointLayer()
-                .source({
-                    type: 'FeatureCollection',
-                    features: [
-                        {
-                            type: 'Feature',
-                            properties: {},
-                            geometry: {
-                                type: 'Point',
-                                coordinates: [106.5488177260367, 29.58682303545917],
+
+        //名字
+      const layer = new PointLayer()
+        .source(pointData.features, {
+          parser: {
+            type: 'json',
+            x: 'j',
+            y: 'w',
           },
+        })
+        .shape('square')
+        .color('backgoundColor')
+        .size(50);
+      scene.value.addLayer(layer);
+
+      const textLayer = new PointLayer({})
+        .source(pointData.features, {
+          parser: {
+            type: 'json',
+            x: 'j',
+            y: 'w',
           },
-                    ],
         })
-                .shape('circle')
-                .size(230) // 圆圈直径（像素）
-                .color('#045697') // 填充颜色
+        .shape('m', 'text')
+        .size(30)
+        .color('black')
         .style({
-                    stroke: '#04c4cb', // 边框颜色
-                    strokeWidth: 3, // 边框宽度
-                    opacity: 0.5, // 透明度
+          textAnchor: 'center',
+          textOffset: [2, -5],
+          spacing: 2,
+          padding: [1, 1],
+          stroke: 'black',
+          strokeWidth: 0.3,
+          strokeOpacity: 1.0,
+          fontFamily: 'Times New Roman',
+          textAllowOverlap: true,
         });
-            scene.value?.addLayer(pointLayer);
+        scene.value.addLayer(textLayer);
+      
+      // const lineLayer = new LineLayer({
+      //   name: 'lineLayer',
+      //   visible: true,
+      // })
+      //   .source(lineLayerData)
+      //   .size(5)
+      //   .color('color')
+      //   .style({
+      //     opacity: 1,
+      //   });
+      // scene.value.addLayer(lineLayer);
+
+
+      // const lineLayer1 = new LineLayer({
+      //   name: 'lineLayer',
+      //   visible: true,
+      // })
+      //   .source(lineLayerData1)
+      //   .size(5)
+      //   .color('color')
+      //   .style({
+      //     opacity: 1,
+      //   });
+      // scene.value.addLayer(lineLayer1);
+
+
+      // const lineLayer2 = new LineLayer({
+      //   name: 'lineLayer',
+      //   visible: true,
+      // })
+      //   .source(lineLayerData2)
+      //   .size(5)
+      //   .style({
+      //     opacity: 1,
+      //     sourceColor: '#00887f',
+      //     targetColor: '#00887f',
+      //     linearDir: 'horizontal',
+      //   });
+      // scene.value.addLayer(lineLayer2);
     }
+
     // 2. 事件图层
     if (props.warnLayer) {
       await scene.value.addImage(
         'warn-icon',
-                new URL('@/assets/coordinated/warnicon.png', import.meta.url).href,
+        new URL('@/assets/highScore/eventLanyer.png', import.meta.url).href,
       );
       const warnLayer = new PointLayer({
         zIndex: props.warnLayer.style?.zIndex || 1,
@@ -175,30 +210,36 @@ const initL7Map = async () => {
         .size(props.warnLayer.style?.size || 2);
       scene.value?.addLayer(warnLayer);
       warnLayer.on('click', e => {
-                console.log('事件图层', e);
-                emit('showModal');
+        // console.log('事件图层', e);
+        // emit('showModal');
       });
       layerInstances['warnLayer'] = warnLayer;
     }
 
-        // 3. 人员图层
-        if (props.peopleLayer) {
+    // 3. 设备图层
+    if (props.equipmentLayer) {
       await scene.value.addImage(
-                'people-icon',
-                new URL('@/assets/coordinated/people.png', import.meta.url).href,
+        'equipmentLayer-icon',
+        new URL('@/assets/highScore/equipmentLanyer.png', import.meta.url).href,
       );
 
-            const peopleLayer = new PointLayer({
-                zIndex: props.peopleLayer.style?.zIndex || 2,
-                name: 'people-layer',
+      const equipmentLayer = new PointLayer({
+        zIndex: props.equipmentLayer.style?.zIndex || 2,
+        name: 'equipmentLayer-layer',
         visible: true,
       })
-                .source(props.peopleLayer.data)
-                .shape('people-icon')
-                .size(props.peopleLayer.style?.size || 50);
-            scene.value?.addLayer(peopleLayer);
-            layerInstances['peopleLayer'] = peopleLayer;
-            peopleLayer.on('click', e => {
+        .source(props.equipmentLayer.data, {
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        })
+        .shape('equipmentLayer-icon')
+        .size(props.equipmentLayer.style?.size || 50);
+      scene.value?.addLayer(equipmentLayer);
+      layerInstances['equipmentLayer'] = equipmentLayer;
+      equipmentLayer.on('click', e => {
         emit('showModal');
       });
     }
@@ -207,7 +248,7 @@ const initL7Map = async () => {
     if (props.carLayer) {
       await scene.value.addImage(
         'car-icon',
-                new URL('@/assets/coordinated/car.png', import.meta.url).href,
+        new URL('@/assets/highScore/carLanyer.png', import.meta.url).href,
       );
 
       const carLayer = new PointLayer({
@@ -215,7 +256,13 @@ const initL7Map = async () => {
         name: 'car-layer',
         visible: true,
       })
-                .source(props.carLayer.data)
+        .source(props.carLayer.data,{
+          parser: {
+            type: 'json',
+            x: 'lng',
+            y: 'lat',
+          },
+        })
         .shape('car-icon')
         .size(props.carLayer.style?.size || 15)
         .style({
@@ -228,522 +275,32 @@ const initL7Map = async () => {
       layerInstances['carLayer'] = carLayer;
     }
 
-        // 5. 物资图层
-        if (props.materialsLayer) {
-            await scene.value.addImage(
-                'materials-icon',
-                new URL('@/assets/coordinated/Materials.png', import.meta.url).href,
-            );
-
-            const materialsLayer = new PointLayer({
-                zIndex: props.materialsLayer.style?.zIndex || 5,
-                name: 'materials-layer',
-                visible: true,
-            })
-                .source(props.materialsLayer.data)
-                .shape('materials-icon')
-                .size(props.materialsLayer.style?.size || 25)
-                .animate({
-                    enable: true,
-                    speed: 1,
-                    rings: 3,
-                });
-            scene.value?.addLayer(materialsLayer);
-            materialsLayer.on('click', e => {
-                emit('showModal');
-            });
-            layerInstances['materialsLayer'] = materialsLayer;
-        }
-
-        // 2. 公路图层（线图层）
-        if (props.roadLayer) {
-            const roadLayer = new LineLayer({
-                zIndex: props.roadLayer.style?.zIndex || 1,
-                name: 'road-layer',
-                visible: true,
-            })
-                .source(props.roadLayer.data)
-                .size(props.roadLayer.style?.size || 2)
-                .color(props.roadLayer.style?.color || '#4a7af0');
-            scene.value?.addLayer(roadLayer);
-            layerInstances['lineLayer'] = roadLayer;
-        }
-
-        // 3. 隧道图层（点图层+文字标注）
-        if (props.tunnelLayer) {
-            await scene.value.addImage(
-                'tunnel-icon',
-                new URL('@/assets/images/traffic/point/tunnel.svg', import.meta.url).href,
-            );
-
-            const tunnelLayer = new PointLayer({
-                zIndex: props.tunnelLayer.style?.zIndex || 2,
-                name: 'tunnel-layer',
-                visible: false,
-            })
-                .source(props.tunnelLayer.data)
-                .shape('tunnel-icon')
-                .size(props.tunnelLayer.style?.size || 50);
-            scene.value?.addLayer(tunnelLayer);
-            layerInstances['tunnelLayer'] = tunnelLayer;
-            tunnelLayer.on('click', e => {
-                console.log('隧道图层', e);
-                router.push('/tunnel/' + e.feature.id);
-            });
-        }
-
-        // 4. 情报板图层
-        if (props.boardLayer) {
-            await scene.value.addImage(
-                'board-icon',
-                new URL('@/assets/images/traffic/point/board.svg', import.meta.url).href,
-            );
-
-            const boardLayer = new PointLayer({
-                zIndex: props.boardLayer.style?.zIndex || 4,
-                name: 'board-layer',
-                visible: false,
-            })
-                .source(props.boardLayer.data)
-                .shape('board-icon')
-                .size(props.boardLayer.style?.size || 15)
-                .style({
-                    offsets: [0, 20],
-                });
-            scene.value?.addLayer(boardLayer);
-            boardLayer.on('click', e => {
-                console.log('情报板图层', e);
-                boardRef.value.open = true;
-            });
-            layerInstances['boardLayer'] = boardLayer;
-        }
-
-        // 5. 火灾图层
-        if (props.fireLayer) {
-            await scene.value.addImage(
-                'fire-icon',
-                new URL('@/assets/images/traffic/point/fire.svg', import.meta.url).href,
-            );
-
-            const fireLayer = new PointLayer({
-                zIndex: props.fireLayer.style?.zIndex || 5,
-                name: 'fire-layer',
-                visible: false,
-            })
-                .source(props.fireLayer.data)
-                .shape('fire-icon')
-                .size(props.fireLayer.style?.size || 25)
-                .animate({
-                    enable: true,
-                    speed: 1,
-                    rings: 3,
-                });
-            scene.value?.addLayer(fireLayer);
-            fireLayer.on('click', e => {
-                console.log('监控', e);
-                devRef.value.open = true;
-            });
-            layerInstances['fireLayer'] = fireLayer;
-        }
-
-        // 6. 隧道分布器图层
-        if (props.deviceLayer) {
+    // 5. 应急措施图层
+    if (props.emergencyLayer) {
       await scene.value.addImage(
-                'device-icon',
-                new URL('@/assets/images/traffic/point/device.svg', import.meta.url).href,
+        'emergency-icon',
+        new URL('@/assets/highScore/emergencyLanyer.png', import.meta.url).href,
       );
 
-            const deviceLayer = new PointLayer({
-                zIndex: props.deviceLayer.style?.zIndex || 6,
-                name: 'device-layer',
-                visible: false,
-            })
-                .source(props.deviceLayer.data)
-                .shape('device-icon')
-                .size(props.deviceLayer.style?.size || 15);
-            scene.value?.addLayer(deviceLayer);
-            deviceLayer.on('click', e => {
-                console.log('监控', e);
-                devRef.value.open = true;
-            });
-            layerInstances['deviceLayer'] = deviceLayer;
-        }
-
-        //7.高速公路文字标注图层
-        if (props.highWayLayer) {
-            // await scene.value.addImage(
-            //     'highWay-icon',
-            //     new URL('@/assets/images/watch/blueBg.png', import.meta.url).href,
-            // );
-            const layer = new PointLayer({
-                zIndex: props.highWayLayer.style?.zIndex || 7,
-                name: 'highWay-layer',
-                visible: true,
-            })
-                .source(props.highWayLayer.data.list, {
-                    parser: {
-                        type: 'json',
-                        x: 'j',
-                        y: 'w',
-                    },
-                })
-                .shape('square')
-                .color('c')
-                .size(15)
-                .style({
-                    stroke: 'white',
-                    strokeWidth: 0.5,
-                });
-            scene.value?.addLayer(layer);
-
-            const highWayLayer = new PointLayer({
-                zIndex: props.highWayLayer.style?.zIndex || 7,
-                name: 'highWay-layer',
+      const emergencyLayer = new PointLayer({
+        zIndex: props.emergencyLayer.style?.zIndex || 5,
+        name: 'emergency-layer',
         visible: true,
       })
-
-                .source(props.highWayLayer.data.list, {
-                    parser: {
-                        type: 'json',
-                        x: 'j',
-                        y: 'w',
-                    },
-                })
-                .shape('m', 'text')
-                // .shape('highWay-icon')
-                .size(props.highWayLayer.style?.size || 15)
-                .color('f')
-                .style({
-                    textAnchor: 'center',
-                    textOffset: [0, 0],
-                    spacing: 2,
-                    padding: [1, 1],
-                    strokeOpacity: 1.0,
-                });
-            scene.value?.addLayer(highWayLayer);
-
-            // const highWayLayer1 = new PointLayer({
-            //     zIndex: props.highWayLayer.style?.zIndex || 7,
-            //     name: 'highWay-layer',
-            //     visible: true,
-            // })
-
-            //     .source(props.highWayLayer.data.list, {
-            //         parser: {
-            //             type: 'json',
-            //             x: 'j',
-            //             y: 'w',
-            //         },
-            //     })
-            //     .shape('m', 'text')
-            //     .size(12)
-            //     .color('f')
-            //     .style({
-            //         textAnchor: 'center',
-            //         textOffset: [0, 0],
-            //         spacing: 2,
-            //         padding: [1, 1],
-            //         strokeOpacity: 1.0,
-            //     });
-            // scene.value?.addLayer(highWayLayer1);
-            layerInstances['highWayLayer'] = highWayLayer;
-        }
-
-        //8.民用爆炸品专用车图层
-        if (props.explosivesLayer) {
-            await scene.value.addImage(
-                'explosives-icon',
-                new URL('@/assets/images/danger/point/1.svg', import.meta.url).href,
-            );
-
-            const iconLayer = new PointLayer({
-                zIndex: props.explosivesLayer.style?.zIndex || 6,
-                name: 'explosives-layer',
-                visible: true,
-            })
-                .source(props.explosivesLayer.data)
-                .shape('explosives-icon')
-                .size(props.explosivesLayer.style?.size || 15);
-
-            const textLayer = new PointLayer({
-                zIndex: props.explosivesLayer.style?.zIndex || 6,
-                name: 'explosives-layer',
-                visible: true,
-            })
-                .source(props.explosivesLayer.data)
-                .shape('text')
-                .size(15)
-                .color('#026b88')
-                .style({
-                    textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
-                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                    stroke: '#00DCFF', // 描边颜色
-                    strokeWidth: 0.5, // 描边宽度
-                    strokeOpacity: 1.0,
-                });
-            // 添加到场景
-            scene.value?.addLayer(iconLayer);
-            scene.value?.addLayer(textLayer);
-            iconLayer.on('click', e => {
-                emit('checkWarring');
-            });
-            // 保存图层组
-            layerGroups['explosivesLayer'] = {
-                iconLayer,
-                textLayer,
-            };
-        }
-
-        //9.旅游包车图层
-        if (props.tourismLayer) {
-            await scene.value.addImage(
-                'tourism-icon',
-                new URL('@/assets/images/danger/point/2.svg', import.meta.url).href,
-            );
-
-            const iconLayer = new PointLayer({
-                zIndex: props.tourismLayer.style?.zIndex || 6,
-                name: 'tourism-layer',
-                visible: true,
-            })
-                .source(props.tourismLayer.data)
-                .shape('tourism-icon')
-                .size(props.tourismLayer.style?.size || 15);
-            const textLayer = new PointLayer({
-                zIndex: props.tourismLayer.style?.zIndex || 6,
-                name: 'tourism-layer',
-                visible: true,
-            })
-                .source(props.tourismLayer.data)
-                .shape('text')
-                .size(15)
-                .color('#023d7d')
-                .style({
-                    textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
-                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                    stroke: '#0276b6', // 描边颜色
-                    strokeWidth: 0.5, // 描边宽度
-                    strokeOpacity: 1.0,
-                });
-            // 添加到场景
-            scene.value?.addLayer(iconLayer);
-            scene.value?.addLayer(textLayer);
-            iconLayer.on('click', e => {
-                emit('checkWarring');
-            });
-            // 保存图层组
-            layerGroups['tourismLayer'] = {
-                iconLayer,
-                textLayer,
-            };
-        }
-
-        //10.三类以上班线客车
-        if (props.ThreeShuttleBusLayer) {
-            await scene.value.addImage(
-                'ThreeShuttleBus-icon',
-                new URL('@/assets/images/danger/point/3.svg', import.meta.url).href,
-            );
-
-            const iconLayer = new PointLayer({
-                zIndex: props.ThreeShuttleBusLayer.style?.zIndex || 6,
-                name: 'Three-shuttle-bus-layer',
-                visible: true,
-            })
-                .source(props.ThreeShuttleBusLayer.data)
-                .shape('ThreeShuttleBus-icon')
-                .size(props.ThreeShuttleBusLayer.style?.size || 15);
-            const textLayer = new PointLayer({
-                zIndex: props.ThreeShuttleBusLayer.style?.zIndex || 6,
-                name: 'Three-shuttle-bus-layer',
-                visible: true,
-            })
-                .source(props.ThreeShuttleBusLayer.data)
-                .shape('text')
-                .size(15)
-                .color('#028978')
-                .style({
-                    textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
-                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                    stroke: '#03a583', // 描边颜色
-                    strokeWidth: 0.5, // 描边宽度
-                    strokeOpacity: 1.0,
-                });
-            // 添加到场景
-            scene.value?.addLayer(iconLayer);
-            scene.value?.addLayer(textLayer);
-            iconLayer.on('click', e => {
-                emit('checkWarring');
-            });
-            // 保存图层组
-            layerGroups['ThreeShuttleBusLayer'] = {
-                iconLayer,
-                textLayer,
-            };
-        }
-
-        //11.烟花爆竹专用车
-        if (props.fireWorksLayer) {
-            await scene.value.addImage(
-                'fireWorks-icon',
-                new URL('@/assets/images/danger/point/4.svg', import.meta.url).href,
-            );
-
-            const iconLayer = new PointLayer({
-                zIndex: props.fireWorksLayer.style?.zIndex || 6,
-                name: 'fire-works-layer',
-                visible: true,
-            })
-                .source(props.fireWorksLayer.data)
-                .shape('fireWorks-icon')
-                .size(props.fireWorksLayer.style?.size || 15);
-
-            const textLayer = new PointLayer({
-                zIndex: props.fireWorksLayer.style?.zIndex || 6,
-                name: 'fire-works-layer',
-                visible: true,
-            })
-                .source(props.fireWorksLayer.data)
-                .shape('text')
-                .size(15)
-                .color('#864a05')
-                .style({
-                    textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
-                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                    stroke: '#ba7b3d', // 描边颜色
-                    strokeWidth: 0.5, // 描边宽度
-                    strokeOpacity: 1.0,
-                });
-            // 添加到场景
-            scene.value?.addLayer(iconLayer);
-            scene.value?.addLayer(textLayer);
-            iconLayer.on('click', e => {
-                emit('checkWarring');
-            });
-            // 保存图层组
-            layerGroups['fireWorksLayer'] = {
-                iconLayer,
-                textLayer,
-            };
-        }
-
-        //12.危险化学品专用车
-        if (props.chemistryCarLayer) {
-            await scene.value.addImage(
-                'chemistryCar-icon',
-                new URL('@/assets/images/danger/point/5.svg', import.meta.url).href,
-            );
-
-            const iconLayer = new PointLayer({
-                zIndex: props.chemistryCarLayer.style?.zIndex || 6,
-                name: 'chemistry-car-layer',
-                visible: true,
-            })
-                .source(props.chemistryCarLayer.data)
-                .shape('chemistryCar-icon')
-                .size(props.chemistryCarLayer.style?.size || 15);
-
-            const textLayer = new PointLayer({
-                zIndex: props.chemistryCarLayer.style?.zIndex || 6,
-                name: 'chemistry-car-layer',
-                visible: true,
-            })
-                .source(props.chemistryCarLayer.data)
-                .shape('text')
-                .size(15)
-                .color('#902506')
-                .style({
-                    textOffset: [5, 70], // 文本相对锚点的偏移量 [水平, 垂直]
-                    textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
-                    padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
-                    stroke: '#c84724', // 描边颜色
-                    strokeWidth: 0.5, // 描边宽度
-                    strokeOpacity: 1.0,
-                });
-            // 添加到场景
-            scene.value?.addLayer(iconLayer);
-            scene.value?.addLayer(textLayer);
-            iconLayer.on('click', e => {
-                emit('checkWarring');
-            });
-            // 保存图层组
-            layerGroups['chemistryCarLayer'] = {
-                iconLayer,
-                textLayer,
-            };
-        }
-
-        // 13.3D弧线
-        if (props.lineLayer) {
-            await scene.value.addImage(
-                'marker',
-                'https://gw.alipayobjects.com/mdn/antv_site/afts/img/A*BJ6cTpDcuLcAAAAAAAAAAABkARQnAQ',
-            );
-            const data = {
-                type: 'FeatureCollection',
-                features: [
-                    {
-                        type: 'Feature',
-                        geometry: {
-                            type: 'Point',
-                            coordinates: [106.5828177260367, 29.55982303545917],
-                        },
-                    },
-                ],
-            };
-            const imageLayer = new PointLayer().source(data).shape('marker').size(20).style({
-                zIndex: 10,
-            });
-            const layer = new LineLayer({})
-                .source(props.lineLayer.data, {
-                    parser: {
-                        type: 'json',
-                        x: 'lng1',
-                        y: 'lat1',
-                        x1: 'lng2',
-                        y1: 'lat2',
-                        z: 'height', // 使用高度字段
-                    },
-                })
-                .size(2)
-                .shape('arc3d')
-                .color('#dfe2b4')
-                .style({
-                    zIndex: 1,
-                    curvature: 3.0,
-                });
-
-            // 提取所有终点坐标
-            const endPoints = props.lineLayer.data.map(item => ({
-                lng: item.lng2,
-                lat: item.lat2,
-                name: item.name,
-            }));
-
-            // 添加终点圆点图层
-            const endPointLayer = new PointLayer()
-                .source(endPoints, {
+        .source(props.emergencyLayer.data,{
           parser: {
             type: 'json',
             x: 'lng',
             y: 'lat',
           },
         })
-                .shape('circle')
-                .size(8)
-                .color('#5289d2')
-                .style({
-                    stroke: '#FFF',
-                    strokeWidth: 2,
-                    zIndex: 10,
+        .shape('emergency-icon')
+        .size(props.emergencyLayer.style?.size || 25)
+      scene.value?.addLayer(emergencyLayer);
+      emergencyLayer.on('click', e => {
+        emit('showModal');
       });
-            scene.value?.addLayer(imageLayer);
-            scene.value?.addLayer(endPointLayer);
-            scene.value?.addLayer(layer);
+      layerInstances['emergencyLayer'] = emergencyLayer;
     }
   });
 };
@@ -788,12 +345,14 @@ onBeforeUnmount(() => {
   left: 7%;
   width: 6000px;
   height: 2500px;
-    border-radius: 15% / 50%; /* 使边框变成椭圆形，横轴和纵轴不同的比例 */
-    overflow: hidden; /* 防止内容溢出 */
+  border-radius: 15% / 50%;
+  /* 使边框变成椭圆形，横轴和纵轴不同的比例 */
+  overflow: hidden;
+  /* 防止内容溢出 */
   position: relative;
-    filter: brightness(0.88) contrast(1.22) grayscale(0) hue-rotate(360deg) opacity(1) saturate(1.1)
-        sepia(0.54) invert(0.9);
+  filter: brightness(0.88) contrast(1.22) grayscale(0) hue-rotate(360deg) opacity(1) saturate(1.1) sepia(0.54) invert(0.9);
 }
+
 .map-search-input {
   position: absolute;
   z-index: 999;
@@ -814,6 +373,7 @@ onBeforeUnmount(() => {
   background: url('/src/assets/highScore/searchBg.png') no-repeat 0 0/100% 100%;
   width: 250px;
   height: 32px;
+
   .searchText {
     width: 246px;
     height: 32px;
@@ -822,6 +382,7 @@ onBeforeUnmount(() => {
     position: absolute;
     top: 6%;
     left: 2%;
+
     img {
       position: absolute;
       top: 20%;
@@ -829,16 +390,19 @@ onBeforeUnmount(() => {
       width: 15px;
       height: 16px;
     }
+
     div {
       position: absolute;
       top: -10%;
       left: 8%;
     }
+
     .custom-textarea::placeholder {
       color: white;
       opacity: 1;
       font-size: 18px;
     }
+
     .ant-input {
       margin-bottom: 10px;
       font-size: 18px;

src/views/highScore/dailyMonitoring/index.vue

@@ -24,15 +24,11 @@
           <div class="map-data">
             <!-- <div id="watch-map" v-show="chooseBot != 'surveillance'"></div> -->
             <div v-show="chooseBot != 'surveillance'">
-              <MapContainer
-                :center="[106.5488177260367, 29.58682303545917]"
-                :zoom="13"
-                :showSearch="true"
-                tileUrl="http://192.168.1.37:9999/sys/common/static/vec/{z}/{x}/{y}/tile.png"
-                id="watch-map"
-                ref="mapRef"
-                
-            />
+              <MapContainer :center="[106.5488177260367, 29.58682303545917]" :zoom="13" :warn-layer="warnLayerConfig"
+              :emergency-layer="emergencyLayerConfig"
+                :car-layer="carLayerConfig" :equipment-layer="equipmentLayerConfig" :showSearch="true"
+                tileUrl="http://192.168.1.37:9999/sys/common/static/vec/{z}/{x}/{y}/tile.png" id="watch-map"
+                ref="mapRef" />
             </div>
 
             <surveillance class="watch-video" v-show="chooseBot === 'surveillance'" />
@@ -81,51 +77,39 @@
       <div class="event-detail" v-show="visible">
         <resPonseShowModal @cancel-icon="handleshowModal" />
       </div>
+      <legend1 v-show="chooseBot != 'tunnel' && chooseBot != 'surveillance'" @layer-toggle="handleLayerToggle"
+        :choose-bot="chooseBot"></legend1>
+
 
-      <div class="lanyer" v-show="chooseBot != 'tunnel' && chooseBot != 'surveillance'">
-        <div>
-          <img src="/src/assets/highScore/mapIcon1.png" />
-          图例名称
-        </div>
-        <div v-for="item in layerList" :key="item.id" class="custom-checkbox">
-          <label>
-            <input type="checkbox" :checked="item.show" @change="handleLayer(item.layerName)" />
-            <img :src="item.url" />
-            <span>{{ item.name }}</span>
-          </label>
-        </div>
-      </div>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-  import { ref, onMounted } from 'vue';
-  import { BaiduMap } from '@antv/l7-maps';
-  import { Scene, LineLayer, PointLayer } from '@antv/l7';
-
-  import { useRouter } from 'vue-router';
-  const router = useRouter();
-  import LeftList from './container/containerLeft.vue';
-  import rightList from './container/containerright.vue';
-  import resPonseLeftList from '../emergencyResponse/container/containerLeft.vue';
-  import resPonserightList from '../emergencyResponse/container/containerright.vue';
-  import resPonseShowModal from '../emergencyResponse/container/showModal.vue';
-  import chargerightList from '../chargeMonitoring/container/containerright.vue';
-  import chargeLeftList from '../chargeMonitoring/container/containerLeft.vue';
-  import holidaysrightList from '../holidays/container/containerright.vue';
-  import holidaysLeftList from '../holidays/container/containerLeft.vue';
-  import dataVisualizationrightList from '../dataVisualization/container/containerright.vue';
-  import dataVisualizationLeftList from '../dataVisualization/container/containerLeft.vue';
-  import surveillancerightList from '../video/container/containerright.vue';
-  import surveillanceLeftList from '../video/container/containerLeft.vue';
-  import surveillance from '../video/container/index.vue';
-  import MapContainer from '../../../components/MapContainer/index.vue';
-  import tunnel from '../tunnelMonitoring/container/index.vue';
-  import bottom from './container/bottom.vue';
-  import {
-    lineLayerData,
-    lineLayerData1,
-    lineLayerData2,
+import { ref, onMounted } from 'vue';
+import { BaiduMap } from '@antv/l7-maps';
+import { Scene, LineLayer, PointLayer } from '@antv/l7';
+
+import { useRouter } from 'vue-router';
+const router = useRouter();
+import LeftList from './container/containerLeft.vue';
+import rightList from './container/containerright.vue';
+import resPonseLeftList from '../emergencyResponse/container/containerLeft.vue';
+import resPonserightList from '../emergencyResponse/container/containerright.vue';
+import resPonseShowModal from '../emergencyResponse/container/showModal.vue';
+import chargerightList from '../chargeMonitoring/container/containerright.vue';
+import chargeLeftList from '../chargeMonitoring/container/containerLeft.vue';
+import holidaysrightList from '../holidays/container/containerright.vue';
+import holidaysLeftList from '../holidays/container/containerLeft.vue';
+import dataVisualizationrightList from '../dataVisualization/container/containerright.vue';
+import dataVisualizationLeftList from '../dataVisualization/container/containerLeft.vue';
+import surveillancerightList from '../video/container/containerright.vue';
+import surveillanceLeftList from '../video/container/containerLeft.vue';
+import surveillance from '../video/container/index.vue';
+import MapContainer from '../../../components/MapContainer/index.vue';
+import tunnel from '../tunnelMonitoring/container/index.vue';
+import bottom from './container/bottom.vue';
+import legend1 from '../../../components/Legend/index.vue';
+import {
   pointData,
   responseData,
   chargeAddLayer1,
@@ -136,36 +120,36 @@
   dailyAddLayer2,
   dailyAddLayer3,
   dailyAddLayer4,
-  } from './test';
-  const scene = ref();
-  const chooseBot = ref('monitoring');
-  const visible = ref<boolean>(false);
-  const imageLayerRef = ref(null);
-  const isImageAdded = ref<boolean>(false); // 标记图片资源是否已添加
-  const showMapInfo = ref<boolean>(false);
-  const time = ref('');
-  let timer;
-  const action = ref<'map' | 'watch'>('map');
-  const componentLeft = {
+} from './test';
+const scene = ref();
+const chooseBot = ref('monitoring');
+const visible = ref<boolean>(false);
+const imageLayerRef = ref(null);
+const isImageAdded = ref<boolean>(false); // 标记图片资源是否已添加
+const showMapInfo = ref<boolean>(false);
+const time = ref('');
+let timer;
+const action = ref<'map' | 'watch'>('map');
+const componentLeft = {
   response: resPonseLeftList,
   monitoring: LeftList,
   charge: chargeLeftList,
   holidays: holidaysLeftList,
   dataChart: dataVisualizationLeftList,
   surveillance: surveillanceLeftList,
-  };
-  const componentRight = {
+};
+const componentRight = {
   response: resPonserightList,
   monitoring: rightList,
   charge: chargerightList,
   holidays: holidaysrightList,
   dataChart: dataVisualizationrightList,
   surveillance: surveillancerightList,
-  };
-  const getImageUrl = imagePath => {
+};
+const getImageUrl = imagePath => {
   return new URL(`/src/${imagePath}`, import.meta.url).href;
 };
-  function getDate() {
+function getDate() {
   const weeks = ['天', '一', '二', '三', '四', '五', '六'];
   const now = new Date();
   const year = now.getFullYear();
@@ -189,271 +173,80 @@
   );
   const time = fn(year, month, day, weeks[week], hours, minutes, seconds);
   return time;
-  }
-  timer = setInterval(() => {
+}
+timer = setInterval(() => {
   time.value = getDate();
-  }, 1000);
-
-  const layerList = ref<
-    {
-      id: number;
-      layerName: string;
-      name: string;
-      show: boolean;
-      url: string;
-    }[]
-  >([
-    {
-      id: 1,
-      layerName: 'warnLayer',
-      name: '事件',
-      show: true,
-      url: new URL('@/assets/highScore/warnicon1.png', import.meta.url).href,
-    },
-    {
-      id: 2,
-      layerName: 'peopleLayer',
-      name: '设备',
-      show: true,
-      url: new URL('@/assets/highScore/equipment.png', import.meta.url).href,
-    },
-    {
-      id: 3,
-      layerName: 'carLayer',
-      name: '车辆',
-      show: true,
-      url: new URL('@/assets/highScore/caricon.png', import.meta.url).href,
-    },
-    {
-      id: 4,
-      layerName: 'materialsLayer',
-      name: '应急设施',
-      show: true,
-      url: new URL('@/assets/highScore/Materialsicon.png', import.meta.url).href,
-    },
-  ]);
-  const showModal = () => {
+}, 1000);
+
+const showModal = () => {
   visible.value = true;
-  };
-  const changeModal = () => {
+};
+const changeModal = () => {
   visible.value = false;
-  };
+};
 
-  const handleshowModal = (e) => {
+const handleshowModal = (e) => {
   visible.value = e;
-  };
+};
+const mapRef = ref();
+const handleLayerToggle = ({ layerName, show }: { layerName: string; show: boolean; }) => {
+  console.log(`图层 ${layerName} 状态变为: ${show ? '显示' : '隐藏'}`);
+  mapRef.value.setLayerVisible(layerName,show);
+};
 
-  // 底部导航栏
-  const handleIconSelected = (id) => {
+// 底部导航栏
+const handleIconSelected = (id) => {
   changeModal();
   chooseBot.value = id;
   console.log('Received ID:', chooseBot);
-    // if (chooseBot.value == 'response') {
-    //   responseAdddLayer();
-    // } else if (chooseBot.value == 'charge') {
-    //   Object.values(chargeAddLayer).forEach((method) => {
-    //     if (typeof method === 'function') {
-    //       method();
-    //     }
-    //   });
-    // } else if (chooseBot.value == 'tunnel') {
-    //   // router.push('/highScore/tunnelMonitoring');
-    // } else if (chooseBot.value == 'holidays') {
-    //   Object.values(chargeAddLayer).forEach((method) => {
-    //     if (typeof method === 'function') {
-    //       method();
-    //     }
-    //   });
-    //   showMapInfo.value = true;
-    // } else {
-    //   showMapInfo.value = false;
-    //   removeImageLayer();
-    // }
-  };
-
-  // 路线图层
-  const adddLayer = {
-    // 线路
-    lineLayer() {
-      const lineLayer = new LineLayer({
-        name: 'lineLayer',
-        visible: true,
-      })
-        .source(lineLayerData)
-        .size(5)
-        .color('color')
-        .style({
-          opacity: 1,
-        });
-      scene.value.addLayer(lineLayer);
-    },
-    lineLayer1() {
-      const lineLayer = new LineLayer({
-        name: 'lineLayer',
-        visible: true,
-      })
-        .source(lineLayerData1)
-        .size(5)
-        .color('color')
-        .style({
-          opacity: 1,
-        });
-      scene.value.addLayer(lineLayer);
-    },
-    lineLayer2() {
-      const lineLayer = new LineLayer({
-        name: 'lineLayer',
-        visible: true,
-      })
-        .source(lineLayerData2)
-        .size(5)
-        .style({
-          opacity: 1,
-          sourceColor: '#00887f',
-          targetColor: '#00887f',
-          linearDir: 'horizontal',
-        });
-      scene.value.addLayer(lineLayer);
-    },
-
-    //名字
-    nameLayer() {
-      const layer = new PointLayer()
-        .source(pointData.features, {
-          parser: {
-            type: 'json',
-            x: 'j',
-            y: 'w',
-          },
-        })
-        .shape('square')
-        .color('backgoundColor')
-        .size(65);
-      scene.value.addLayer(layer);
-
-      const textLayer = new PointLayer({})
-        .source(pointData.features, {
-          parser: {
-            type: 'json',
-            x: 'j',
-            y: 'w',
-          },
-        })
-        .shape('m', 'text')
-        .size(40)
-        .color('black')
-        .style({
-          textAnchor: 'center',
-          textOffset: [2, -5],
-          spacing: 2,
-          padding: [1, 1],
-          stroke: '#ffffff',
-          strokeWidth: 0.3,
-          strokeOpacity: 1.0,
-          fontFamily: 'Times New Roman',
-          textAllowOverlap: true,
-        });
-      scene.value.addLayer(textLayer);
-    },
-  };
+};
 
-  //日常监控图层
-  const dailyAddLayer = {
-    //事件
-    addLayer1() {
-      scene.value.addImage('addLayer1', new URL('@/assets/highScore/eventLanyer.png', import.meta.url).href);
-      const addLayer1 = new PointLayer({
-        name: 'addLayer1',
+// 事件图层配置
+const warnLayerConfig = {
+  id: 'warn-layer',
+  type: 'warn',
+  data: dailyAddLayer1,
+  style: {
+    size: 120,
     zIndex: 2,
-      })
-        .source(dailyAddLayer1, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer1')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer1);
   },
+};
 
-    //设备
-    addLayer2() {
-      scene.value.addImage('addLayer2', new URL('@/assets/highScore/equipmentLanyer.png', import.meta.url).href);
-      const addLayer2 = new PointLayer({
-        name: 'addLayer2',
+// 设备图层配置
+const equipmentLayerConfig = {
+  id: 'equipment-layer',
+  type: 'equipment',
+  data: dailyAddLayer2,
+  style: {
+    size: 120,
     zIndex: 2,
-      })
-        .source(dailyAddLayer2, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer2')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer2);
   },
+};
 
-    //车辆
-    addLayer3() {
-      scene.value.addImage('addLayer3', new URL('@/assets/highScore/carLanyer.png', import.meta.url).href);
-      const addLayer3 = new PointLayer({
-        name: 'addLayer3',
+// 车辆图层配置
+const carLayerConfig = {
+  id: 'car-layer',
+  type: 'car',
+  data: dailyAddLayer3,
+  style: {
+    size: 120,
     zIndex: 2,
-      })
-        .source(dailyAddLayer3, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer3')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer3);
   },
+};
 
-    //应急设施
-    addLayer4() {
-      scene.value.addImage('addLayer4', new URL('@/assets/highScore/emergencyLanyer.png', import.meta.url).href);
-      const addLayer4 = new PointLayer({
-        name: 'addLayer4',
+// 应急措施图层配置
+const emergencyLayerConfig = {
+  id: 'emergency-layer',
+  type: 'emergency',
+  data: dailyAddLayer4,
+  style: {
+    size: 120,
     zIndex: 2,
-      })
-        .source(dailyAddLayer4, {
-          parser: {
-            type: 'json',
-            x: 'lng',
-            y: 'lat',
-          },
-        })
-        .shape('addLayer4')
-        .size(88)
-        .style({
-          offsets: [0, 20],
-          raisingHeight: 10,
-        });
-      scene.value.addLayer(addLayer4);
   },
-  };
+};
 
-  //收费监控图层
-  const chargeAddLayer = {
+//收费监控图层
+const chargeAddLayer = {
   addLayer1() {
     scene.value.addImage('addLayer1', new URL('@/assets/highScore/charge/LayerIcon.png', import.meta.url).href);
     const addLayer1 = new PointLayer({
@@ -541,10 +334,10 @@
       });
     scene.value.addLayer(addLayer4);
   },
-  };
+};
 
-  //应急处理图层
-  const responseAdddLayer = () => {
+//应急处理图层
+const responseAdddLayer = () => {
   if (!isImageAdded.value) {
     scene.value.addImage('response', new URL('@/assets/highScore/record/event.png', import.meta.url).href);
     isImageAdded.value = true;
@@ -576,47 +369,30 @@
     });
   console.log('2222');
   scene.value.addLayer(imageLayerRef.value);
-  };
+};
 
-  const removeImageLayer = () => {
+const removeImageLayer = () => {
   if (imageLayerRef.value) {
     scene.value.removeLayer(imageLayerRef.value);
     imageLayerRef.value = null; // 重置引用
   }
-  };
-  onMounted(() => {
-    // router.push('/highScore/dailyMonitoring');
-    scene.value = new Scene({
-      id: 'watch-map',
-      map: new BaiduMap({
-        center: [106.5488177260367, 29.58682303545917],
-        zoom: 30,
-        style: '344b005fd5b4220a55241c25e7733e81',
-        logoVisible: false,
-      }),
-    });
-    Object.values(adddLayer).forEach((method) => {
-      if (typeof method === 'function') {
-        method();
-      }
-    });
+};
+onMounted(() => {
 
-    Object.values(dailyAddLayer).forEach((method) => {
-      if (typeof method === 'function') {
-        method();
-      }
-    });
-  });
+
+});
 </script>
 <style lang="less" scoped>
-  @import './dailyMonitoring.less';
-  .watch-bottom {
+@import './dailyMonitoring.less';
+
+.watch-bottom {
   z-index: 9999 !important;
   position: absolute;
   bottom: 3%;
   left: 35%;
-  }
-  .lanyer {
+}
+
+.lanyer {
   padding: 30px 0 0 20px;
   width: 500.34px;
   height: 550.65px;
@@ -626,23 +402,29 @@
   bottom: 20%;
   right: 18%;
   background: url('@/assets/highScore/lanyerBg.png') no-repeat 0 0/100% 100%;
+
   div {
     font-size: 40px;
   }
+
   .custom-checkbox {
-      margin: 30px 0 20px 80px; /* 调整间距 */
+    margin: 30px 0 20px 80px;
+    /* 调整间距 */
   }
 
   .custom-checkbox img {
     width: 50px;
     height: 50px;
   }
+
   .custom-checkbox label {
     display: flex;
     align-items: center;
-      gap: 25px; /* 调整图标和文字的间距 */
+    gap: 25px;
+    /* 调整图标和文字的间距 */
     cursor: pointer;
   }
+
   .custom-checkbox input[type='checkbox'] {
     width: 40px;
     height: 40px;
@@ -653,8 +435,9 @@
     color: white;
     font-size: 36px;
   }
-  }
-  .time {
+}
+
+.time {
   width: 898px;
   height: 88px;
   font-family:
@@ -668,31 +451,37 @@
   position: absolute;
   right: 1%;
   top: 53%;
+
   span {
     font-size: 66px;
   }
-  }
-  .event-detail {
+}
+
+.event-detail {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 9999;
-  }
-  .flipped {
+}
+
+.flipped {
   transform: rotate(180deg);
   transition: transform 0.3s ease;
-  }
-  .watch-mode {
+}
+
+.watch-mode {
   width: 100%;
   height: 100%;
   padding: 50px 150px;
   display: flex;
+
   .watch-left,
   .watch-right {
     width: 25%;
     height: 100%;
   }
+
   .control-top {
     width: 30vmin;
     height: 8%;
@@ -706,6 +495,7 @@
     z-index: 999;
     background: url(/src/assets/coordinated/tcBg1.png) no-repeat 0 0 / 100% 100%;
   }
+
   .control {
     width: 80vmin;
     height: 10vmin;
@@ -718,9 +508,11 @@
     align-items: center;
     z-index: 999;
     background: url('@/assets/coordinated/tcBg.png') no-repeat 0 0/100% 100%;
+
     .layer {
       margin: 0 10px;
       font-size: 18px;
+
       img {
         width: 20px;
         height: 20px;
@@ -729,11 +521,13 @@
       }
     }
   }
+
   .watch-center {
     flex: 1;
     margin-right: 10px;
     margin-top: 30px;
     position: relative;
+
     .map-select {
       width: 114px;
       height: 877px;
@@ -744,13 +538,16 @@
       position: absolute;
       top: 3%;
       left: 2%;
+
       img {
         margin-top: 45%;
       }
     }
+
     .map-data {
       height: 80%;
       position: relative;
+
       .watch-video {
         position: absolute;
         top: -6%;
@@ -758,35 +555,42 @@
         width: 130%;
         height: 120%;
       }
+
       .info-map {
         display: flex;
         z-index: 9998 !important;
         position: absolute;
         top: 10%;
         left: 23%;
+
         .info1 {
           width: 1300px;
           height: 200px;
           background: url('@/assets/highScore/holidays/mapInfoBg.png') no-repeat 0 0/100% 100%;
         }
+
         .title {
           display: flex;
           justify-content: space-evenly;
           text-align: left;
           padding: 2% 0 0 0;
+
           div {
             font-weight: 500;
             font-size: 34px;
             color: #ffffff;
           }
         }
+
         .num {
           display: flex;
           justify-content: space-evenly;
+
           div {
             font-weight: 500;
             font-size: 34px;
             color: #ffffff;
+
             span {
               width: 200px;
               height: 200px;
@@ -797,6 +601,7 @@
           }
         }
       }
+
       .data {
         position: absolute;
         top: 10px;
@@ -805,11 +610,13 @@
         height: 57vmin;
         padding: 10px 0;
         background-color: rgba(31, 67, 101, 0.8);
+
         .item {
           display: flex;
           flex-direction: column;
           align-items: center;
           margin-bottom: 10px;
+
           .data-value {
             width: 6.5vmin;
             height: 6.5vmin;
@@ -819,18 +626,21 @@
             text-align: center;
             background: url('@/assets/images/watch/circle-bg.png') no-repeat 0 0/100% 100%;
           }
+
           .data-name {
             font-size: 14px;
           }
         }
       }
     }
+
     .car-statistics {
       margin-top: 2px;
       width: 100%;
       height: 28vmin;
       padding: 0 10px;
       background-color: rgba(6, 30, 72, 0.8);
+
       .title {
         height: 40px;
         line-height: 40px;
@@ -840,6 +650,7 @@
         color: #84caff;
         background: url('@/assets/images/watch/title-bg.png') no-repeat 0 0/100% 100%;
       }
+
       .content {
         display: flex;
         justify-content: space-between;
@@ -847,14 +658,18 @@
         height: 25vmin;
         padding: 1%;
         box-sizing: border-box;
+
         .left {
           margin-right: 10px;
+
           .car {
             display: flex;
             margin-bottom: 25px;
+
             img {
               height: 6vmin;
             }
+
             .name {
               min-width: 22vmin;
               height: 3.5vmin;
@@ -863,10 +678,12 @@
               background-color: rgba(31, 61, 84, 0.7);
               margin-bottom: 10px;
             }
+
             .value {
               color: #91bcf3;
               font-weight: 600;
               font-size: 18px;
+
               .unit {
                 color: #fff;
                 font-size: 12px;
@@ -875,6 +692,7 @@
             }
           }
         }
+
         .right {
           .right-title {
             width: 19vmin;
@@ -883,6 +701,7 @@
             text-align: center;
             background: url('@/assets/images/watch/statistics3.png') no-repeat 0 0/100% 100%;
           }
+
           #percent-chart {
             width: 60vmin;
             height: 19vmin;
@@ -891,5 +710,5 @@
       }
     }
   }
-  }
+}
 </style>

src/views/highScore/dailyMonitoring/test.ts

@@ -4,11 +4,15 @@ export const lineLayerData = {
     {
       geometry: {
         coordinates: [
-          [106.548357837707, 29.58680219459827, 3],
-          [106.5484601219108, 29.58680682983413, 3],
-          [106.5484601219108, 29.58680682983413, 3],
-          [106.5485623058675, 29.58681146052703, 3],
-          [106.5486644902761, 29.58681609124043, 3],
+          [106.540, 29.580, 3],
+          [106.542, 29.581, 3],
+          [106.544, 29.582, 3],
+          [106.546, 29.583, 3],
+          [106.548, 29.584, 3],
+          [106.550, 29.585, 3],
+          [106.552, 29.586, 3],
+          [106.554, 29.587, 3],
+          [106.556, 29.588, 3]
         ],
         type: 'LineString',
       },
@@ -16,22 +20,20 @@ export const lineLayerData = {
         color: '#ffff00', // 黄色
         UserID: 0,
         z: 3,
+        width: 5 // 增加线宽
       },
       type: 'Feature',
     },
-
     {
       geometry: {
         coordinates: [
-          [106.5486644902761, 29.58681609124043, 3],
-          [106.5488177260367, 29.58682303545917, 3],
-          [106.5489199317008, 29.5868276671358, 3],
-          [106.5490220371176, 29.58683229426947, 3],
-          [106.5490730902784, 29.58683460785685, 3],
-          [106.5490730902784, 29.58683660785685, 3],
-          [106.5490730902784, 29.58683860785685, 3],
-          [106.5490730902784, 29.58684060785685, 3],
-          [106.5490730902784, 29.58684260785685, 3],
+          [106.556, 29.588, 3],
+          [106.558, 29.589, 3],
+          [106.560, 29.590, 3],
+          [106.562, 29.591, 3],
+          [106.564, 29.592, 3],
+          [106.566, 29.593, 3],
+          [106.568, 29.594, 3]
         ],
         type: 'LineString',
       },
@@ -39,49 +41,53 @@ export const lineLayerData = {
         color: 'red',
         UserID: 0,
         z: 3,
+        width: 5 // 增加线宽
       },
       type: 'Feature',
     },
   ],
 };
+
 export const lineLayerData1 = {
   type: 'FeatureCollection',
   features: [
     {
       geometry: {
         coordinates: [
-          [106.5472909339584, 29.58596744065201, 3],
-          [106.5472909339584, 29.58616744065201, 3],
-          [106.5472909339584, 29.58636744065201, 3],
+          [106.540, 29.595, 3],
+          [106.545, 29.595, 3],
+          [106.550, 29.595, 3],
+          [106.555, 29.595, 3],
+          [106.560, 29.595, 3],
+          [106.565, 29.595, 3],
+          [106.570, 29.595, 3]
         ],
-        // type: "LineString"
         type: 'LineString',
       },
       properties: {
         color: '#ffff00', // 黄色
         UserID: 0,
         z: 3,
+        width: 5
       },
       type: 'Feature',
     },
     {
       geometry: {
         coordinates: [
-          [106.5472909339584, 29.58636744065201, 3],
-          [106.5472909439584, 29.58666744065201, 3],
-          [106.5472509439584, 29.58696744065201, 3],
-          [106.5472609339584, 29.58726744065201, 3],
-          [106.5472909339584, 29.58746744065201, 3],
-          [106.5472909339584, 29.58766744065201, 3],
-          [106.5472909339584, 29.58776744065201, 3],
+          [106.570, 29.595, 3],
+          [106.570, 29.590, 3],
+          [106.570, 29.585, 3],
+          [106.570, 29.580, 3],
+          [106.570, 29.575, 3]
         ],
-        // type: "LineString"
         type: 'LineString',
       },
       properties: {
         color: 'red',
         UserID: 0,
         z: 3,
+        width: 5
       },
       type: 'Feature',
     },
@@ -94,29 +100,40 @@ export const lineLayerData2 = {
     {
       geometry: {
         coordinates: [
-          [106.5486909339584, 29.58556744065201, 3],
-          [106.5484909339584, 29.58596744065201, 3],
-          [106.5484909339584, 29.58616744065201, 3],
-          [106.5484909339584, 29.58636744065201, 3],
-          [106.5484909339584, 29.58666744065201, 3],
-          [106.5484909339584, 29.58696744065201, 3],
-          [106.5484909339584, 29.58676744065201, 3],
-          [106.5484909339584, 29.58686744065201, 3],
-          [106.5484909339584, 29.58696744065201, 3],
-          [106.5484909339584, 29.58706744065201, 3],
-          [106.5484909339584, 29.58716744065201, 3],
-          [106.5484909339584, 29.58726744065201, 3],
-          [106.5484909339584, 29.58746744065201, 3],
-          [106.5484909339584, 29.58756744065201, 3],
-          [106.5484909339584, 29.58766744065201, 3],
-          [106.5484909339584, 29.58776744065201, 3],
+          [106.545, 29.580, 3],
+          [106.550, 29.585, 3],
+          [106.555, 29.590, 3],
+          [106.560, 29.595, 3],
+          [106.565, 29.600, 3],
+          [106.570, 29.605, 3],
+          [106.575, 29.610, 3]
+        ],
+        type: 'LineString',
+      },
+      properties: {
+        color: '#00ff00', // 绿色
+        UserID: 0,
+        z: 3,
+        width: 8 // 更宽的线
+      },
+      type: 'Feature',
+    },
+    {
+      geometry: {
+        coordinates: [
+          [106.575, 29.610, 3],
+          [106.570, 29.615, 3],
+          [106.565, 29.620, 3],
+          [106.560, 29.625, 3],
+          [106.555, 29.630, 3]
         ],
-        // type: "LineString"
         type: 'LineString',
       },
       properties: {
+        color: '#0000ff', // 蓝色
         UserID: 0,
         z: 3,
+        width: 8
       },
       type: 'Feature',
     },
@@ -127,136 +144,134 @@ export const pointData = {
   type: 'FeatureCollection',
   features: [
     {
-      w: 29.58596744065201,
+      w: 29.54702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5484909339584,
+      j: 106.6812177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58596744065201,
+      w: 29.60702303545917,
       t: 24.6,
       l: 11,
-      m: 'G241',
-      j: 106.5472909339584,
+      m: 'G234',
+      j: 106.6812177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58798044065201,
+      w: 29.60702303545917,
       t: 24.6,
       l: 11,
-      m: 'G241',
-      j: 106.5472909339584,
+      m: 'G234',
+      j: 106.6312177260367,
       h: '59838',
       backgoundColor: 'red',
     },
-
     {
-      w: 29.58648044065201,
+      w: 29.65702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5468909339584,
+      j: 106.6022177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58728044065201,
+      w: 29.65702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5478909339584,
+      j: 106.5622177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58768044065201,
+      w: 29.63702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5479909339584,
+      j: 106.5822177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58608044065201,
+      w: 29.58702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5490909339584,
+      j: 106.6022177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58668044065201,
+      w: 29.55702303545917,
       t: 24.6,
       l: 11,
       m: 'G234',
-      j: 106.5489909339584,
+      j: 106.6022177260367,
       h: '59838',
       backgoundColor: 'red',
     },
     {
-      w: 29.58650044065201,
+      w: 29.65702303545917,
       t: 24.6,
       l: 11,
-      m: 'x456',
-      j: 106.5476909339584,
+      m: 'G234',
+      j: 106.4822177260367,
       h: '59838',
-      backgoundColor: 'skyblue',
+      backgoundColor: 'red',
     },
     {
-      w: 29.58682044065201,
+      w: 29.62702303545917,
       t: 24.6,
       l: 11,
       m: 'x456',
-      j: 106.5480909339584,
+      j: 106.5222177260367,
       h: '59838',
       backgoundColor: 'skyblue',
     },
     {
-      w: 29.58742044065201, //上下，大是越上
+      w: 29.60702303545917,
       t: 24.6,
       l: 11,
       m: 'x456',
-      j: 106.5486909339584, //左右，大是往右偏
+      j: 106.5822177260367,
       h: '59838',
       backgoundColor: 'skyblue',
     },
     {
-      w: 29.58672044065201,
+      w: 29.62702303545917,
       t: 24.6,
       l: 11,
       m: 'x456',
-      j: 106.5494909339584,
+      j: 106.6222177260367,
       h: '59838',
       backgoundColor: 'skyblue',
     },
 
     {
-      w: 29.58582044065201,
+      w: 29.56702303545917,
       t: 24.6,
       l: 11,
       m: 'x456',
-      j: 106.5492909339584,
+      j: 106.5622177260367,
       h: '59838',
       backgoundColor: 'skyblue',
     },
-
     {
-      w: 29.58722044065201,
+      w: 29.56702303545917,
       t: 24.6,
       l: 11,
       m: 'x456',
-      j: 106.5498909339584,
+      j: 106.5622177260367,
       h: '59838',
       backgoundColor: 'skyblue',
     },
     {
-      w: 29.58742044065201,
+      w: 29.53742044065201,
       t: 24.6,
       l: 11,
       m: 'x456',
@@ -265,83 +280,74 @@ export const pointData = {
       backgoundColor: 'skyblue',
     },
     {
-      w: 29.58742044065201,
-      t: 24.6,
-      l: 11,
-      m: 'S234',
-      j: 106.55072909339584,
-      h: '59838',
-      backgoundColor: 'yellow',
-    },
-    {
-      w: 29.58762044065201,
+      w: 29.59702303545917,
       t: 24.6,
       l: 11,
-      m: 'S234',
-      j: 106.55122909339584,
+      m: 'x456',
+      j: 106.5022177260367,
       h: '59838',
-      backgoundColor: 'yellow',
+      backgoundColor: 'skyblue',
     },
     {
-      w: 29.58662044065201,
+      w: 29.57702303545917,
       t: 24.6,
       l: 11,
-      m: 'S234',
-      j: 106.55122909339584,
+      m: 'x456',
+      j: 106.4822177260367,
       h: '59838',
-      backgoundColor: 'yellow',
+      backgoundColor: 'skyblue',
     },
     {
-      w: 29.58682044065201,
+      w: 29.62702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5498909339584,
+      j: 106.4822177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
     {
-      w: 29.58662044065201,
+      w: 29.60702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5496909339584,
+      j: 106.462177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
     {
-      w: 29.58762044065201,
+      w: 29.54702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5498909339584,
+      j: 106.462177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
     {
-      w: 29.58792044065201,
+      w: 29.52702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5496909339584,
+      j: 106.442177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
     {
-      w: 29.58792044065201,
+      w: 29.56702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5500909339584,
+      j: 106.522177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
     {
-      w: 29.58792044065201,
+      w: 29.56702303545917,
       t: 24.6,
       l: 11,
       m: 'S234',
-      j: 106.5480909339584,
+      j: 106.542177260367,
       h: '59838',
       backgoundColor: 'yellow',
     },
@@ -620,46 +626,54 @@ export const chargeAddLayer4 = [
 
 export const dailyAddLayer1 = [
   {
-    lng: 106.5509177260367, // 中心点经度
-    lat: 29.58742303545917, // 中心点纬度
+    lng: 106.5509177260367,
+    lat: 29.62742303545917, 
+  },
+  {
+    lng: 106.4309177260367, 
+    lat: 29.63942303545917,
   },
 ];
 
 export const dailyAddLayer2 = [
   {
-    lng: 106.5509177260367, // 中心点经度
-    lat: 29.58622303545917, // 中心点纬度
+    lng: 106.6089177260367, 
+    lat: 29.52922303545917, 
   },
   {
-    lng: 106.5509177260367, // 中心点经度
-    lat: 29.58622303545917, // 中心点纬度
+    lng: 106.6689177260367, 
+    lat: 29.51522303545917, 
+  },
+  {
+    lng: 106.4889177260367, 
+    lat: 29.53922303545917, 
   },
 ];
 
 //车辆
 export const dailyAddLayer3 = [
   {
-    lng: 106.5509177260367, // 中心点经度
-    lat: 29.58712303545917, // 中心点纬度
+    lng: 106.6509177260367,
+    lat: 29.58712303545917, 
   },
   {
-    lng: 106.5469177260367, // 中心点经度
-    lat: 29.58712303545917, // 中心点纬度
+    lng: 106.4069177260367, 
+    lat: 29.57712303545917,
   },
   {
-    lng: 106.5469177260367, // 中心点经度
-    lat: 29.58602303545917, // 中心点纬度
+    lng: 106.4269177260367, 
+    lat: 29.50712303545917,
   },
 ];
 
 //应急设施
 export const dailyAddLayer4 = [
   {
-    lng: 106.5512177260367, // 中心点经度
-    lat: 29.58702303545917, // 中心点纬度
+    lng: 106.7012177260367, 
+    lat: 29.57702303545917, 
   },
   {
-    lng: 106.5505177260367, // 中心点经度
-    lat: 29.58682303545917, // 中心点纬度
+    lng: 106.6312177260367, 
+    lat: 29.55702303545917, 
   },
 ];