From 5be9679fb4288936b576cf3d1f1548af1c4151b8 Mon Sep 17 00:00:00 2001
From: feiyu02 <risaku@163.com>
Date: 星期一, 21 七月 2025 15:31:21 +0800
Subject: [PATCH] 2025.7.21 任务管理-监管地图功能（待完成）
---
src/components/map/SceneMap.vue | 99 ++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 88 insertions(+), 11 deletions(-)
diff --git a/src/components/map/SceneMap.vue b/src/components/map/SceneMap.vue
index 7994a7f..fe296bd 100644
--- a/src/components/map/SceneMap.vue
+++ b/src/components/map/SceneMap.vue
@@ -1,8 +1,17 @@
<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>
</template>
<script setup>
-import { watch } from 'vue';
+import { ref, watch } from 'vue';
import { map, onMapMounted } from '@/utils/map/index';
import marks from '@/utils/map/marks';
import { sceneIcon } from '@/assets/scene-icon';
@@ -11,32 +20,100 @@
data: Array
});
-var markViewList = [];
+let allMarkViews = [];
+let markViewList = [];
+
+const scenetype = ref();
watch(
() => props.data,
(nV, oV) => {
if (nV != oV) {
- drawSceneMarks();
+ clearSceneMarks();
+ createSceneMarks();
+ filterMarkViews();
}
},
{ immediate: true }
);
-function drawSceneMarks() {
+watch(scenetype, (nV, oV) => {
+ if (nV != oV) {
+ clearSceneMarks();
+ 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() {
+ onMapMounted(() => {
+ if (scenetype.value == undefined) {
+ markViewList = allMarkViews;
+ } else {
+ markViewList = allMarkViews.filter((v) => {
+ return (
+ scenetype.value.value == null ||
+ v.getExtData().typeid + '' == scenetype.value.value
+ );
+ });
+ }
+ map.add(markViewList);
+ setTimeout(() => {
+ map.setFitView(markViewList);
+ }, 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;
+}
+</style>
--
Gitblit v1.9.3