<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-scrollbar class="right-wrap">
|
<div v-for="s in selectedSceneList" :key="s.guid">
|
<el-checkbox
|
v-model="s._checked"
|
:label="s.name"
|
@change="handleChange"
|
/>
|
<!-- <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();
|
}
|
},
|
{ immediate: true }
|
);
|
|
watch(scenetype, (nV, oV) => {
|
if (nV != oV) {
|
clearSceneMarks();
|
filterMarkViews();
|
}
|
});
|
|
function handleChange(value) {
|
console.log(value);
|
|
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() {
|
onMapMounted(() => {
|
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) => {
|
console.log(s.guid, v.getExtData().guid);
|
|
s.guid == v.getExtData().guid;
|
});
|
return _index != -1;
|
});
|
map.add(markViewList);
|
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>
|
.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;
|
}
|
</style>
|
