From bf42ef43fccdf3d3486eec84ad4073b0c7650aba Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 13 八月 2025 17:35:37 +0800
Subject: [PATCH] 新增场景信息文件导入功能

---
 src/components/map/SceneMap.vue |  168 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 157 insertions(+), 11 deletions(-)

diff --git a/src/components/map/SceneMap.vue b/src/components/map/SceneMap.vue
index 7994a7f..3abe4c6 100644
--- a/src/components/map/SceneMap.vue
+++ b/src/components/map/SceneMap.vue
@@ -1,42 +1,188 @@
 <template>
   <BaseMap></BaseMap>
+  <el-row class="left-top-wrap">
+    <FYOptionScene
+      label=""
+      :allOption="true"
+      :type="2"
+      v-model:value="scenetype"
+    ></FYOptionScene>
+    <slot name="left-top"></slot>
+  </el-row>
+  <!-- <el-row class="right-wrap">
+    <el-col :span="4">
+      <el-button>close</el-button>
+    </el-col>
+    <el-col :span="20">
+      
+    </el-col>
+  </el-row> -->
+  <el-scrollbar class="right-wrap">
+    <div v-for="s in selectedSceneList" :key="s.guid">
+      <el-checkbox
+        v-model="s._checked"
+        :label="s.name"
+        @change="handleChange(s)"
+      />
+      <!-- <el-text>{{ s.name }}</el-text> -->
+    </div>
+  </el-scrollbar>
 </template>
 <script setup>
-import { watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { map, onMapMounted } from '@/utils/map/index';
 import marks from '@/utils/map/marks';
+import mapUtil from '@/utils/map/util';
 import { sceneIcon } from '@/assets/scene-icon';
 const props = defineProps({
   // 鍦烘櫙鐐逛綅淇℃伅
   data: Array
 });
 
-var markViewList = [];
+let allMarkViews = [];
+let markViewList = [];
+
+const scenetype = ref();
+
+const selectedSceneList = computed(() => {
+  return props.data.filter((v) => {
+    v._checked = true;
+    return (
+      scenetype.value == undefined ||
+      scenetype.value.value == null ||
+      v.typeid + '' == scenetype.value.value
+    );
+  });
+});
 
 watch(
   () => props.data,
   (nV, oV) => {
     if (nV != oV) {
-      drawSceneMarks();
+      clearSceneMarks();
+      createSceneMarks();
+      filterMarkViews(true);
     }
   },
   { immediate: true }
 );
 
-function drawSceneMarks() {
+watch(scenetype, (nV, oV) => {
+  if (nV != oV) {
+    clearSceneMarks();
+    filterMarkViews(true);
+  }
+});
+
+function handleChange(scene) {
+  const mv = markViewList.find((v) => {
+    return scene.guid == v.getExtData().guid;
+  });
+  if (scene._checked) {
+    map.add(mv);
+  } else {
+    map.remove(mv);
+  }
+  // filterMarkViews();
+}
+
+function createSceneMarks() {
   onMapMounted(() => {
-    markViewList = [];
+    allMarkViews = [];
     props.data.forEach((d) => {
+      // 鍒涘缓鍦烘櫙鍦板浘鏍囨敞
       const mark = marks.createMarker({
         position: [d.longitude, d.latitude],
-        icon: sceneIcon(d.typeid),
-        label: d.name,
-        extData: d.guid
+        img: sceneIcon(d.typeid),
+        // label: d.name,
+        extData: d
       });
-      markViewList.push(mark);
+      // 娣诲姞鐐瑰嚮浜嬩欢
+      mark.on('click', (ev) => {
+        const _mark = ev.target;
+        const _extData = _mark.getExtData();
+        if (_extData._show) {
+          ev.target.setLabel({
+            content: ''
+            // direction: 'bottom'
+          });
+          _extData._show = false;
+          ev.target.setExtData(_extData);
+        } else {
+          ev.target.setLabel({
+            content: _extData.name
+            // direction: 'bottom'
+          });
+          _extData._show = true;
+          ev.target.setExtData(_extData);
+        }
+      });
+      allMarkViews.push(mark);
     });
-    map.setFitView(markViewList);
+  });
+}
+
+/**
+ * 绛涢�夋墍閫夌被鍨嬬殑鍦烘櫙
+ */
+function filterMarkViews(setFitView) {
+  onMapMounted(() => {
+    if (markViewList.length > 0) {
+      map.remove(markViewList);
+    }
+    if (scenetype.value == undefined) {
+      markViewList = allMarkViews;
+    } else {
+      markViewList = allMarkViews.filter((v) => {
+        return (
+          scenetype.value.value == null ||
+          v.getExtData().typeid + '' == scenetype.value.value
+        );
+      });
+    }
+    markViewList = markViewList.filter((v) => {
+      const _index = selectedSceneList.value.findIndex((s) => {
+        return s.guid == v.getExtData().guid && s._checked;
+      });
+      return _index != -1;
+    });
+    map.add(markViewList);
+    if (setFitView) {
+      setTimeout(() => {
+        map.setFitView(markViewList);
+        // const list = markViewList.map((v) => {
+        //   const _extData = v.getExtData();
+        //   return [_extData.longitude, _extData.latitude];
+        // });
+        // mapUtil.setBound(list);
+      }, 1000);
+    }
+  });
+}
+
+function clearSceneMarks() {
+  onMapMounted(() => {
+    if (markViewList.length > 0) {
+      map.remove(markViewList);
+    }
   });
 }
 </script>
-<style scoped></style>
+<style scoped>
+.left-top-wrap {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.right-wrap {
+  position: absolute;
+  right: 0px;
+  bottom: 0;
+  height: 50%;
+  background-color: white;
+  border-radius: 4px;
+  padding: 2px 8px;
+  max-width: 300px;
+  box-shadow: var(--el-box-shadow);
+}
+</style>

--
Gitblit v1.9.3