<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 { ref, watch } from 'vue';
|
import { map, onMapMounted } from '@/utils/map/index';
|
import marks from '@/utils/map/marks';
|
import { sceneIcon } from '@/assets/scene-icon';
|
const props = defineProps({
|
// 场景点位信息
|
data: Array
|
});
|
|
let allMarkViews = [];
|
let markViewList = [];
|
|
const scenetype = ref();
|
|
watch(
|
() => props.data,
|
(nV, oV) => {
|
if (nV != oV) {
|
clearSceneMarks();
|
createSceneMarks();
|
filterMarkViews();
|
}
|
},
|
{ immediate: true }
|
);
|
|
watch(scenetype, (nV, oV) => {
|
if (nV != oV) {
|
clearSceneMarks();
|
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
|
);
|
});
|
}
|
map.add(markViewList);
|
setTimeout(() => {
|
map.setFitView(markViewList);
|
}, 1000);
|
});
|
}
|
|
function clearSceneMarks() {
|
onMapMounted(() => {
|
if (markViewList.length > 0) {
|
map.remove(markViewList);
|
}
|
});
|
}
|
</script>
|
<style scoped>
|
.left-top-wrap {
|
position: absolute;
|
left: 0;
|
top: 0;
|
}
|
</style>
|
