You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.1 KiB
45 lines
1.1 KiB
<script setup lang="ts">
|
|
import { onMounted, onBeforeUnmount } from "vue";
|
|
import { messageCallback } from "@/message/index";
|
|
import Legend from "./components/Legend.vue";
|
|
import { useMap } from "@/hooks/web/useMap";
|
|
const { initMap } = useMap();
|
|
const resize = () => {
|
|
const app = document.getElementById("app") as HTMLDivElement;
|
|
if (!app) return;
|
|
const clientHeight = document.body.clientHeight;
|
|
const zoom = clientHeight / 1080;
|
|
(app.style as any).zoom = zoom * 100 + "%";
|
|
};
|
|
|
|
onMounted(async () => {
|
|
initMap();
|
|
// 注册postMessage事件
|
|
window.addEventListener("message", messageCallback);
|
|
window.addEventListener("resize", resize);
|
|
window.addEventListener("load", resize);
|
|
});
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("message", messageCallback);
|
|
window.$bus.$all_off();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="legend-box">
|
|
<Legend></Legend>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.legend-box {
|
|
position: absolute;
|
|
bottom: 24px;
|
|
right: 550px;
|
|
padding: 12px 0 12px 12px;
|
|
overflow-y: auto;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|