From 0796eebe3520fafb0ac5d36ee584af81506d7e9c Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期六, 20 九月 2025 14:05:52 +0800
Subject: [PATCH] 2025.9.20 数据产品（待完成）
---
src/components/map/SceneMap.vue | 91 ++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 80 insertions(+), 11 deletions(-)
diff --git a/src/components/map/SceneMap.vue b/src/components/map/SceneMap.vue
index fe296bd..3abe4c6 100644
--- a/src/components/map/SceneMap.vue
+++ b/src/components/map/SceneMap.vue
@@ -9,11 +9,30 @@
></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 { ref, 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({
// 鍦烘櫙鐐逛綅淇℃伅
@@ -25,13 +44,24 @@
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) {
clearSceneMarks();
createSceneMarks();
- filterMarkViews();
+ filterMarkViews(true);
}
},
{ immediate: true }
@@ -40,9 +70,21 @@
watch(scenetype, (nV, oV) => {
if (nV != oV) {
clearSceneMarks();
- filterMarkViews();
+ 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(() => {
@@ -64,15 +106,15 @@
content: ''
// direction: 'bottom'
});
- _extData._show = false
- ev.target.setExtData(_extData)
+ _extData._show = false;
+ ev.target.setExtData(_extData);
} else {
ev.target.setLabel({
content: _extData.name
// direction: 'bottom'
});
- _extData._show = true
- ev.target.setExtData(_extData)
+ _extData._show = true;
+ ev.target.setExtData(_extData);
}
});
allMarkViews.push(mark);
@@ -83,8 +125,11 @@
/**
* 绛涢�夋墍閫夌被鍨嬬殑鍦烘櫙
*/
-function filterMarkViews() {
+function filterMarkViews(setFitView) {
onMapMounted(() => {
+ if (markViewList.length > 0) {
+ map.remove(markViewList);
+ }
if (scenetype.value == undefined) {
markViewList = allMarkViews;
} else {
@@ -95,10 +140,23 @@
);
});
}
+ markViewList = markViewList.filter((v) => {
+ const _index = selectedSceneList.value.findIndex((s) => {
+ return s.guid == v.getExtData().guid && s._checked;
+ });
+ return _index != -1;
+ });
map.add(markViewList);
- setTimeout(() => {
- map.setFitView(markViewList);
- }, 1000);
+ if (setFitView) {
+ setTimeout(() => {
+ map.setFitView(markViewList);
+ // const list = markViewList.map((v) => {
+ // const _extData = v.getExtData();
+ // return [_extData.longitude, _extData.latitude];
+ // });
+ // mapUtil.setBound(list);
+ }, 1000);
+ }
});
}
@@ -116,4 +174,15 @@
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