<template>
|
<el-popover placement="bottom" trigger="click">
|
<template #reference>
|
<el-button
|
type="primary"
|
icon="Memo"
|
class="el-button-custom p-events-auto"
|
>
|
场景标注
|
<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
</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"
|
:disabled="item.disabled"
|
>{{ 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()
|
};
|
},
|
watch: {
|
// 当切换区县时，清空所有选项
|
districtCode(nV, oV) {
|
if (nV != oV) {
|
this.handelCheckAllChange(false);
|
}
|
}
|
},
|
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) => {
|
const key = this.districtCode + t;
|
if (!lableMarkMap.has(key)) {
|
this.fetchScene(t).then((res) => {
|
const layer = marks.createLabelMarks(sceneIcon(t), res);
|
lableMarkMap.set(key, { show: true, layer });
|
});
|
} else {
|
const m = lableMarkMap.get(key);
|
if (!m.show) {
|
MapUtil.addViews(m.layer);
|
m.show = true;
|
}
|
}
|
});
|
|
// 根据选项，将开启中的未选中图层关闭
|
for (const [key, value] of lableMarkMap) {
|
if (!types.map((t) => this.districtCode + t).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>
|
