JiaSu
/
sugarbreed-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交地图操作组件

Browse Source
master
贾肃 5 months ago
parent 6bb0dec6b7
commit a86b26c5b4
4 changed files with 231 additions and 6 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 4
      src/components/Hamburger/index.vue
  2. 146
      src/views/system/base/baseRightControl.vue
  3. 4
      src/views/system/base/baseTable.vue
  4. 83
      src/views/system/base/mapMarkers.vue

4
src/components/Hamburger/index.vue
Unescape View File

@ -77,8 +77,8 @@ const menuList = ref([
},
{
label: '环境数据', children: [
{label: '基地地图',href:'/system/base/map'},
{label: '地块管理'},
{label: '基地地图',href:'/system/base/mapMarkers'},
{label: '地块管理',href:'/system/base/baseTable'},
{label: '土壤数据'},
{label: '气象数据'},
{label: '监控数据'},

146
src/views/system/base/baseRightControl.vue
Unescape View File

@ -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>

4
src/views/system/base/list.vue → src/views/system/base/baseTable.vue
Unescape View File

@ -3,7 +3,9 @@
</script>
<template>
<div>
地块列表
</div>
</template>
<style scoped lang="scss">

83
src/views/system/base/mapMarkers.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save