<template>
|
<div class="h-[70vh] relative">
|
<div ref="containerRef" class="h-full"></div>
|
<div v-if="bottomBarIsShow" class="absolute w-full bottom-0 bg-white border-gray-300 border border-solid">
|
<div
|
class="w-28 h-5 absolute left-1/2 -translate-x-1/2 -translate-y-[100%] cursor-pointer bg-[#4974f3] rounded-t-lg flex-center"
|
@click="toggleShowChart"
|
>
|
<div
|
class="ywifont -rotate-90 text-white !text-[13px]"
|
:class="{ 'ywicon-zuoyoujiantou': chartIsShow, 'ywicon-zuoyoujiantou1': !chartIsShow }"
|
></div>
|
</div>
|
<RecordSet v-if="chartIsShow" chartHeight="23vh" :data="CHART_DATA" class="mt-2" />
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref } from 'vue';
|
import { chatComProps } from '../common';
|
import RecordSet from '../summaryCom/components/recordSet/RecordSet.vue';
|
import { CHART_DATA } from './TestData';
|
import monitorPointPic from './img/monitor-point.svg';
|
import type { MapData } from './types';
|
import type { GaoDePosition, LabelMarkerData } from '/@/model/map/GaoDeMap';
|
import { GaoDeMap } from '/@/model/map/GaoDeMap';
|
|
let gaoDeMap = new GaoDeMap();
|
const containerRef = ref<HTMLDivElement>(null);
|
const props = defineProps(chatComProps) as {
|
data: MapData;
|
};
|
const createInfoWindow = () => {
|
const dom = `<div class="w-48 bg-white p-1 flex flex-col border-blue-500 border-solid border">
|
<div class="bg-[#ca0dab] flex py-1 text-white px-5">
|
<div class="pointer-title text-nowrap overflow-hidden text-ellipsis mx-auto"></div>
|
</div>
|
|
</div>`;
|
|
// const dom = `<div class="w-32 bg-white p-1 flex flex-col border-blue-500 border-solid border">
|
// <div class="bg-[#ca0dab] flex-center py-1 text-white">
|
// 水月五
|
// </div>
|
// <div class="flex flex-col mt-2">
|
// <div class="flex w-full text-blue-800">
|
// <div class="overflow-hidden text-nowrap overflow-ellipsis self-end flex-auto text-right">
|
// 0.72332
|
// </div>
|
// <div class="flex-0 ml-4">
|
// m
|
// </div>
|
|
// </div>
|
|
// </div>
|
// </div>`;
|
return dom;
|
};
|
|
const updateInfoWindow = (title: string) => {
|
const pointerTitle = infoWindow.dom.querySelector('.pointer-title');
|
pointerTitle.innerHTML = title +'';
|
};
|
|
const addMarkerLayer = () => {
|
const dataList = (props.data?.values ?? []).map<LabelMarkerData>((item) => ({
|
position: [item.posx, item.posy],
|
textColor: item.color,
|
extData: item,
|
title: item.title,
|
}));
|
gaoDeMap.addMarkerLayer(dataList, {
|
markerOpt: {
|
icon: {
|
url: monitorPointPic,
|
size: 30,
|
},
|
click(e, label) {
|
if (!bottomBarIsShow.value) {
|
bottomBarIsShow.value = true;
|
}
|
if (!chartIsShow.value) {
|
chartIsShow.value = true;
|
}
|
infoWindow.open(gaoDeMap.map, label.getPosition() as any);
|
const extData = label.getExtData();
|
updateInfoWindow(extData.title);
|
|
},
|
},
|
layerOpt: {
|
// allowCollision:false
|
},
|
});
|
};
|
const bottomBarIsShow = ref(false);
|
const chartIsShow = ref(true);
|
const toggleShowChart = () => {
|
chartIsShow.value = !chartIsShow.value;
|
};
|
|
let infoWindow: AMap.InfoWindow;
|
|
onMounted(async () => {
|
await gaoDeMap.init({
|
container: containerRef.value,
|
aMapOption: {
|
resizeEnable: true,
|
},
|
});
|
const southWest: GaoDePosition = [props.data.minx, props.data.miny];
|
const northEast: GaoDePosition = [props.data.maxx, props.data.maxy];
|
gaoDeMap.zoomToRect(southWest, northEast);
|
gaoDeMap.applyBasicPlugins();
|
addMarkerLayer();
|
infoWindow = new AMap.InfoWindow({
|
content: createInfoWindow(),
|
offset: [3,-34],
|
closeWhenClickMap: true,
|
});
|
|
});
|
</script>
|
<style scoped lang="scss">
|
:deep(.amap-info-content) {
|
padding: 0;
|
}
|
</style>
|
