104 lines
1.9 KiB
Vue
104 lines
1.9 KiB
Vue
<template>
|
|
<div class="map-controller">
|
|
<div class="map-controller-group">
|
|
<div class="map-controller-item" v-for="item in controllers" :key="item.key">
|
|
<a-tooltip :title="item.name" placement="left">
|
|
<i class="icon iconfont" :class="'icon-' + item.icon"></i>
|
|
</a-tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
const isFullScreen = ref(false);
|
|
const mapType = ref("2D");
|
|
const controllers = ref([
|
|
{
|
|
name: "全屏",
|
|
key: "fullScreen",
|
|
icon: isFullScreen.value ? "exitFullScreen" : "fullScreen",
|
|
},
|
|
{
|
|
name: "定位",
|
|
key: "positioning",
|
|
icon: "iconGlobal",
|
|
},
|
|
{
|
|
name: "放大",
|
|
key: "zoomIn",
|
|
icon: "zoomIn",
|
|
},
|
|
{
|
|
name: "缩小",
|
|
key: "zoomOut",
|
|
icon: "zoomOut",
|
|
},
|
|
|
|
{
|
|
name: "3D",
|
|
key: "dim",
|
|
icon: mapType.value === "2D" ? "a-3D" : "a-2D",
|
|
},
|
|
{
|
|
name: "图层",
|
|
// 树形图层组件
|
|
key: "layerController",
|
|
icon: "layer"
|
|
},
|
|
{
|
|
name: "下载",
|
|
key: "screenShot",
|
|
icon: "downLoad",
|
|
},
|
|
{
|
|
name: "梯级",
|
|
key: "TJ",
|
|
icon: "tiji",
|
|
},
|
|
{
|
|
name: "倾斜摄影",
|
|
key: "OSBGController",
|
|
icon: "obliquePhotography",
|
|
},
|
|
{
|
|
name: "三维漫游",
|
|
key: "threedRoam",
|
|
icon: "roaming",
|
|
},
|
|
]);
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.map-controller {
|
|
position: absolute;
|
|
right: 480px;
|
|
bottom: 114px;
|
|
z-index: 10;
|
|
.map-controller-group {
|
|
box-shadow: 0 1px 2px #00000026;
|
|
background-color: #fff;
|
|
border: none;
|
|
.map-controller-item {
|
|
height: 40px;
|
|
width: 40px;
|
|
color: #000;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
position: relative;
|
|
cursor: pointer;
|
|
.iconfont {
|
|
font-size: 20px;
|
|
}
|
|
&:hover {
|
|
background-color: #005292;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.map-controller-group:not(:first-child) {
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|