parent
6bb0dec6b7
commit
a86b26c5b4
@ -0,0 +1,146 @@
|
||||
<!--地图右侧控件-->
|
||||
<script setup>
|
||||
const plantingSeason = ref(2023)
|
||||
// 种植季选项
|
||||
const plantingSeasonList = [
|
||||
{value: 2023, label: '2023年种植季'},
|
||||
{value: 2024, label: '2024年种植季'},
|
||||
]
|
||||
const router = useRouter()
|
||||
const toBaseTable = () => {
|
||||
router.push('/system/base/baseTable')
|
||||
}
|
||||
const control = ref({
|
||||
// 地图类型
|
||||
dataType:1,
|
||||
// 显示地块标签
|
||||
massifLabel:false,
|
||||
// 显示网格地块
|
||||
massifGrid:false,
|
||||
// 显示垄
|
||||
showRidge:false,
|
||||
// 显示垄标签
|
||||
ridgeLabel:false,
|
||||
// 显示植株
|
||||
showPlant:false,
|
||||
// 显示植株标签
|
||||
plantLabel:false,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="right-control">
|
||||
<el-select v-model="plantingSeason" class="operate" style="width: 150px">
|
||||
<el-option v-for="item in plantingSeasonList" :value="item.value" :label="item.label"></el-option>
|
||||
</el-select>
|
||||
<div style="display: flex;
|
||||
justify-content: flex-end;">
|
||||
<el-dropdown class="operate" trigger="click" style="margin-right: 10px">
|
||||
<div class="map-type">
|
||||
<i-map-draw theme="outline" size="20" fill="#333"/>
|
||||
地图模式
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down/>
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item disabled>
|
||||
<i-map-draw theme="outline" size="20" fill="#333" style="margin-right: 5px"/>
|
||||
地图模式
|
||||
<el-icon style="margin-left: 5px"><Select /></el-icon>
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="toBaseTable">
|
||||
<i-list-checkbox theme="outline" size="20" fill="#333" style="margin-right: 5px"/>
|
||||
列表模式
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-dropdown class="operate" trigger="click" :hide-on-click="false">
|
||||
<div class="map-type map-option">
|
||||
<i-filter theme="outline" size="22" fill="#333"/>
|
||||
地图选项
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down/>
|
||||
</el-icon>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<div>
|
||||
地图类型
|
||||
<el-dropdown-item>
|
||||
卫星地图
|
||||
</el-dropdown-item>
|
||||
地块
|
||||
|
||||
<el-dropdown-item>
|
||||
显示地块标签
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
显示网格地块
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
显示垄
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
显示垄标签
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
显示植株
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
显示植株标签
|
||||
</el-dropdown-item>
|
||||
</div>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.map-type {
|
||||
font-size: 14px;
|
||||
color: var(--el-text-color-regular);
|
||||
//鼠标悬浮变成点击
|
||||
cursor: pointer;
|
||||
width: 115px;
|
||||
background: #FFFFFF;
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
|
||||
.i-icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.right-control {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 10px;
|
||||
width: 350px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.operate {
|
||||
margin: 5px 0;
|
||||
//该控件可以点击
|
||||
pointer-events: all;
|
||||
}
|
||||
.choose{
|
||||
border: 1px solid var(--el-dropdown-menuItem-hover-color);
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
border-radius: 50%;
|
||||
margin-left: 10px;
|
||||
.change{
|
||||
margin: 1.5px auto;
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--el-dropdown-menuItem-hover-color);
|
||||
}
|
||||
}
|
||||
</style>
|
@ -1,12 +1,89 @@
|
||||
<!--基地点坐标-->
|
||||
<script setup>
|
||||
|
||||
import {ElAmap, useGeolocation ,lazyAMapApiLoaderInstance} from "@vuemap/vue-amap";
|
||||
import BaseRightControl from "@/views/system/base/baseRightControl.vue";
|
||||
const maxHeight = ref(window.innerHeight - 100);
|
||||
const zoom = ref(13);
|
||||
const center = ref([
|
||||
116.338461,
|
||||
39.97947
|
||||
]);
|
||||
const markerPosition = ref([
|
||||
116.338461,
|
||||
39.97947
|
||||
])
|
||||
// 显示模式 1为查看基地地图 2为点击进入显示基地地块
|
||||
const showType = ref(1)
|
||||
// 点击的基地
|
||||
const clickBase = ref(null)
|
||||
onBeforeMount(() => {
|
||||
// 获取当前定位
|
||||
// lazyAMapApiLoaderInstance.then(() => {
|
||||
// useGeolocation({
|
||||
// enableHighAccuracy: true,
|
||||
// needAddress: true
|
||||
// }).then(res => {
|
||||
// const {getCurrentPosition, getCityInfo} = res;
|
||||
// getCurrentPosition().then(currentPosition => {
|
||||
// center.value = currentPosition.position.toArray();
|
||||
// markerPosition.value = currentPosition.position.toArray();
|
||||
// console.log('currentPosition: ', markerPosition.value)
|
||||
// });
|
||||
// // getCityInfo().then(cityResult => {
|
||||
// // console.log('cityResult: ', cityResult)
|
||||
// // })
|
||||
// })
|
||||
// })
|
||||
})
|
||||
// 进入搜索选择的位置
|
||||
const selectPoi = ({poi}) => {
|
||||
center.value = poi.location.toArray()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="app-container" :style="{height:maxHeight+'px'}">
|
||||
<el-amap
|
||||
:center="center"
|
||||
:zoom="zoom"
|
||||
>
|
||||
<!--卫星云图-->
|
||||
<el-amap-layer-satellite :visible="true" />
|
||||
<!--定位控件-->
|
||||
<el-amap-control-geolocation :visible="false"/>
|
||||
<!--地图缩放控件-->
|
||||
<el-amap-control-tool-bar :visible="true" />
|
||||
<!--比例尺-->
|
||||
<el-amap-control-scale :visible="true" />
|
||||
<!-- 点标记-->
|
||||
<el-amap-marker
|
||||
:position="markerPosition"
|
||||
title="当前位置"
|
||||
label="当前位置"
|
||||
/>
|
||||
<!--搜索控件-->
|
||||
<el-amap-search-box
|
||||
:visible="false"
|
||||
:debounce="1000"
|
||||
@select="selectPoi"
|
||||
/>
|
||||
<div class="top-block">
|
||||
<base-right-control />
|
||||
</div>
|
||||
</el-amap>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.top-block{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
|
||||
.operate{
|
||||
//该控件可以点击
|
||||
pointer-events: all;
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
Reference in new issue