<template>
|
<div class="relative">
|
<div ref="containerRef" class="h-full"></div>
|
<div ref="infoWindowRef" v-show="infoWindowIsShow">
|
<div
|
class="bg-white rounded-md text-nowrap flex flex-col w-fit border border-solid border-blue-600 relative z-[1]"
|
style="padding: 12px"
|
>
|
<span
|
@click="closeInfoWindow"
|
class="guanbi absolute ywifont ywicon-guanbi right-[4px] top-[-2px] font-bold text-[#c3c3c3] cursor-pointer"
|
></span>
|
|
<div class="space-x-4 flex w-full">
|
<div class="flex flex-col w-1/2 key-list">
|
<span
|
v-for="(col, index) in colsArray"
|
:key="index"
|
class="flex-items-center justify-start text-gray-600"
|
style="height: 20px"
|
>{{ col.title ?? '' }}</span
|
>
|
</div>
|
|
<div class="flex flex-col w-1/2 value-list" v-if="infoWindowMapRow">
|
<span
|
v-for="(col, index) in colsArray"
|
:key="index"
|
class="flex-items-center justify-end text-black"
|
style="height: 20px"
|
>{{ infoWindowMapRow[index] ?? '' }}</span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
<LayerControl v-if="olMap" :olMap="olMap" class="absolute top-3 left-10 z-10" />
|
</div>
|
</template>
|
|
<script setup lang="ts" name="BasicMap">
|
import type { Overlay } from 'ol';
|
import 'ol/ol.css';
|
|
import { computed, onMounted, ref, shallowRef } from 'vue';
|
import equipSelectPic from './img/equip-select.svg';
|
import equipPic from './img/equip.svg';
|
import LayerControl from './LayerControl.vue';
|
import { OLMap } from '/@/model/map/OLMap';
|
|
const props = defineProps<{
|
data: any;
|
}>();
|
const colsArray = computed(() => {
|
return props.data.cols ?? [];
|
});
|
const emit = defineEmits(['markerClick', 'closeInfoWindow']);
|
|
const containerRef = ref<HTMLDivElement>(null);
|
const infoWindowRef = ref<HTMLDivElement>(null);
|
const infoWindowIsShow = ref(false);
|
const infoWindowMapRow = ref(null);
|
const olMap = shallowRef<OLMap>();
|
let infoWindowOverlay: Overlay;
|
let lastOverlay: Overlay;
|
const setMarkerIcon = (overlay: Overlay, icon: string) => {
|
if (!overlay) return;
|
const ele = overlay.getElement() as HTMLImageElement;
|
if (!ele) return;
|
ele.src = icon;
|
};
|
const showInfoWindow = (overlay: Overlay) => {
|
const position = overlay.getPosition();
|
const row = overlay.get('extData');
|
lastOverlay && setMarkerIcon(lastOverlay, equipPic);
|
infoWindowIsShow.value = true;
|
infoWindowOverlay.setPosition(position);
|
infoWindowMapRow.value = row;
|
setMarkerIcon(overlay, equipSelectPic);
|
lastOverlay = overlay;
|
emit('markerClick', row);
|
};
|
|
const closeInfoWindow = () => {
|
infoWindowIsShow.value = false;
|
infoWindowMapRow.value = null;
|
setMarkerIcon(lastOverlay, equipPic);
|
emit('closeInfoWindow');
|
};
|
const addMarkerLayer = () => {
|
const map = props.data.map;
|
if (map.pos_x == null && map.pos_y == null) return;
|
|
const dataList = (props.data?.values ?? []).map((item) => {
|
const x = item[map.pos_x];
|
const y = item[map.pos_y];
|
|
return {
|
position: [x, y],
|
// textColor: item.color,
|
extData: item,
|
title: item.title,
|
};
|
});
|
olMap.value.addMarkerLayer(dataList, {
|
markerOpt: {
|
icon: {
|
url: equipPic,
|
size: 30,
|
selectUrl: equipSelectPic,
|
},
|
click(e, label, item, position) {
|
showInfoWindow(label);
|
},
|
},
|
layerOpt: {
|
// allowCollision:false
|
},
|
});
|
};
|
const initMap = () => {
|
olMap.value = new OLMap({
|
container: containerRef.value,
|
});
|
addMarkerLayer();
|
infoWindowOverlay = olMap.value.createEleOverlay(infoWindowRef.value);
|
olMap.value.map.addOverlay(infoWindowOverlay);
|
};
|
|
onMounted(() => {
|
initMap();
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
