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>
|
<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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.top-block{
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
pointer-events:none;//值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。
|
||||||
|
.operate{
|
||||||
|
//该控件可以点击
|
||||||
|
pointer-events: all;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
Loading…
Reference in new issue