新增场景标注

riku

2024-05-13 d277d770292df0a1266c07f4773d62edd70e6515

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<template>
  <el-popover placement="bottom" trigger="click">
    <template #reference>
      <el-button
        type="primary"
        icon="Memo"
        class="el-button-custom p-events-auto"
      >
        场景标注
      </el-button>
    </template>
    <OptionLocation v-model="districtCode"></OptionLocation>
    <div class="vertical-class">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handelCheckAllChange"
        >全选</el-checkbox
      >
    </div>
    <el-checkbox-group
      v-model="selectType"
      size="default"
      @change="handleChange"
    >
      <div class="vertical-class">
        <el-checkbox
          v-for="item in options"
          :key="item.label"
          :value="item.value"
          >{{ item.label }}</el-checkbox
        >
      </div>
    </el-checkbox-group>
  </el-popover>
</template>
 
<script>
import { sceneTypes, sceneIcon } from '@/constant/scene-types';
import sceneInfoApi from '@/api/sceneInfoApi';
import marks from '@/utils/map/marks';
import MapUtil from '@/utils/map/util';
 
const lableMarkMap = new Map();
 
export default {
  data() {
    return {
      districtCode: '',
      isIndeterminate: false,
      checkAll: false,
      selectType: [],
      options: sceneTypes(),
      sceneMap: new Map()
    };
  },
  methods: {
    fetchScene(sceneType) {
      return sceneInfoApi
        .searchScene({
          districtCode: this.districtCode,
          sceneTypeId: sceneType
        })
        .then((res) => {
          return res.data;
        });
    },
    handelCheckAllChange(val) {
      this.selectType = val ? this.options.map((v) => v.value) : [];
      this.isIndeterminate = false;
      this.handleChange(this.selectType);
    },
    handleChange(types) {
      // for (const iterator of lableMarkMap) {
      //   MapUtil.removeViews(iterator[1]);
      // }
 
      let checkedCount = types.length;
      this.checkAll = checkedCount === this.options.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.options.length;
 
      // 根据选项，将未打开的图层开启
      types.forEach((t) => {
        if (!lableMarkMap.has(t)) {
          this.fetchScene(t).then((res) => {
            const layer = marks.createLabelMarks(sceneIcon(t), res);
            lableMarkMap.set(t, { show: true, layer });
          });
        } else {
          const m = lableMarkMap.get(t);
          if (!m.show) {
            MapUtil.addViews(m.layer);
            m.show = true;
          }
        }
      });
 
      // 根据选项，将开启中的未选中图层关闭
      for (const [key, value] of lableMarkMap) {
        if (!types.includes(key)) {
          if (value.show) {
            MapUtil.removeViews(value.layer);
            value.show = false;
          }
        }
      }
      // MapUtil.setFitView();
    }
  }
};
</script>
 
<style scoped>
.el-button {
  margin: initial !important;
}
.vertical-class {
  display: flex;
  flex-direction: column;
}
</style>