2025.7.21 任务管理-监管地图功能（待完成）

feiyu02

2025-07-21 5be9679fb4288936b576cf3d1f1548af1c4151b8

 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>