|
@@ -1,30 +1,21 @@
|
|
|
<template>
|
|
|
<div class="map-layout">
|
|
|
+ <Teleport to=".header" v-if="isMounted">
|
|
|
+ <div class="custom_bar">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </Teleport>
|
|
|
<div id="map" class="map-container" ref="mapContainer" @click.stop>
|
|
|
<div class="map-component">
|
|
|
- <el-select
|
|
|
- v-model="tileType"
|
|
|
- placeholder="选择底图"
|
|
|
- style="width: 120px"
|
|
|
- class="tile-type-select"
|
|
|
- >
|
|
|
- <el-option
|
|
|
- v-for="item in tileOptions"
|
|
|
- :key="item"
|
|
|
- :label="item"
|
|
|
- :value="item"
|
|
|
- />
|
|
|
+ <el-select v-model="tileType" placeholder="选择底图" style="width: 120px" class="tile-type-select">
|
|
|
+ <el-option v-for="item in tileOptions" :key="item" :label="item" :value="item" />
|
|
|
</el-select>
|
|
|
</div>
|
|
|
|
|
|
<div class="board" ref="boardContainer"></div>
|
|
|
</div>
|
|
|
<div class="right-control">
|
|
|
- <MapRight
|
|
|
- @fly-point="flyScenePoint"
|
|
|
- @fly-scene="flyScene"
|
|
|
- @goto-point="gotoPointPage"
|
|
|
- />
|
|
|
+ <MapRight @fly-point="flyScenePoint" @fly-scene="flyScene" @goto-point="gotoPointPage" />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -36,8 +27,9 @@ import { Manage } from "./openlayer";
|
|
|
import { ScenePoint, Scene, scenePoints, scenes } from "@/store/scene";
|
|
|
import { initRelics, initSelfRelics, relics } from "@/store/relics";
|
|
|
import { onMounted, ref, watchEffect, watch, onUnmounted } from "vue";
|
|
|
-import { createBoard, scenePosTransform } from "./board/";
|
|
|
+import { createBoard, scenePosTransform } from "./board";
|
|
|
import { relicsPolyginsFetch } from "@/request";
|
|
|
+
|
|
|
import {
|
|
|
mapManageInit,
|
|
|
boardInit,
|
|
@@ -53,6 +45,8 @@ const gotoPointPage = (point: ScenePoint) => {
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+const isMounted = ref(false)
|
|
|
+
|
|
|
const autoInitPos = () => {
|
|
|
const scene = scenes.value.find(
|
|
|
(scene) => !scene.scenePos.every((pos) => !pos.pos || pos.pos.length === 0)
|
|
@@ -163,7 +157,8 @@ let board: ReturnType<typeof createBoard>;
|
|
|
|
|
|
onMounted(async () => {
|
|
|
mapManage = mapManageInit(mapContainer.value!);
|
|
|
- board = boardInit(boardContainer.value!, mapManage);
|
|
|
+ board = (window as any).board = boardInit(boardContainer.value!, mapManage);
|
|
|
+ isMounted.value = true
|
|
|
});
|
|
|
|
|
|
onUnmounted(() => {
|
|
@@ -176,6 +171,7 @@ onUnmounted(() => {
|
|
|
.tooltip {
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
+
|
|
|
.map-layout {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
@@ -219,6 +215,7 @@ onUnmounted(() => {
|
|
|
top: 0;
|
|
|
z-index: 9;
|
|
|
}
|
|
|
+
|
|
|
.env {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
@@ -245,15 +242,19 @@ onUnmounted(() => {
|
|
|
font-size: 14px;
|
|
|
display: flex;
|
|
|
align-items: end;
|
|
|
+
|
|
|
&.light {
|
|
|
--color: #fff;
|
|
|
- > div {
|
|
|
+
|
|
|
+ >div {
|
|
|
text-shadow: 0 0 2px #000;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&.dark {
|
|
|
--color: #000;
|
|
|
- > div {
|
|
|
+
|
|
|
+ >div {
|
|
|
text-shadow: 0 0 2px #fff;
|
|
|
}
|
|
|
}
|
|
@@ -267,4 +268,14 @@ onUnmounted(() => {
|
|
|
right: 0;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
+
|
|
|
+.custom_bar {
|
|
|
+ width: 60px;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: white;
|
|
|
+
|
|
|
+}
|
|
|
</style>
|