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 | 184 +++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 180 insertions(+), 4 deletions(-)
diff --git a/src/components/map/SceneMap.vue b/src/components/map/SceneMap.vue
index 60e7038..3abe4c6 100644
--- a/src/components/map/SceneMap.vue
+++ b/src/components/map/SceneMap.vue
@@ -1,12 +1,188 @@
<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>
+ <!-- <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, 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
});
+
+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) {
+ clearSceneMarks();
+ createSceneMarks();
+ filterMarkViews(true);
+ }
+ },
+ { immediate: true }
+);
+
+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(() => {
+ 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(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