<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>
|
</div>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, ref } from 'vue';
|
|
import equipPic from './img/equip.svg';
|
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(['data']);
|
const createInfoWindow = () => {
|
// title
|
// <div class="title flex-center bg-[#ca0dab] text-white py-0.5 mb-2 w-full over-ellipsis">
|
// 罗汉鱼
|
// </div>
|
const dom = `<div class="rounded-md text-nowrap flex flex-col w-fit border border-solid border-blue-600 text-blue-600" style="padding: 12px">
|
|
<div class="space-x-4 flex w-full">
|
<div class="flex flex-col w-1/2 key-list">
|
|
</div>
|
|
<div class="flex flex-col w-1/2 value-list">
|
|
</div>
|
</div>
|
</div>`;
|
|
return dom;
|
};
|
|
const updateInfoWindow = (item) => {
|
const cellHeight = '20px';
|
const keyListDom = infoWindow.dom.querySelector('.key-list');
|
const valueListDom = infoWindow.dom.querySelector('.value-list')
|
|
const colsArray = props.data.cols ?? [];
|
const keyItemHtml = colsArray
|
.map((col) => {
|
return `<span class="flex-items-center justify-start" style="height:${cellHeight}">${col.title??''}</span>`;
|
})
|
.join('');
|
|
const valueItemHtml = colsArray
|
.map((col, index) => {
|
return `<span class="flex-items-center justify-end" style="height:${cellHeight}">${item[index] ??''}</span>`;
|
})
|
.join('');
|
|
keyListDom.innerHTML = keyItemHtml;
|
valueListDom.innerHTML = valueItemHtml;
|
};
|
|
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,
|
};
|
});
|
gaoDeMap.addMarkerLayer(dataList, {
|
markerOpt: {
|
icon: {
|
url: equipPic,
|
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);
|
},
|
},
|
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();
|
gaoDeMap.map.setFitView();
|
|
infoWindow = new AMap.InfoWindow({
|
content: createInfoWindow(),
|
// offset: [3, -34],
|
anchor: 'top-left',
|
closeWhenClickMap: true,
|
});
|
});
|
</script>
|
<style scoped lang="scss">
|
:deep(.amap-info-content) {
|
padding: 0;
|
}
|
</style>
|
