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 | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 111 insertions(+), 4 deletions(-)
diff --git a/src/components/map/SceneMap.vue b/src/components/map/SceneMap.vue
index 60e7038..fe296bd 100644
--- a/src/components/map/SceneMap.vue
+++ b/src/components/map/SceneMap.vue
@@ -1,12 +1,119 @@
<template>
- <div style="width: 70vw; height: 500px; background-color: aliceblue">
- <BaseMap></BaseMap>
- </div>
+ <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 { ref, watch } from 'vue';
+import { map, onMapMounted } from '@/utils/map/index';
+import marks from '@/utils/map/marks';
+import { sceneIcon } from '@/assets/scene-icon';
const props = defineProps({
// 鍦烘櫙鐐逛綅淇℃伅
data: Array
});
+
+let allMarkViews = [];
+let markViewList = [];
+
+const scenetype = ref();
+
+watch(
+ () => props.data,
+ (nV, oV) => {
+ if (nV != oV) {
+ clearSceneMarks();
+ createSceneMarks();
+ filterMarkViews();
+ }
+ },
+ { immediate: true }
+);
+
+watch(scenetype, (nV, oV) => {
+ if (nV != oV) {
+ clearSceneMarks();
+ filterMarkViews();
+ }
+});
+
+function createSceneMarks() {
+ onMapMounted(() => {
+ allMarkViews = [];
+ props.data.forEach((d) => {
+ // 鍒涘缓鍦烘櫙鍦板浘鏍囨敞
+ const mark = marks.createMarker({
+ position: [d.longitude, d.latitude],
+ img: sceneIcon(d.typeid),
+ // label: d.name,
+ extData: d
+ });
+ // 娣诲姞鐐瑰嚮浜嬩欢
+ 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);
+ });
+ });
+}
+
+/**
+ * 绛涢�夋墍閫夌被鍨嬬殑鍦烘櫙
+ */
+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