新增场景信息文件导入功能

riku

2025-08-13 bf42ef43fccdf3d3486eec84ad4073b0c7650aba

 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>