128 lines
3.1 KiB
Vue
128 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="map-viewer">
|
|||
|
|
<div class="map-viewer__container">
|
|||
|
|
<!-- 这里放置实际的3D地图组件（如 Cesium, Mapbox GL JS 等） -->
|
|||
|
|
<div class="map-placeholder">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 地图控制工具 -->
|
|||
|
|
<MapControls />
|
|||
|
|
|
|||
|
|
<!-- 地图标记点（应急人员、应急中心等） -->
|
|||
|
|
<div class="map-markers">
|
|||
|
|
<img
|
|||
|
|
src="../../assets/images/SketchPng9eb481bdb1aa555bcf1e817c3db9af492e273f88d5808c989826a8c382c5cb9f.png"
|
|||
|
|
alt="marker"
|
|||
|
|
class="map-marker"
|
|||
|
|
style="top: 40%; left: 45%"
|
|||
|
|
@click="handleMarkerClick('personnel')"
|
|||
|
|
/>
|
|||
|
|
<img
|
|||
|
|
src="../../assets/images/SketchPng3992df008169f438b4eab0a5f08b6d39b14f1387a18c08564067b7845d11b124.png"
|
|||
|
|
alt="center"
|
|||
|
|
class="map-marker"
|
|||
|
|
style="top: 60%; left: 55%"
|
|||
|
|
@click="handleMarkerClick('center')"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import MapControls from './MapControls.vue'
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['marker-click'])
|
|||
|
|
|
|||
|
|
const handleMarkerClick = (type) => {
|
|||
|
|
console.log('点击标记:', type)
|
|||
|
|
emit('marker-click', type)
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
@use '@/styles/mixins.scss' as *;
|
|||
|
|
@use '../../assets/styles/common.scss' as *;
|
|||
|
|
|
|||
|
|
.map-viewer {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
&__container {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
position: relative;
|
|||
|
|
background: url(../../assets/images/SketchPng6e145958ea0dbf76e6562cc7965debbb95226caff3271c366ac9b254cbe6e796.png) center/cover no-repeat;
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.map-placeholder {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(135deg, rgba(9, 22, 40, 0.9) 0%, rgba(20, 53, 118, 0.7) 100%);
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
// 实际使用时，这里会被3D地图组件替换
|
|||
|
|
&::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: url(../../assets/images/SketchPng6e145958ea0dbf76e6562cc7965debbb95226caff3271c366ac9b254cbe6e796.png) center/cover;
|
|||
|
|
opacity: 0.1;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-watermark {
|
|||
|
|
position: absolute;
|
|||
|
|
top: vh(20);
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
padding: vh(8) vw(20);
|
|||
|
|
background: rgba(0, 0, 0, 0.6);
|
|||
|
|
border-radius: vw(6);
|
|||
|
|
color: var(--text-white);
|
|||
|
|
font-size: fs(14);
|
|||
|
|
font-family: SourceHanSansCN-Medium, sans-serif;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.map-markers {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
pointer-events: none;
|
|||
|
|
|
|||
|
|
.map-marker {
|
|||
|
|
position: absolute;
|
|||
|
|
width: vw(32);
|
|||
|
|
height: vh(36);
|
|||
|
|
cursor: pointer;
|
|||
|
|
pointer-events: all;
|
|||
|
|
transition: transform 0.3s;
|
|||
|
|
animation: markerBounce 2s ease-in-out infinite;
|
|||
|
|
|
|||
|
|
&:hover {
|
|||
|
|
transform: scale(1.2);
|
|||
|
|
animation: none;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes markerBounce {
|
|||
|
|
0%,
|
|||
|
|
100% {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
50% {
|
|||
|
|
transform: translateY(vh(-10));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|